Hi Alex,
I understand what you saying. But something is missing. I cant post a picture in here to show it. Let me explain in this; If I use
height: dp(app.Height * 0.04) in my app (4%) it looks like these;
W/H: 1440 x 2560 height looks 4 cm
W/H: 1080 x 2220 height looks 3 or 3.5 cm
I put 10 item. All the item height has different % but in total there % 100. In my first phone (W/H: 1440 x 2560) it covers like a full screen top to bottom. But in second phone (W/H: 1080 x 2220) all the item covers only 70% of the screen.
I know I have to calculate for each phone using resolution dpi, density, scale density or pixel ratio. And I know Felgo has dp() and sp() for these. but I cannot make it to work in both phone. I look google a lot and simply I couldn’t find anything.
I dont want to use 2 cm. I need to use like 4%. So it looks same different screen size mobile. but I dont know how to use the ratio staff so I can build my app for all screen size mobile. In https://felgo.com/doc/vplay-supporting-multiple-screens-and-screen-densities/ state that we can use % for Scalable Layout in Qt. Also states that;
This can be sufficient for most use cases. But for devices that have a more “square” aspect ratio, like the iPad with 1024×768 pixels (a 4:3 ratio), the elements will appear higher than for example on a 16:9 device. It gets even more extreme in a portrait resolution (most of the screen is covered with the header and footer not with the white content area).
So how to use % for Scalable Layout and calculate the ratio so my rectangle or item such as in my examples looks same.
Full examples that shows differently for both Galaxy s7 edge and S8 using % and no calculation for any ratio.
// TestMain.qml
App {
//licenseKey: "<generate one from https://felgo.com/licenseKey>"
id: app
onInitTheme: {
Theme.platform = "ios"
settings.language = "tr_TR"
uiScale: 1 // (1) for Mobiles and (2) for Desktops
Theme.colors.statusBarStyle = Theme.colors.statusBarStyleHidden
Theme.navigationBar.backgroundColor = "#386082"
Theme.navigationBar.height = dp(10)
Theme.navigationBar.titleTextSize = sp(6)
Theme.navigationBar.titleColor = "#ffffff"
CbStyle.appWidth = app.width
CbStyle.appHeight = app.height
// property var ntms: app.dpScale //dpiCoefficient()
}
// App Font
FontLoader {
id: normalFont
source: "../assets/fonts/Lato-Light.ttf"
}
// App BG
Image {
id: bgImage
anchors.fill: parent
source: "../assets/BgTemplate/1.jpg"
} // App Login BG
TestMainPage {
anchors.fill: parent
}
// Main Loader
Loader {
id: mainLoader
anchors.fill: parent
}
}
// TestMainPage.qml
Item {
id: mainBgPage
anchors.fill: parent
AppFlickable {
id: scroll
anchors.fill: parent
contentHeight: mainColumn.height
MouseArea {
anchors.fill: parent
onClicked: {
scroll.forceActiveFocus()
}
}
Item {
id: mainItem
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width
Column {
id: mainColumn
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(CbStyle.appHeight * 0.01)
// Header (* 0.15) *****************************************************
Item {
width: parent.width
height: dp(CbStyle.appHeight * 0.04) //* 0.15
//color: "#00000000"
// Background Rectangle for Header
Rectangle {
id: rectBGHeader
width: parent.width
height: dp(CbStyle.appHeight * 0.04) //* 0.15
color: "#000000"
opacity: 0.1
layer.enabled: true
layer.effect: DropShadow {
transparentBorder: true
spread: 0.0
radius: 8
samples: 17
color: "#000000"
horizontalOffset: 4
verticalOffset: 4
}
}
Text {
id: atmText
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: dp(5)
font.pixelSize: sp(12)
text: qsTr("ATM")
MouseArea {
anchors.fill: parent
onClicked: {
mainLoader.source = "mainui/AtmWidget.qml"
mainLoader.Top
console.debug("onClicked Loader Fired")
}
}
}
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.left: atmText.right
anchors.leftMargin: dp(10)
font.pixelSize: sp(12)
text: qsTr("ŞUBE")
MouseArea {
anchors.fill: parent
onClicked: {
mainLoader.source = "mainui/AtmWidget.qml"
mainLoader.Top
console.debug("onClicked Loader Fired")
}
}
}
Text {
id: timeLable
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: sp(14)
font.bold: CbStyle.headerFontBold
Timer {
running: true
interval: 1000 * 30
triggeredOnStart: true
repeat: true
onTriggered: {
timeLable.text = new Date().toLocaleTimeString(Qt.locale(), Locale.ShortFormat)
//timeLable.color = "#ffffff"
}
}
}
Text {
id: rusLabel
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: dp(5)
font.pixelSize: sp(12)
text: qsTr("RU")
MouseArea {
anchors.fill: parent
onClicked: {
nativeUtils.displayMessageBox(qsTr("Dil RU olarak değişti"), "", 1);
}
}
}
Text {
id: engLabel
anchors.verticalCenter: parent.verticalCenter
anchors.right: rusLabel.left
anchors.rightMargin: dp(10)
font.pixelSize: sp(12)
text: qsTr("EN")
MouseArea {
anchors.fill: parent
onClicked: {
nativeUtils.displayMessageBox(qsTr("Dil EN olarak değişti"), "", 1);
}
}
}
Text {
id: turLabel
anchors.verticalCenter: parent.verticalCenter
anchors.right: engLabel.left
anchors.rightMargin: dp(10)
font.pixelSize: sp(12)
text: qsTr("TR")
MouseArea {
anchors.fill: parent
onClicked: {
nativeUtils.displayMessageBox(qsTr("Dil TR olarak değişti"), "", 1);
}
}
}
}
// Header (* 0.15) *****************************************************
// Logo (* 0.3) ********************************************************
Item {
anchors.horizontalCenter: mainColumn.horizontalCenter
width: parent.width
height: dp(CbStyle.appHeight * 0.08)
//color: "#000000"
AppImage {
id: logoImage
width: dp(250)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: "../assets/LogoWhite.png"
layer.enabled: true
layer.effect: DropShadow {
transparentBorder: true
spread: 0.0
radius: 8
samples: 17
color: "#000000"
horizontalOffset: 4
verticalOffset: 4
}
}
}
// Logo (* 0.3) ********************************************************
// User Picture (* 0.3) ************************************************
Item {
anchors.horizontalCenter: mainColumn.horizontalCenter
width: dp(CbStyle.appHeight * 0.08)
height: width
//color: "green"
// UserImage nativeUtils
UserImage {
id: userImage
property string iconFontName: Theme.iconFont.name
width: dp(CbStyle.appHeight * 0.08)
height: width
//anchors.horizontalCenter: parent.horizontalCenter
placeholderImage: "\uf007"
source: ""
editable: true
editBackgroundColor: Theme.tintLightColor //.tintColor
property bool shownEditPhotoDialog: false
onEditClicked: {
if (system.desktopPlatform) {
nativeUtlis.displayImagePicker(qsTr("Choose Photo"))
}
else {
shownEditPhotoDialog = true
nativeUtils.displayAlertSheet("", [qsTr("Choose Photo"), qsTr("Take Photo"), qsTr("Reset Photo")], true)
}
}
Connections {
target: nativeUtils
onAlertSheetFinished: {
if (userImage.shownEditPhotoDialog) {
if (index == 0)
nativeUtils.displayImagePicker("Choose Photo")
else if (index == 1)
nativeUtils.displayCameraPicker()
else if (index == 2)
UserImage.source = ""
userImage.shownEditPhotoDialog = false
}
}
// Resim Seç
onImagePickerFinished: {
if(accepted)
userImage.source = Qt.resolvedUrl(path)
userImage.placeholderImage = ""
userImage.editable = false
}
// Resim Çek
onCameraPickerFinished: {
if(accepted)
userImage.source = Qt.resolvedUrl(path)
userImage.placeholderImage = ""
userImage.editable = false
}
} // Connections
} // UserImage
DropShadow {
anchors.fill: userImage
horizontalOffset: 1
verticalOffset: 1
radius: 10
samples: 17
color: "#ffffff"
source: userImage
}
}
// User Picture (* 0.3) ************************************************
// User Name (* 0.15) ****************************************************
Item {
width: parent.width
height: dp(CbStyle.appHeight * 0.04)
anchors.horizontalCenter: mainColumn.horizontalCenter
//color: "lightgreen"
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: sp(12)
font.bold: true
text: qsTr("User Name")
layer.enabled: true
layer.effect: DropShadow {
transparentBorder: true
horizontalOffset: 1
verticalOffset: 1
radius: 10
samples: 17
color: "#ffffff"
}
}
}
// User Name (* 0.15) ****************************************************
// Login Button (* 0.15) ************************************************
Item {
width: parent.width
height: dp(CbStyle.appHeight * 0.04)
//color: "lightgreen"
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing:dp(CbStyle.appHeight * 0.03)
Rectangle {
width: dp(90)
height: dp(CbStyle.appHeight * 0.04)
radius: 10
color: "#8aaa25"
border.color: "darkgreen"
Text {
id: PersonalLogin
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "#000000"
font.bold: true
font.pixelSize: sp(12)
text: qsTr("Personal")
MouseArea {
anchors.fill: parent
onClicked: {
nativeUtils.displayMessageBox(qsTr("Personal Sayfasına Gidiyor"), "", 1);
}
}
}
}
Rectangle {
id: rectPersonal
width: dp(90)
height: dp(CbStyle.appHeight * 0.04)
radius: 10
color: "#8aaa25"
border.color: "darkgreen"
Text {
id: CooperateLogin
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "#000000"
font.bold: true
font.pixelSize: sp(12)
text: qsTr("Cooperate")
MouseArea {
anchors.fill: parent
onClicked: {
nativeUtils.displayMessageBox(qsTr("Cooperate Sayfasına Gidiyor"), "", 1);
}
onPressed: {
}
}
}
}
}
}
// Login Button (* 0.15) ************************************************
// Forgot Password (* 0.15) *********************************************
Item {
anchors.horizontalCenter: mainColumn.horizontalCenter
width: dp(120)
height: dp(CbStyle.appHeight * 0.04)
//color: "red"
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: sp(12)
color: "white"
text: qsTr("Lost Password")
MouseArea {
anchors.fill: parent
onClicked: {
nativeUtils.displayMessageBox(qsTr("Lost Password Sayfasına Gidiyor"), "", 1);
}
}
}
}
// Forgot Password (* 0.15) *********************************************
// Döviz (* 0.57) *******************************************************
Rectangle {
anchors.horizontalCenter: mainColumn.horizontalCenter
width: parent.width - dp(20)
height: dp(CbStyle.appHeight * 0.10)
color: "#00000000"
border.color: "yellow"
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: sp(12)
text: "Currency"
}
}
// Döviz (* 0.57) *******************************************************
// Weather (* 0.93) ****************************************************
Rectangle {
anchors.horizontalCenter: mainColumn.horizontalCenter
width: parent.width - dp(20)
height: dp(CbStyle.appHeight * 0.20)
color: "#00000000"
border.color: "orange"
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: sp(12)
text: "Weather"
}
}
// Weather (* 0.93) ****************************************************
// Copyright (* 0.08) **************************************************
Item {
anchors.horizontalCenter: mainColumn.horizontalCenter
width: parent.width
height: dp(CbStyle.appHeight * 0.01)
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: sp(7)
text: "Copyright © 2012-2018 NTMS"
}
}
// Copyright (* 0.08) **************************************************
} // Column
} // Item
} // AppFlickable
} // main Page
// CbStyle.qml
pragma Singleton
import QtQuick 2.10
QtObject {
// app scale
property real appWidth: 0
property real appHeight: 0
}