iOS Question ToolBar items overflow

walterf25

walterf25

Expert
Licensed User
Longtime User
Hi all, i am adding about 11 text items in the bottom toolbar, currently only 6 of them are visible, and there is what looks like an overflow object, is there a way to show the rest of the items in the toolbar, or is there a limit to how many items you can have in the toolbar?

I realize that there are other options for me to show the menu items, I know there is a iSideMenu which i really don't want to have to use, I know there is the OptionsSheet, and a few other classes/libraries which i have tried a few but most have issues.

Please look at the image below to see what i am referring to.

Thanks in advance and please let me know your suggestions.

Regards,
Walter
 

Attachments

  • overflow.jpg
    overflow.jpg
    152.9 KB · Views: 387
Sort by date Sort by votes
BillMeyer

BillMeyer

Well-Known Member
Licensed User
Longtime User
Hi Walter,

I had a similar situation and what I did was to use the Navigation Toolbar and add a single button in the middle of the screen like this:

1. Go to your designer and click the Navigation Toolbar Visible

2. Now go to the Toolbar Buttons and add this:
upload_2018-7-16_8-5-35.png


3. Now do this to "Button 3" (That little rectangle next to Text is actually the double up arrow in Material Icons)
upload_2018-7-16_8-6-52.png


4. Now do this to Toolbar Button No 5
upload_2018-7-16_8-8-33.png


The above will put the Up Arrow Button in the center of the screen.

5. Now I use this code to make the button function

B4X: 
Private Sub CreateFABarButton(text As String, tag As Object) As BarButton
    Dim bb As BarButton
    Dim b As Button
'    b.InitializeCustom("BarButton", 0xFF54824E, 0xFFE3EBF4) - Original
    b.InitializeCustom("BarButton", Colors.green, Colors.red)
    b.CustomLabel.Font = Font.CreateNew2("FontAwesome", 48)
    b.Text = text
    b.Tag = tag
    b.SetLayoutAnimated(0, 1, 0, 0, 30, 40)
    bb.InitializeCustom(b)
    Return bb
End Sub

Private Sub BarButton_Click
    Dim b As Button = Sender
    Log(b.Tag & " was clicked")
  
    If b.Tag = "QuickAccessUp" Then
        AnimatePanel
        scrMain.ToolbarButtons = Array(CreateFABarButton("", "QuickAccessDown"))
    Else
        AnimatePanel
        scrMain.ToolbarButtons = Array(CreateFABarButton("", "QuickAccessUp"))
    End If

End Sub

and create it with this code:

B4X: 
scrMain.ToolbarButtons = Array(CreateFABarButton("", "QuickAccessUp"))
    NavControl.ToolBarVisible = True

6. Now to get the menu and it's items to animate and work, go to your designer and create an off screen panel with your button etc on it (as you please), like this:

upload_2018-7-16_8-31-24.png


7. This code will now animate the panel and at the same time take care of various screen sizes (you could possibly make it more elegant by using %x and %y)

B4X: 
Sub AnimatePanel
  
    pnlMenuBack.Visible = False
    MMFlipFlop = True

    If pnlFavourite.Tag = "down" Then
        pnlFavourite.Visible = True
        pnlFavourite.SetShadow(Colors.darkgray,5dip,10dip,1,False)
      
        If GetDeviceLayoutValues.Width <= 374 And GetDeviceLayoutValues.Height <= 666 Then
            pnlFavourite.BringToFront '*****iPhone5*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 5, 235, 310, 260)
        Else
            pnlFavourite.BringToFront '*********iPhone6*******
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 10, 320, 350, 260)
        End If
          
        If GetDeviceLayoutValues.Width >= 410 And GetDeviceLayoutValues.Height >= 735 Then
            pnlFavourite.BringToFront '*****iPhone6PLUS*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 20, 380, 365, 260)
        Else

        End If
      
        If GetDeviceLayoutValues.Width >= 767 And GetDeviceLayoutValues.Height >= 1023 Then
            pnlFavourite.BringToFront '*****iPad*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 200, 650, 365, 260)
        Else
        End If
      
        btnQuickAccess.Text = "?"
        pnlFavourite.Tag = "up"
'        btnFavouritePop.Text = "?"
    Else

        If GetDeviceLayoutValues.Width <= 374 And GetDeviceLayoutValues.Height <= 666 Then
            pnlFavourite.BringToFront '*****iPhone5*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 5, 720, 310, 260)
        Else
            pnlFavourite.BringToFront '*********iPhone6*******
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 10, 720, 350, 260)
        End If
          
        If GetDeviceLayoutValues.Width >= 410 And GetDeviceLayoutValues.Height >= 735 Then
            pnlFavourite.BringToFront '*****iPhone6PLUS*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 20, 720, 365, 260)
        Else

        End If
      
        If GetDeviceLayoutValues.Width >= 767 And GetDeviceLayoutValues.Height >= 1023 Then
            pnlFavourite.BringToFront '*****iPad*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 200, 1050, 365, 260)
        Else
        End If
      
        btnQuickAccess.Text = "?"
        pnlFavourite.Tag = "down"
    End If
  
End Sub

8. And the final look will be (down)

upload_2018-7-16_8-43-47.png


and up (naturally after pressing this button below)

upload_2018-7-16_8-45-30.png


This is the way I do it - entirely dependent on style and preference of the Developer - but - just Enjoy !!
 
Upvote 0
walterf25

walterf25

Expert
Licensed User
Longtime User
BillMeyer said:
Hi Walter,

I had a similar situation and what I did was to use the Navigation Toolbar and add a single button in the middle of the screen like this:

1. Go to your designer and click the Navigation Toolbar Visible

2. Now go to the Toolbar Buttons and add this:
View attachment 69974

3. Now do this to "Button 3" (That little rectangle next to Text is actually the double up arrow in Material Icons)
View attachment 69975

4. Now do this to Toolbar Button No 5
View attachment 69976

The above will put the Up Arrow Button in the center of the screen.

5. Now I use this code to make the button function

B4X: 
Private Sub CreateFABarButton(text As String, tag As Object) As BarButton
    Dim bb As BarButton
    Dim b As Button
'    b.InitializeCustom("BarButton", 0xFF54824E, 0xFFE3EBF4) - Original
    b.InitializeCustom("BarButton", Colors.green, Colors.red)
    b.CustomLabel.Font = Font.CreateNew2("FontAwesome", 48)
    b.Text = text
    b.Tag = tag
    b.SetLayoutAnimated(0, 1, 0, 0, 30, 40)
    bb.InitializeCustom(b)
    Return bb
End Sub

Private Sub BarButton_Click
    Dim b As Button = Sender
    Log(b.Tag & " was clicked")
 
    If b.Tag = "QuickAccessUp" Then
        AnimatePanel
        scrMain.ToolbarButtons = Array(CreateFABarButton("", "QuickAccessDown"))
    Else
        AnimatePanel
        scrMain.ToolbarButtons = Array(CreateFABarButton("", "QuickAccessUp"))
    End If

End Sub

and create it with this code:

B4X: 
scrMain.ToolbarButtons = Array(CreateFABarButton("", "QuickAccessUp"))
    NavControl.ToolBarVisible = True

6. Now to get the menu and it's items to animate and work, go to your designer and create an off screen panel with your button etc on it (as you please), like this:

View attachment 69977

7. This code will now animate the panel and at the same time take care of various screen sizes (you could possibly make it more elegant by using %x and %y)

B4X: 
Sub AnimatePanel
 
    pnlMenuBack.Visible = False
    MMFlipFlop = True

    If pnlFavourite.Tag = "down" Then
        pnlFavourite.Visible = True
        pnlFavourite.SetShadow(Colors.darkgray,5dip,10dip,1,False)
     
        If GetDeviceLayoutValues.Width <= 374 And GetDeviceLayoutValues.Height <= 666 Then
            pnlFavourite.BringToFront '*****iPhone5*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 5, 235, 310, 260)
        Else
            pnlFavourite.BringToFront '*********iPhone6*******
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 10, 320, 350, 260)
        End If
         
        If GetDeviceLayoutValues.Width >= 410 And GetDeviceLayoutValues.Height >= 735 Then
            pnlFavourite.BringToFront '*****iPhone6PLUS*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 20, 380, 365, 260)
        Else

        End If
     
        If GetDeviceLayoutValues.Width >= 767 And GetDeviceLayoutValues.Height >= 1023 Then
            pnlFavourite.BringToFront '*****iPad*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 200, 650, 365, 260)
        Else
        End If
     
        btnQuickAccess.Text = "?"
        pnlFavourite.Tag = "up"
'        btnFavouritePop.Text = "?"
    Else

        If GetDeviceLayoutValues.Width <= 374 And GetDeviceLayoutValues.Height <= 666 Then
            pnlFavourite.BringToFront '*****iPhone5*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 5, 720, 310, 260)
        Else
            pnlFavourite.BringToFront '*********iPhone6*******
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 10, 720, 350, 260)
        End If
         
        If GetDeviceLayoutValues.Width >= 410 And GetDeviceLayoutValues.Height >= 735 Then
            pnlFavourite.BringToFront '*****iPhone6PLUS*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 20, 720, 365, 260)
        Else

        End If
     
        If GetDeviceLayoutValues.Width >= 767 And GetDeviceLayoutValues.Height >= 1023 Then
            pnlFavourite.BringToFront '*****iPad*********
            pnlFavourite.SetLayoutAnimated(1000, 0.8, 200, 1050, 365, 260)
        Else
        End If
     
        btnQuickAccess.Text = "?"
        pnlFavourite.Tag = "down"
    End If
 
End Sub

8. And the final look will be (down)

View attachment 69978

and up (naturally after pressing this button below)

View attachment 69979

This is the way I do it - entirely dependent on style and preference of the Developer - but - just Enjoy !!
Click to expand...
Thanks for your suggestion, it definitely looks very good on your screenshots, I will give it a try, again thanks for your help.

Walter
 
Upvote 0
You must log in or register to reply here.
Top