3

在根据当前设备屏幕宽度和高度设置子元素的高度和宽度后创建布局,如您所见的代码片段,它根据每个子元素的屏幕尺寸计算宽度和高度。如果不使用“%”或“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);
4

1 回答 1

4

在合金中,您最好使用 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)
    }
}
于 2014-01-23T18:19:39.093 回答