如何對齊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);