Titanium mobile Alloy ボタンを配置する

少しずつやっているので順次メモを記載

JS部分はとりあえず置いておいてGUI面を現在模索中第１段として
ボタンの配置をいろいろしてみました。



サンプルで作り上げたのがこちら画面全体配置、最小サイズ、任意のサイズ１列での分割です。

index.xml

<Alloy>
 <Window class="container">
   <Button id="button1" backgroundColor="red" onClick="doClick" title="フルサイズ" top="10" />
          <Button id="button2" backgroundColor="green" onClick="doClick" title="最小サイズ" top="100"  />
          <Button id="button3" backgroundColor="blue" onClick="doClick" title="サイズ固定" top="150" />
          
          <ButtonBar id="bb1" backgroundColor="#369" top="300" >
           <Labels>
                <Label>One</Label>
                <Label>Two</Label>
                <Label>Three</Label>
            </Labels>
          </ButtonBar>
          <ButtonBar id="bb2" backgroundColor="#369" top="360" >
           <Labels>
                <Label>Single</Label>
                <Label>Duo</Label>
                <Label>Triple</Label>
                <Label>Quad</Label>
            </Labels>
          </ButtonBar>
 </Window>
</Alloy>

index.tss

".container": {
 backgroundColor : "white",
},

"#button1": {
 backgroundColor : "green",
 width : Ti.UI.FILL,
 height : "50dp"
 
},

"#button2": {
 backgroundColor : "blue",
 width: "150dp",
 width : Ti.UI.SIZE,
 height : "50dp"
},

"#button3": {
 backgroundColor : "red",
 width : "150dp",
 height : "50dp"
 
},

"#bb1": {
 backgroundColor : "#369",
 width : Ti.UI.FILL,
 height : "50dp"
 
},

"#bb2": {
 backgroundColor : "#369",
 width : Ti.UI.FILL,
 height : "20dp"
 
}

index.xmlに配置情報、index.tssにデザイン情報を記載、雑なボタンですがAlloyを利用したボタンの初歩かと思います。
Ti.UI.FILLはフルサイズとTi.UI.SIZEは最小サイズ、ButtonBarは任意の件数のボタンを配置できます。
この内容はAndroid iOS両方とも使えるのでUIの共通化が便利です。
次もレイアウト中心になるかと