Comment aligner les éléments Ti.UI.Toolbar? (Android Appcelerator)

Question

J'utilise une barre d'outils inférieure sur mon application Android mais je ne sais pas comment faire en sorte que ses éléments aient la même largeur, donc ils sont alignés. Voici comment ma barre d'outils ressemble (tous les éléments sont à gauche, sans séparation entre eux):

C'est ce que je veux réaliser (les éléments sont séparés et centrés):

J'ai essayé de régler la largeur de chaque élément/vue sur "33%", mais cela ne fonctionne pas. J'utilise Titanium SDK 6.2.2 GA. Voir mon code ci-dessous:

xml Alloy:

<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

Actuellement sur Android Je propose cette solution de contournement - placer les vues en une seule vue qui est passé comme élément pour la barre d'outils. Effectuez les opérations suivantes:

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> 

Ajoutez la ligne suivante dans index.js

$.bar.setContentInsetsAbsolute(0,0); 

Il prolongera le récipient pour des vues personnalisées de la barre d'outils à la pleine largeur du composant.

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 
} 

Vous pouvez jouer avec les valeurs de pourcentage pour obtenir un alignement différent en fonction des boutons de navigation du système.

Editer: Et bien sûr ajouter les chemins à vos ressources.

Answer 2

Selon la documentation, il semble que vous pouvez avoir écartements seulement sur iOS en utilisant FIXED SPACING ou FLEX SPACING

Sur Android, je crois que la définition d'un widt fixe h comme 200dp ou 100dp etc fonctionnera.

Dans votre cas, vous pouvez utiliser le code ci-dessous pour obtenir la largeur de chaque élément dp dans:

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);