titanium-mobile - 如何在钛合金中创建与屏幕尺寸无关的 UI

Question

根据当前设备屏幕宽度和高度设置子元素的高度和宽度后创建的布局，如您所见，代码片段根据屏幕尺寸为每个子元素计算宽度和高度。如果不使用“%”或“dp”，如何使用 Xml 标记在合金项目中创建相同或相似的设置

function Cal_width(size) {

    var width;
    try {

        width = size * Titanium.Platform.displayCaps.platformWidth / 100;
    } catch(e) {
        warn("Error accessing display caps for screen density calculation: " + e);
    }

    return width;
}

function Cal_height(size) {

    var height;
    try {

        height = size * Titanium.Platform.displayCaps.platformHeight / 100;
    } catch(e) {
        warn("Error accessing display caps for screen density calculation: " + e);
    }

    return height;
}

const topOffset = Cal_height(1);

const topOffset_label = Cal_height(5);
//const leftOffsetLabel = Cal_width(30);
const leftOffset = Cal_width(5);
const rightOffset = Cal_width(5);
const textFieldHeight = Cal_height(8);

const textFieldWidth = Cal_width(90);
const txtFieldEmailTopOffset = Cal_height(5);
const btnLogin_width = Cal_width(90);
const btnHeight = Cal_height(10);
const topOffsetCreateBtn = Cal_height(6);

const btnCreate_Width = Cal_width(100);
const font_Size = Cal_height(3);
const logo_height = Cal_height(10);
const logo_width = Cal_width(80);
const logoTopOffSet = Cal_height(5);

const leftForgotPswd = Cal_width(40);
// specify visual assets' heights



var win = Titanium.UI.createView({
    layout : 'vertical'
});


var applogo = Titanium.UI.createLabel({
    width : logo_width,
    top : logoTopOffSet,
    height : logo_height,
    backgroundImage : 'android/_logo.png'
});
win.add(applogo);
 //create label to show error in email textfield
var lbemail_error = Titanium.UI.createLabel({

    top : topOffset_label,
    color : 'red',
     textAlign:'center',
    font : {
        fontFamily : 'Arial',
        fontSize : Cal_height(3)
    }
});
win.add(lbemail_error);
//create textfield for email input and set its position with respect the screen
var tfemailInput = Titanium.UI.createTextField({

    top : Cal_height(5),
    left : leftOffset,
    right : rightOffset,
    width : textFieldWidth,
    height : textFieldHeight,
    hintText : 'Email',
    keyboardType : Titanium.UI.KEYBOARD_EMAIL,
    returnKeyType : Titanium.UI.RETURNKEY_NEXT,
    borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
    font : {
        fontFamily : 'Arial',
        fontSize : font_Size
    }

});
win.add(tfemailInput);

Answer 1

在 alloy 中，您最好使用 tss 文件来设置样式，而不是将所有内容都放入 XML 属性中。 Alloy的tss文件可以访问Alloy.CFG中的变量，你可以自己定义。所以你可以这样做:

合金.js

Alloy.CFG.Cal_width = function (size) { /* your code here*/ };
Alloy.CFG.Cal_height = function (size) { /* your code here*/ };
Alloy.CFG.topOffset_label = Alloy.CFG.Cal_height(5)

屏幕.xml

<Label id="lbemail_error"></Label>

屏幕.tss

"#lbemail_error": {
    top : Alloy.CFG.topOffset_label,
    color : 'red',
    textAlign:'center',
    font : {
        fontFamily : 'Arial',
        fontSize : Alloy.CFG.Cal_height(3)
    }
}