So erstellen Sie ein Layout für Smartphone und Tablet mit Appcelerator

Question

Ich baue eine Anwendung mit Appcelerator Studio auf Android. Ich habe nur Android Tablet benutzt aber jetzt sollte ich auch ein Smartphone benutzen. Wenn ich versuche, die Anwendung zu öffnen, ist das Layout nicht korrekt, das Layout ist zu groß für den Bildschirm des Smartphones.

Jetzt gibt es eine Möglichkeit, das Layout für Tablet und Smartphone anzupassen?

Zum Beispiel, das ist mein Login-Box:

login.xml Accedi

 <TextField id="username" class="textLogin" hintText="Insert username"></TextField> 
     <TextField id="password" class="textLogin" hintText="Insert password" 
      passwordMask="true"></TextField> 


     <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.tss

".container" : { 
    backgroundColor: "#666", 
    width : 600, 
    height : 500, 
    layout : "vertical", 
    borderRadius : 40, 
    borderWidth : 2, 
    // borderColor : "#E6E6E6", 
    borderColor: "#fff", 
} 

".images":{ 
    top: 20, 
    // left: "161px", 
    backgroundImage : "/images/logo_decipher.png", 
    width : "402px", 
    height: "62px", 
    // height : "80px" 
} 

".loginLable":{ 
    top : 20, 
    color : "#B3B3B3", 
    textAlign : "center", 
    width: '340px', 
    font : { 
     fontSize : "20pt", 
     fontWeight : "Italic" 
    } 
} 

".textLogin":{ 
    top : 20, 
    height : "60px", 
    backgroundColor : "#c9c9c9", 
    borderRadius : 10, 
    borderWidth : 1, 
    borderColor : "#fff", 
    color : "#fff", 
    width: '340px', 
    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

du heraus überprüfen sollten. Anbieterrichtlinien, die Sie verwenden können. http://www.appcelerator.com/blog/2014/02/understanding-titanium-views/

Answer 2

Sie können gerätespezifische Bedingungen in Ihren Styles in login.tss verwenden. Zum Beispiel:

".container[formFactor=tablet]" : { 
    width : 800, 
    height : 600 
}, 
".container[formFactor=handheld]" : { 
    width : 600, 
    height : 400 
} 

oder speziellen Zustand in Ihrem login.xml Attribute

<View id="main" width="600" layout="vertical" formFactor="handheld"> 
... 
</View> 
<View id="main" width="1024" layout="horizontal" formFactor="tablet"> 
... 
</View> 

können Sie weitere Informationen finden Sie hier: http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_XML_Markup-section-46248608_AlloyXMLMarkup-ConditionalCode