Re: [Interest] Managing phone and tablet versions of the same application

[Jason H]

 

I created a function to handle per-fixel scaling.  This works in the few areas that I need a fixed-pixel size element (i.e. borders). Everything else is laid out in proportion via percentages (i.e parent.width *0.33)

If you need more than that, there is a file selector prefix you can use qith QML. I can't find the documentation, but I think that "platform+component.qml" (i.e. "android+navbar.qml", "ios+navbar.qml") 

 

 

 

Sent: Tuesday, May 26, 2015 at 11:36 AM
From: "Nuno Santos" <nunosan...@imaginando.pt>
To: "Interests Qt" <interest@qt-project.org>
Subject: [Interest] Managing phone and tablet versions of the same application

Hi,

 

I got to the point in which I need to have two different styles depending on the running device: phone or tablet. 

 

What is the best way to handle this? I’m doing it in a way that doesn’t seem the cleanest approach:

 

First, on my main Qml file I calculate the screen size and a scaling factor:

 

onWidthChanged: deviceScreenSize()

onHeightChanged: deviceScreenSize()

 

function deviceScreenSize()

{

    var size = Math.round(Math.sqrt(width*width+height*height)/Screen.pixelDensity/25.4)

 

    var screenSizeMin

    var screenSizeMax

    var scaleFactorMin

    var scaleFactorMax

 

    if (size>=7)

    {

        screenSizeMin=7

        screenSizeMax=12.2

        scaleFactorMin=0.75

        scaleFactorMax=1.25

        deviceType=Controller.Tablet

    }

    else

    {

        screenSizeMin=4

        screenSizeMax=7

        scaleFactorMin=0.75

        scaleFactorMax=1.25

        deviceType=Controller.Phone

    }

 

    scaleFactor = scaleFactorMin+((size-screenSizeMin)/(screenSizeMax-screenSizeMin))*(scaleFactorMax-scaleFactorMin)

}

 

function mmToPx(measure)

{

    return Math.round(Screen.pixelDensity)*measure*scaleFactor

}

 

Then, across my whole code, for each property that matter I check if deviceType is tablet or phone and I give the respective measure depending on it.

 

Example: 

 

Image {

    id: menuIconImage

    anchors.fill: parent

    anchors.margins: window.deviceType?window.mmToPx(2):window.mmToPx(1)

    source: "qrc:/images/icon_menu.png"

}

 

I think this will be hard to maintain in no time. A quick google for “Qml styling” showed me this:

 

https://wiki.qt.io/QmlStyling

 

Is this still valid? Is there any more recent resource for styling?

 

Can someone share it’s own approaches to this problem?

 

Thanks,

 

Regards,

 

Nuno

 

Nuno Santos
Founder / CEO / CTO
www.imaginando.pt

+351 91 621 69 62

_______________________________________________ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest

_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest