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

在合金中，理想情况下使用tss文件进行样式设计，而不是将所有内容都放入XML属性中。 Alloy的tss文件可以访问Alloy.CFG中的变量，您可以定义它们。所以你可以这样做：

<强> alloy.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)

<强> screen.xml

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

<强> screen.tss

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

如何在钛合金中创建独立于屏幕的UI

1 个答案: