1

私は appcelerator でアプリを構築しています。デバイスが横向きモードまたは縦向きモードの場合、レイアウトを自動調整したいと考えています。そのため、調査の後、動的TSSを実装するためにプラグイン「com.jasonkneen.dynamicTSS」をダウンロードしました。

これは私のコードです:

<View class="container">
        <View id="logoImage" class="images"></View> 
        <Widget src="com.jasonkneen.dynamicTSS"/>

        <Label id="loginLable"
            class="loginLable">Accedi</Label>

        <View id="viewText" class="viewTextLogin">
            <TextField id="username" class="textLogin" hintText="Insert username"></TextField>
            <Widget src="com.jasonkneen.dynamicTSS"/>
            <TextField id="password" class="textLogin" hintText="Insert password" 
            passwordMask="true"></TextField>
            <Widget src="com.jasonkneen.dynamicTSS"/>
        </View>
</View>

これは私の login.tss ファイルです

".images":{
    top:"5px",
    backgroundImage : "/images/logo.png",
    landscape: {        
        width : "60%",
        height: "55px"
    },
    portrait: {     
        width : "90%",
        height: "62px"
    }
}

    ".textLogin":{
        top : 20,   
        backgroundColor : "#c9c9c9",
        borderRadius : 10,
        borderWidth : 1,
        borderColor : "#fff",
        color : "#fff", 
        font : {
                fontFamily : 'Roboto-Regular',
                fontSize : "14pt",
                fontWeight : "Regular"
        }, 
        paddingLeft : 10,
        landscape: {        
           height : "30%",
           width: '10%',
        },
        portrait: {     
           height : "12%",
           width: '90%',
        }
    }

    ".viewTextLogin":{
        height:Ti.UI.Fill,
        landscape: {        
           layout:"horizontal"
        },
        portrait: {     
           layout:"vertical"
        }
    }

デバイスの向きを変更しようとすると、オブジェクト「logoImage」が正しく表示されるようになりました。しかし、デバイスが縦向きモードの場合、ビュー「viewText」を見ると、次のことがわかります。

ここに画像の説明を入力

デバイスを横向きモードにすると、次のことがわかります。

ここに画像の説明を入力

どうすれば問題を解決できますか?

4

0 に答える 0