0

Alloy フレームワークを使用して appcelerator studio でアプリを構築しています。

だから私はレイアウトを垂直方向と水平方向に構築したいと考えています。

これは私の最初のビューのコードです:

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"
}

ご覧のとおり、ユーザーが方向を変更した場合にリスナーを作成しています。このリスナーで、レイアウトの一部のコンポーネントのクラスを変更します。しかし、これは機能しません。

どうすれば問題を解決できますか、またはデバイスの向きに基づいて異なるクラスを自動設定するモードがありますか?

4

1 に答える 1

0

まさにあなたが望むことを行う動的 TSS ウィジェットがあります。プロジェクトにインストールし、指示に従います。ここで見つけることができます: https://github.com/jasonkneen/com.jasonkneen.dynamicTSS

レイ

于 2016-11-03T22:25:45.017 に答える