Unsolved 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.
-
@aarelovich hi,
have a look at this http://doc.qt.io/qt-5/scalability.html#calculating-scaling-ratio