Wenn wir über skalierbare Schnittstellen sprechen, dh skalierbare Schnittstellen bei der Entwicklung von Anwendungen auf Qt, dann besteht das Hauptproblem darin, dass es notwendig ist, eine Schnittstelle zu erstellen, die auf absolut allen Bildschirmen lesbar ist, sei es ein Computerbildschirm oder ein Smartphone-Bildschirm.
GUI-Parameter wie Breite und Höhe werden in Qt in Pixeln angegeben, aber bei gleicher Bildschirmauflösung auf einem Computer und auf einem Smartphone (z. B. 1366 x 768 Pixel) wird das Ergebnis völlig unterschiedlich sein. Auf einem Computer ist eine Schaltfläche mit 40 x 60 Pixel bequem, ich würde sogar sagen, groß, aber auf einem Smartphone-Bildschirm wird es schwierig sein, sie mit dem Finger zu treffen.
Daher ist es bei der Entwicklung der Schnittstelle einer Anwendung für viele Plattformen und Bildschirme notwendig, das Problem der Schnittstellenskalierbarkeit irgendwie zu lösen.
Skalierbare Schnittstelle
Die grundlegende Entscheidung, wie eine skalierbare Schnittstelle erstellt wird, besteht darin, die Größe der Elemente in Abhängigkeit von der Pixeldichte pro mm oder Zoll zu bestimmen.
dpi - Anzahl der Pixel pro Zoll. Dieses Merkmal wird viel häufiger verwendet als die Anzahl der Pixel pro mm. Mit dieser Eigenschaft können Sie die Pixel, die in einer Schaltfläche 1 mal 2 Zentimeter groß sein werden, neu berechnen und so eine Anwendungsoberfläche erstellen, die auf absolut allen Geräten, für die Sie entwickeln werden, gleich aussieht. Unabhängig von der Größe des Anwendungsbildschirms.
Nach der Neuberechnung der Pixel erhalten Sie einen abstrakten Wert, der aufgerufen wird:
dip oder dp - Dichteunabhängige Pixel . Dichteunabhängiges Pixel. Dadurch können Sie die Anwendungsschnittstelle schreiben, ohne darüber nachzudenken, wie viele Pixel die Breite und Höhe des Bildschirms auf einem Smartphone oder Tablet haben.
Entwicklung einer skalierbaren Schnittstelle für Android
Wie Sie wissen, gibt es viele Android -Geräte und alle haben unterschiedliche Bildschirmauflösungen, daher gibt Google die folgende Empfehlung für die Entwicklung einer skalierbaren Benutzeroberfläche:
- Interface muss basierend auf dip erstellt werden (Pixeldichte unabhängig)
- Wenden Sie im Allgemeinen die folgende Formel an, um die Neigung in die Anzahl der Pixel umzuwandeln:
px = dp * (dpi / 160)
Diese Formel übersetzt das Verhältnis der Pixeldichte des Zielgeräts zur Pixeldichte des Geräts mit einem Bildschirm von mdpi , d. h. mittlere dpi . Die Formel funktioniert auch hervorragend für 5-Zoll-Full-HD-Bildschirme.
Wenn wir speziell von Qt, sprechen, dann ist in diesem Fall zu beachten, dass Qt es nicht ermöglicht, Schnittstellenparameter sofort in dip. dip zu setzen. Das heißt, verwenden Sie die obige Formel.
Beim Entwickeln einer skalierbaren Schnittstelle in Qt Qml können Sie ein separates Objekt verwenden, das Ihre Dip-Pixel nimmt und ihr Äquivalent in physischen Bildschirmpixeln zurückgibt, wie im folgenden Code.
Die Funktion pixelDenstity gibt die Dichte von Pixeln pro mm zurück, also multiplizieren wir den resultierenden Wert mit 25,4 , um ihn in Zoll umzuwandeln. Und dann gibt die Funktion dieses Objekts, das Dip-Pixel empfängt, die bereits skalierte Anzahl physischer Pixel auf dem Bildschirm des Zielgeräts zurück. Gleichzeitig habe ich eine Überprüfung auf eine Pixeldichte kleiner als 120 dpi hinzugefügt. Dies ist für normale Desktops wie meinen 15,6-Zoll-Laptop mit einer Auflösung von 1366 x 768 erforderlich. In diesem Fall beträgt die Dichte 72 dpi . Und wenn dieser Wert noch durch 160 dividiert wird, fällt die Oberfläche sehr klein aus, was für einen Desktop-PC ebenfalls nicht akzeptabel ist. Daher wird dip für Desktops nicht in px übersetzt. dip entspricht in diesem Fall px.**
import QtQuick 2.0
import QtQuick.Window 2.0
Item {
property int dpi: Screen.pixelDensity * 25.4
function dp(x){
if(dpi < 120) {
return x; // Для обычного монитора компьютера
} else {
return x*(dpi/160);
}
}
}
Zusammenfassung. Skalierbare Schnittstelle
Als Ergebnis der Funktion dieses Objekts gelang es mir, das folgende Bild der Anwendung zu erhalten, die auf dem Bildschirm eines Meizu m1 Note-Smartphones mit Full-HD-Bildschirm auf einem 5,5-Zoll- und auf einem 15,6-Zoll-Laptop-Bildschirm entwickelt wird
