Forums

OverviewV-Play 2 Support (Qt 5) › TabViewStyle on handset/tablets

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #13041

    Per

    I’ve noticed that the icons in TabView (default on iOS) are very small on Tablets. They do not scale as other icon styles. There is supposedly a default TabViewStyle, but this seems to point to qml TabView which does not contain icons. How do I get TabView icons to look ok on ipads?

    #13044

    Günther
    V-Play Team

    Hi Per!

    V-Play currently implements a custom TabViewStyle for realizing the iOS/Android styling. The look of the tabs can be modified via the Theme.tabBar settings.
    The size of the tab icons is defined by the iconSize property.

    However,the TabViewStyle implementation already uses platform-independent sizes for all elements and icons – so the icons should have the same physical size on tablets and phones (for iOS the initial setting is 22 dp). Is there any reason why your icons might be smaller just on tablets?

    Best,
    Günther

    #13060

    Per

    Thanks for the fast response! You are right, the tab icons are the same size on ipad and iphone. Visually they “appeared” smaller on the ipad.

     

    I use iconSize:40 icons in my apps, so I specified Component.onCompleted : { Theme.tabBar.iconsize=40; Theme.tabBar.height=60 }

    and got larger tab icons, but I expected them to be the same size as in Page’s rightBarItem (also specified 40) — they are not.

    This is unexpected! Is there an explanation?

    Here is a screengrab from mac os 10.9.5 running Qt 5.6 and Vplay 2.8.1

    https://www.dropbox.com/s/ali01gmgq1yov4y/tab1%20iconsizes.tiff?dl=0

     

    Main.qml

    import VPlayApps 1.0
    import QtQuick 2.0
    
    App {
    
        Navigation {
    
            // Comment to use a navigation drawer instead of tabs on Android
            navigationMode: navigationModeTabs
    
            NavigationItem {
                title: qsTr("First Page")
                icon: IconType.square
    
                NavigationStack {
                    FirstPage {}
                }
            }
    
            NavigationItem {
                title: qsTr("Second Page")
                icon: IconType.circle
    
                NavigationStack {
                    SecondPage {}
                }
            }
    
    
    
        }
        Component.onCompleted: {Theme.tabBar.height = 60; Theme.tabBar.iconSize = 40; }
    }
    

    FirstPage.qml

    import VPlayApps 1.0
    import QtQuick 2.0
    
    Page {
    
        title: qsTr("First")
        rightBarItem: NavigationBarRow {
    
                                      IconButtonBarItem {
                                          icon: IconType.square
                                          iconSize: 40
                                          onClicked: console.log("clicked")
                                      }
    
        }
    
        AppText {
            anchors.centerIn: parent
            text: qsTr("First Page")
        }
    
    }
    

     

    #13061

    Günther
    V-Play Team

    Hi Per!

    The difference is that the Theme settings refer to density independent pixels (dp), whereas the iconSize property of the IconButtonBarItem directly refers to the absolute width/height of the icon item.

    You should get the same sizes when using:

    IconButtonBarItem {
      icon: IconType.square
      iconSize: dp(40) // density independent size, 40dp on all devices
    }

    This is currently the default behavior for all components. (Properties contain absolute values, Theme settings refer to dp)

    Best,
    Günther

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

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support