QML and font sizes when designing for multiple screen sizes (Android)



  • I'm having my first go at developing an App for android. What I do is design each button, bar, text so that the width and height is a percentage of the main window width and height. This way, I make sure that the proportions will look right in any given screen. My problem is the font. My question is: How can I compute the font size for, say, my buttons so that text won't be too small or too large in any given screen?

    This is what I've tried.

    My best result was to compute the font size for each button like this:

    import QtQuick 2.10
    import QtQuick.Controls 2.1
    import QtQuick.Controls.Material 2.1
    
    ApplicationWindow {
    
        id: mainW
        visible: true
        width: 1000
        height: 500
        title: qsTr("Hello World")
    
        Column{
            anchors.centerIn: parent
            spacing: 0.05*parent.height
    
            Button {
                id: btn1
                font.family: "Robotto"
                width: 0.8*mainW.width
                height: 0.1*mainW.height
                text: "TEXT1"
                font.pixelSize: 0.8*height
                anchors.horizontalCenter: parent.horizontalCenter
            }
    
            Button {
                id: btn2
                font.family: "Robotto"
                width: 0.8*mainW.width
                height: 0.1*mainW.height
                text: "A"
                font.pixelSize: 0.8*height
                anchors.horizontalCenter: parent.horizontalCenter
            }
    
            Button {
                id: btn3
                font.family: "Robotto"
                width: 0.8*mainW.width
                height: 0.2*mainW.height
                //text: "A really really, but very really long text with lots of stuff"
                text: "Another button"
                font.pixelSize: getTextSize(btn3,btn3.text)
                anchors.horizontalCenter: parent.horizontalCenter
            }
    
        }
    
    
        FontMetrics {
            id: metrics
            font.family: "Robotto"
        }
    
        function getTextSize(element,text){
            metrics.font.pixelSize = 0.8*element.height;
            var brect = metrics.boundingRect(text);
            if (brect.width > element.width*0.8){
                var k = element.width*0.8/brect.width
                return Math.floor(metrics.font.pixelSize*k);
            }
            else return metrics.font.pixelSize;
        }
    }
    

    Now, this works perfectly (it gives a warning, but I allready have an idea on how to fix it), but in a real life application I'm afraid of have like an OK and CANCEL button and they will be shown with different font sizes.

    My second approach was something like this:

    FontMetrics{
            id: metrics
            font.family: "Roboto"
        }
    
        function getTextSize(w,h,nchars){
            var temp = w;
            w = h;
            h = temp;
            metrics.font.pixelSize = 0.8*h;        
            var text = "";
            for (var i = 0; i < nchars; i++)
                text = text + "B";
            var ncharsw = metrics.boundingRect(text).width;
            console.log("W " + w + " H " + h + " ncharsw " + ncharsw);
            if (ncharsw > w*0.8){
                var k = w*0.8/ncharsw
                return Math.floor(metrics.font.pixelSize*k);
            }
            else return metrics.font.pixelSize;
        }
    

    The function above is called like this:

    fhButttonTextSize = getTextSize(0.8*mainWindow.width,0.1*mainWindow.height,20);
    

    The result is actually a property which is set to the pixelSize attribute of the text of all my buttons. My idea was to figure the common font denominator and set that size for all text buttons.

    However, it worked on one of my screens (PC) but when I ran it in my phone a 12 letter word was longer than the button.

    So what is the right approach?

    Also, another question. If I don't set font sizes at all, how does Qt and QML select the font size?

    I'd appreciate any help on the matter.




Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.