[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?

[GüntherFelgo Team]

Hi Per!

Felgo 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

[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 Felgo 3.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 Felgo 3.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")
    }

}

 

[GüntherFelgo 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