Question

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

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

例如，这是我的登录框：

login.xml Accedi

$.getJSON('Scripts/Nodes/plugins.json',
                function (data) {
                    for (var script in data) {
                        $.getScript(script, function (data) {

                        });
                    }
                });

login.tss

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

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为智能手机和平板电脑创建布局

2 个答案: