如何对齐 Ti.UI.Toolbar 项？（Android 加速器）

Question

我在我的 Android 应用程序上使用底部工具栏，但我不知道如何使其项目具有相同的宽度，以便它们对齐。这是我的工具栏的样子（所有项目都在左边，它们之间没有分隔）：

这就是我想要实现的（项目分开并居中）：

我尝试将每个 item/view 的宽度设置为“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

根据文档，似乎您只能使用 FIXED SPACING or FLEX SPACING

在 iOS 上设置间距

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

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

编辑：当然还要添加资源路径。

如何对齐 Ti.UI.Toolbar 项？（Android 加速器）

How do I align Ti.UI.Toolbar items? (Android Appcelerator)

android

titanium

appcelerator

如何对齐 Ti.UI.Toolbar 项？ （Android 加速器）

How do I align Ti.UI.Toolbar items? (Android Appcelerator)

android

titanium

appcelerator

如何对齐 Ti.UI.Toolbar 项？（Android 加速器）