iOS Question [SOLVED] Possible to make B4XDrawer cover top of screen also?

Discussion in 'iOS Questions' started by Sandman, Nov 6, 2018.

  1. Sandman

    Sandman Well-Known Member Licensed User

    This question is regarding the lovely B4XDrawer, which I'm a huge fan of.

    On Android, B4XDrawer also covers the top of the screen, like we can see here:
    (With a transparent status bar)

    upload_2018-11-6_21-25-46.png


    On iOS the drawer doesn't overlap the top section:

    upload_2018-11-6_21-17-42.png


    However, when looking at (for instance) the Gmail app for iOS, their menu also covers the top section:

    upload_2018-11-6_21-19-43.png


    I have no idea if it's possible and reasonable to make B4XDrawer also cover the top area on iOS, but I thought it might be worth asking.

    (I looked at the B4XDrawer source to see if it was a simple adjustment needed, but I could see that all references to Top for that panel was already set to 0, so I'm thinking probably some magic stuff is needed for this - and that's very far from my skill set.)
     
  2. Erel

    Erel Administrator Staff Member Licensed User

    You can do two things:

    1. Hide the navigation bar:
    Code:
    NavControl.NavigationBarVisible = False
    You can create your own bar instead.

    2. You can hide the status bar: https://www.b4x.com/android/forum/threads/47866/#content

    I don't think that it is possible to draw over the status bar.
     
    Sandman likes this.
  3. Sandman

    Sandman Well-Known Member Licensed User

    That's an excellent, and very doable, compromise - thanks!


    Just looking at Gmail in my iPhone, it seems possible to do it. However, I imagine it's entirely possible they did what you suggested with the nav bar, and just hid it and made their own that looks identical.
     
  4. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    Hello Sandman,

    Did you find a solution to overdraw the statusbar?

    If you did with other solution, please, comment here.

    But the solution I found is simple:

    In the Resize event on B4XDrawer, just change:
    Code:
    mBasePanel.SetLayoutAnimated(0,  00, Width, Height)
    for
    Code:
    mBasePanel.SetLayoutAnimated(0,  0, -20, Width, Height+20)
     
  5. Sandman

    Sandman Well-Known Member Licensed User

    No, I did not. I didn't really try very hard, but I will take a look at your solution when I revisit this code. But you are saying it works perfectly, and that you actually can overlap the statusbar that easily?
     
  6. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    Check this:



    Basically you need to make this little modification on B4XDrawer:

    Code:
    Public Sub Resize(Width As Int, Height As Int)
       
        
    If IsOpen Then ChangeOffset(-mSideWidth, FalseTrue)
       
        
    #if B4A
            mBasePanel.SetLayoutAnimated(
    000, Width, Height)
            mLeftPanel.SetLayoutAnimated(
    0, mLeftPanel.Left, 0, mLeftPanel.Width, mBasePanel.Height)
            mDarkPanel.SetLayoutAnimated(
    000, Width, Height)
            mCenterPanel.SetLayoutAnimated(
    000, Width, Height)
        
    #else if B4i
       
            mBasePanel.SetLayoutAnimated(
    0,  0, -20, Width, Height+20)
            mLeftPanel.SetLayoutAnimated(
    0, mLeftPanel.Left, 0, mLeftPanel.Width, mBasePanel.Height)
            mDarkPanel.SetLayoutAnimated(
    000, Width, Height+40)
            mCenterPanel.SetLayoutAnimated(
    0,  020, Width, Height+20)
        
    #End If
       
    End Sub
    and call this function to make status bar transparent before, on Application_Start

    SetStatusBarStyleLight(App,1)

    Code:
    Sub SetStatusBarStyleLight(app As Application,iStyle As Int) 'ignore
           Dim no As NativeObject = app
           no.RunMethod(
    "setStatusBarStyle:"Array(iStyle))
    End Sub
     
  7. Sandman

    Sandman Well-Known Member Licensed User

    Good video, thanks. Ok, so your solution is kind of over. I mean, it's over the statusbar background, but the statusbar text is still on top.

    Compare that to this picture showing Gmail on iOS, where it's also over the text in the statusbar:

    [​IMG]

    (Ignore the fact that the visible status bar doesn't have any text, it does in reality - for some reason it's just removed in this screenshot.)
     
  8. sorex

    sorex Expert Licensed User

    You just want your app to be full screen?

    Code:
    Private Sub Application_Start (Nav As NavigationController)
        no.RunMethod(
    "setStatusBarHidden:animated:"Array(TrueFalse))

        NavControl = Nav
        NavControl.NavigationBarVisible=
    False
        NavControl.ToolBarVisible=
    False

        Page1.Initialize(
    "Page1")
        NavControl.ShowPage(Page1)
    End Sub
     
  9. Sandman

    Sandman Well-Known Member Licensed User

    I don't know what made you think that, but... No.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice