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"
}
ご覧のとおり、ユーザーが方向を変更した場合にリスナーを作成しています。このリスナーで、レイアウトの一部のコンポーネントのクラスを変更します。しかし、これは機能しません。
どうすれば問題を解決できますか、またはデバイスの向きに基づいて異なるクラスを自動設定するモードがありますか?