Question

我正在使用Alloy框架在Appcelerator工作室构建应用程序。

所以我想将布局构建为垂直和水平方向。

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

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

雷

如何在appcelerator中使用动态样式？

1 个答案: