如何使用 Appcelerator 为智能手机和平板电脑创建布局答案

【问题标题】：How to create layout for smartphone and tablet with Appcelerator如何使用 Appcelerator 为智能手机和平板电脑创建布局
【发布时间】：2016-11-02 15:27:23
【问题描述】：

我正在使用 Appcelerator Studio 为 Android 构建一个应用程序。我只使用过 Android 平板电脑，但现在，我也应该使用智能手机。如果我尝试打开应用程序，布局不正确，布局对于智能手机的屏幕来说太大了。

现在，有办法调整平板电脑和智能手机的布局吗？

例如，这是我的登录框：

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

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

【问题讨论】：

标签： android appcelerator appcelerator-titanium appcelerator-alloy

【解决方案1】：

您应该检查一下。您可以使用的提供者指南。 http://www.appcelerator.com/blog/2014/02/understanding-titanium-views/

【讨论】：

【解决方案2】：

您可以在 login.tss 中的样式中使用设备尺寸特定条件。例如：

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

或 login.xml 中的特殊条件属性

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

【讨论】：