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

Question

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

这是我想要实现（项目分离，并居中）什么：

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

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

合金的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

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

你可以玩的百分比值来获得基于该系统的导航按钮的不同排列。

编辑：当然，添加路径到您的资源。

Answer 2

按照该文档，似乎可以有间隔只能使用FIXED SPACING或FLEX SPACING的iOS

在Android上，我相信设置一个固定的widt像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);