如何对齐Ti.UI.Toolbar项目？ （Android Appcelerator）

Question

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

TSS：

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

Answer 1

根据文档，您似乎只能在iOS上使用 FIXED SPACING 或 FLEX SPACING

进行间距

在Android上，我认为设置固定宽度如200dp或100dp等都可以。

在您的情况下，您可以使用下面的代码来获取dp中每个项目的宽度：

<强> alloy.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;

<强> INDEX.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>

<强> index.tss

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

<强> index.js

$.bar.setContentInsetsAbsolute(0,0);

Answer 2

目前在Android上我会提出这种解决方法 - 将视图放在一个视图中，该视图作为工具栏的项目传递。请尝试以下方法：

<强> INDEX.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>

在 index.js

中添加以下行

$.bar.setContentInsetsAbsolute(0,0);

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

<强> index.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
}

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

修改当然还要添加资源的路径。