代码之家 › 专栏 › 技术社区 › guillefix

如何对齐Ti。用户界面。工具栏项?(Android Appcelerator)

appcelerator titanium android

guillefix · 技术社区 · 8 年前

我在Android应用程序上使用底部工具栏,但我不知道如何使其项目具有相同的宽度,所以它们是对齐的。我的工具栏是这样的(所有项目都在左边,没有分隔):

这就是我想要实现的目标(项目分开并居中):

我尝试将每个项目/视图的宽度设置为“33%”,但这不起作用。

我正在使用Titanium SDK 6.2.2 GA。请参阅下面的代码:

Alloy xml:

<Toolbar width="Ti.UI.FILL" bottom="0" barColor="#639851" horizontalWrap="false">
    <Items> 
        <View id="addView" class="bottomBtn" onClick="addDirection">
            <ImageView class="icons" image="/icons/add.png" touchEnabled="false" />
            <Label class="label" text="Add" touchEnabled="false" />
        </View>

        <View id="mapView" class="bottomBtn" onClick="showMap">
            <ImageView class="icons" image="/icons/map.png" touchEnabled="false" />
            <Label class="label" text="See map" touchEnabled="false" />
        </View>

        <View id="routeView" class="bottomBtn" onClick="calculateRoute">
            <ImageView class="icons" image="/icons/optimize.png" touchEnabled="false" />
            <Label class="label" text="Calculate" touchEnabled="false" />
        </View>

    </Items>
</Toolbar>

".label" : {
    color: "#212121"
}

".icons" : {
    width: "24dp",
    height: "24dp"
}

".bottomBtn" : {
    layout: 'vertical',
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    backgroundColor: "#639851", 
    touchFeedback: true,
    touchFeedbackColor: "#808080"
}

2 回复 | 直到 8 年前

Prashant Saini 8 年前

FIXED SPACING 或 FLEX SPACING

在Android上,我相信设置一个固定的宽度,比如200dp或100dp等,都会奏效。

合金js公司

var df = Ti.Platform.displayCaps.logicalDensityFactor;
var w = Ti.Platform.displayCaps.platformWidth / df;
var h = Ti.Platform.displayCaps.platformHeight / df;

var deviceWidth = Math.min(w, h);

// it will give you 1/3rd width in dp
Alloy.Globals.itemWidth = deviceWidth/3;

指数xml

<Alloy>
    <Window backgroundColor="#eaeaea">
        <Toolbar id="bar" width="Ti.UI.FILL" bottom="0" barColor="#639851">
            <Items>
                <View id="addView" class="bottomBtn" backgroundColor="red">
                    <ImageView class="icons" image="/icons/add.png"  />
                    <Label class="label" text="Add"  />
                </View>

                <View id="mapView" class="bottomBtn" backgroundColor="yellow">
                    <ImageView class="icons" image="/icons/map.png"  />
                    <Label class="label" text="See map"  />
                </View>

                <View id="routeView" class="bottomBtn" backgroundColor="blue">
                    <ImageView class="icons" image="/icons/optimize.png"  />
                    <Label class="label" text="Calculate" />
                </View>
            </Items>
        </Toolbar>
   </Window>
</Alloy>

".label" : {
    color: "#212121",
    touchEnabled: false,
    width: Ti.UI.SIZE
}

".icons" : {
    width: 24,
    height: 24,
    touchEnabled: false
}

".bottomBtn" : {
    left : 0,
    layout: 'vertical',
    width: Alloy.Globals.itemWidth,
    height: Ti.UI.SIZE,
    backgroundColor: "#639851",
    touchFeedback: true,
    touchFeedbackColor: "#808080"
}

指数js公司

$.bar.setContentInsetsAbsolute(0,0);

nebu 8 年前

目前在Android上,我建议采用这种解决方法——将视图放在单个视图中,作为工具栏的一个项目传递。请尝试以下操作:

指数xml

<Alloy>
    <Window>
        <!-- Add id for the toolbar to be accessed from index.js-->
        <Toolbar width="Ti.UI.FILL" bottom="0" barColor="#639851" id="bar">
            <Items>
                <!-- Add the view that acts as a container--> 
                <View class="wrapper">
                    <!-- Set a relative offset on the left since system buttons are not with exactly one third width-->
                    <View left="8%" id="addView" class="bottomBtn">
                        <ImageView class="icons" image="/images/git.png" touchEnabled="false" />
                        <Label class="label" text="Add" touchEnabled="false" />
                    </View>

                    <View id="mapView" class="bottomBtn">
                        <ImageView class="icons" image="/images/git.png" touchEnabled="false" />
                        <Label class="label" text="See map" touchEnabled="false" />
                    </View>
                    <!-- Set a relative offset on the right since system buttons are not with exactly one third width-->    
                    <View right="8%" id="routeView" class="bottomBtn">
                        <ImageView class="icons" image="/images/git.png" touchEnabled="false" />
                        <Label class="label" text="Calculate" touchEnabled="false" />
                    </View>
                </View>
            </Items>
        </Toolbar>
    </Window>
</Alloy>

在中添加以下行 指数js公司

$.bar.setContentInsetsAbsolute(0,0);

它将工具栏自定义视图的容器扩展到组件的全宽。

指数tss公司

".label" : {
    color: "#212121"
}

".icons" : {
    width: "24dp",
    height: "24dp"
}

".bottomBtn" : {
    layout: 'vertical',
    width: '28%',
    height: Ti.UI.SIZE,
    backgroundColor: "#639851",
    touchFeedback: true,
    touchFeedbackColor: "#808080"
}

".wrapper" : {
    width: Ti.UI.FILL,
    height: Ti.UI.SIZE,
    layout: 'horizontal',
    horizontalWrap: false
}

您可以根据系统导航按钮来调整百分比值,以获得不同的对齐方式。

编辑: 当然,还要将路径添加到您的资源中。