如何在appaccelerator中使用动态样式

Question

我正在用Alloy框架构建一个应用程序。

我想把布局设置为垂直和水平方向

现在这是我的第一个视图的代码:

login.xml

    <View class="container">
        <View id="logoDecipherImage" class="images"></View> 
        <Label id="loginLable"
            class="loginLable">Accedi</Label>
        <View id="viewText" layout="vertical" height="Ti.UI.SIZE">
            <TextField id="username" class="textLogin" hintText="Insert username"></TextField>
            <TextField id="password" class="textLogin" hintText="Insert password" 
            passwordMask="true"></TextField>
        </View>

        <View  id="buttons_container" >
            <!--<Button id="changeLanguageButton" class="buttonLanguage"
                onClick="languageListener" >Lingua</Button>-->
            <Button id="loginButton" class="buttonLogin">Login</Button>
            <Button id="emergencyButton" class="buttonEmergency">Emergency</Button>
        </View> <!-- end buttons_container -->
    </View>
</Alloy>

这是控制器login.js

var args = $.args;
var lang = Alloy.Globals.LANG;
//setto il testo della schermata di login
$.loginLable.text=Titanium.Locale.getString(lang+"login_title");
$.loginButton.text=Titanium.Locale.getString(lang+"login_title");
//$.changeLanguageButton.title= Titanium.Locale.getString(lang + "language");
// 
function loginListener(e){
};
function emergencyListener(e){
};


Ti.Gesture.addEventListener('orientationchange', function(e) {
    if(e.source.isPortrait()){
        //verticale
        Titanium.API.info('Orientation changed: vertical');
        //REMOVE CLASS
        $.removeClass($.logoDecipherImage, 'images-horizontal');
        $.removeClass($.username, '.textLogin-horizontal');
        $.removeClass($.password, '.textLogin-horizontal');
        //ADD CLASS
        $.addClass($.logoDecipherImage, 'images');
        $.addClass($.username, '.textLogin');
        $.addClass($.password, '.textLogin');
        $.viewText.layout="vertical";
    }else if (e.source.isLandscape()){
        //orizzontale
        Titanium.API.info('Orientation changed: horizontal');
        //REMOVE CLASS
        $.removeClass($.logoDecipherImage, 'images');
        $.removeClass($.username, '.textLogin');
        $.removeClass($.password, '.textLogin');
        //ADD CLASS
        $.addClass($.logoDecipherImage, 'images-horizontal');
        $.addClass($.username, '.textLogin-horizontal');
        $.addClass($.password, '.textLogin-horizontal');
        $.viewText.layout="horizontal";
    }
});

这是tss文件login.tss:

".container" : {
    backgroundColor: "#666",
    width : '98%',
    height : '85%',
    layout : "vertical",
    borderRadius : 40,
    borderWidth : 2,
    borderColor: "#fff",
}
".images":{
    top:"5px",
    backgroundImage : "/images/logo.png",
    width : "90%",
    height: "62px"
}
".images-horizontal":{
    top:"5px",
    backgroundImage : "/images/logo.png",
    width : "60%",
    height: "55px"
}

".loginLable":{
    color : "#B3B3B3",
    textAlign : "center",
    width: '340px',
    font : {
        fontSize : "20pt",
        fontWeight : "Italic"
    }
}
".textLogin":{
    top : 20,
    height : "12%",
    backgroundColor : "#c9c9c9",
    borderRadius : 10,
    borderWidth : 1,
    borderColor : "#fff",
    color : "#fff",
    width: '90%',
    font : {
            fontFamily : 'Roboto-Regular',
            fontSize : "14pt",
            fontWeight : "Regular"
    }, 
    paddingLeft : 10
}
".textLogin-horizontal":{
    top : 20,
    height : "15%",
    backgroundColor : "#c9c9c9",
    borderRadius : 10,
    borderWidth : 1,
    borderColor : "#fff",
    color : "#fff",
    width: '40%',
    font : {
            fontFamily : 'Roboto-Regular',
            fontSize : "14pt",
            fontWeight : "Regular"
    }, 
    paddingLeft : 10
}

"#buttons_container": {
    top: 80,
    width: 340,
    height: 60,
}

".buttonLogin":{
    left: 0,
    width: 160,
    height : 60,
    backgroundColor : "#29ABE2",
    borderRadius : 10,
    borderColor: "#fff" 
}
".buttonEmergency":{
    right: 0,
    width: 160,
    height : 60,
    backgroundColor : "#29ABE2",
    borderRadius : 10,
    borderColor: "#fff"
}

现在你可以看到，如果用户改变方向，我将构建一个监听器。在这个侦听器中，我更改了布局中某些组件的类。但这行不通。

我如何解决我的问题，或者有一个模式来自动设置不同的类基于设备的方向?

Answer 1

有一个动态TSS小部件可以完全满足您的需求。安装到您的项目中并按照说明操作。你可以在这里找到:https://github.com/jasonkneen/com.jasonkneen.dynamicTSS

雷