0
私は合金のフレームワークを持つappceleratorスタジオでアプリケーションを構築しています。appceleratorで動的スタイルを使用するにはどうすればよいですか？
私はレイアウトを垂直方向と水平方向に構築したいと考えています。
さて、これは私の最初のビューのコードです：
<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.xmlが、これはこれは、TSSファイルのログインでコントローラ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：
".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"
}
ご覧のとおり、ユーザーが向きを変更すると、リスナーが作成されます。このリスナーでは、レイアウトの一部のクラスを変更します。しかし、これは動作しません。
問題を解決するにはどうすればよいですか、デバイスの向きに基づいて異なるクラスを自動的に設定するモードがありますか？