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

Question

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

现在，有一种方法可以适应平板电脑和智能手机的布局吗？

例如，这是我的登录框：

login.xml 加入

        <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

你应该看看这个。您可以使用的提供商指南。 http://www.appcelerator.com/blog/2014/02/understanding-titanium-views/

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

您可以在此处找到更多详细信息： http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_XML_Markup-section-46248608_AlloyXMLMarkup-ConditionalCode

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

How to create layout for smartphone and tablet with Appcelerator

android

appcelerator

appcelerator-titanium

appcelerator-alloy