Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › Customize Navigation/Tabbar

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #22584

    Patrik Dusek

    Hi all,

    I’m currently trying to adjust the tab navigation for my needs. And I’m stucked with two issues:

    1. is there a way to force felgo to use the ios tabbar layout also on android?
    2. is there a way to hide the tabbar on one navigation page. I want to have one page within the navigation bar but I don’t want to display the tab navigation on this page.

    Any hints on this?

    thx,

    patrik

    #22585

    Nicola
    #22588

    Alex
    Felgo Team

    Hi Patrik,

    currently there is no pre-defined bottom tab navigation style available for the Android theme. We plan to add this with one of our next updates. If you need this right away, it is also pretty straightforward to implement this yourself in QML for now. You can hide the default navigation like this:

    Navigation {
      navigationMode: Theme.platform == android ? navigationModeNone : navigationModeTabs
    }

    which wil display tabs on iOS and nothing on Android.

    Then you can use the Navigation::currentIndex to get and set the current active item of the Navigation. The rest is then custom styling that you apply to make it look like you want.

    Also make sure to lower the height of the Navigation item when you add your tabs below, so the tabs do not cover any content. By default the Navigation is set to “anchors.fill: parent”, so in order to decrease the size, you can set “anchors.bottomMargin: heightOfYourTabs” if the tabs are shown.

    I hope that was somewhat understandable!

    Cheers,
    Alex

    #22589

    Patrik Dusek

    HiĀ  Alex,

    thx for the explenation. Just to be clear: if I hide the navigation for android I have create an own e.g. tabview or can I reuse the

    current navigation in a way and just create some kind of tab displaying items?

    thx,

    patrik

    #22590

    Alex
    Felgo Team

    I would reuse the whole Navigation item (which internally is a TabControl) and just set it to navigationModeNone. And then build just the tabs, e.g. based on https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html , but honestly I think it is even easier to quickly build a completely custom tab-like control. To interact with the Navigation, you can use the currentIndex property.

    Cheers,
    Alex

    #22591

    Patrik Dusek

    Hi Alex,

    Something like that?

        Navigation {
            id: navigation
            navigationMode: navigationModeNone 
    
    ....
        
    Row {
             spacing: 2
             width: parent.width
             height: dp(100)
             anchors.bottom: parent.bottom
             visible: true
             Rectangle {
                 color: "red";
                 opacity: navigation.currentIndex == 0?1:0.5
                 width: parent.width/4;
                 height: parent.height
                 MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        navigation.currentIndex = 0
                    }
                 }
             }
             Rectangle {
                 color: "green";
                 opacity: navigation.currentIndex == 1?1:0.5
                 width: parent.width/4;
                 height: parent.height
                 MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        navigation.currentIndex = 1
                    }
                 }
             }
             Rectangle {
                 color: "blue";
                 opacity: navigation.currentIndex == 2?1:0.5
                 width: parent.width/4;
                 height: parent.height
                 MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        navigation.currentIndex = 2
                    }
                 }
             }
             Rectangle {
                 color: "black";
                 opacity: navigation.currentIndex == 3?1:0.5
                 width: parent.width/4;
                 height: parent.height
                 MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        navigation.currentIndex = 3
                    }
                 }
             }
         }

    best,

    patrik

    #22602

    Alex
    Felgo Team

    Yes pretty much.

    Cheers,
    Alex

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.