TitaniumでGunosy風UIを実装する

3441 ワード
Alloy JavaScript Titanium JavaScript テキストリンク

ブログでも書きました。⇢ 元記事
ソースコード ⇢ team-cheekit/likeGunosy(github)

背景

画面を横にスワイプすると、タブも動くUIを作りたかった.

実装方法

ここを見た。
Scrollable Tabs + Draggable Windows example (Titanium Alloy)

基本的に上記参考リンク先のコードをコピペでいいですが、注意が１点。
もしNexus5などのdpiの高い端末で使うなら、

Alloy.Globals.currentTabWidth = width;  
if (Ti.Android) {  
  switch(Ti.Platform.displayCaps.dpi) {  
    case 120: width /= 0.75;            break;  
    case 160: width =  width;           break;  
    case 240: width /= width * 1.5;     break;  
    case 320: width /= 2;               break;  
    case 480: width /= 3;               break;  // ここ追加！！  
  }  
  child.setWidth(width);  
}

と、case文を追加すること。

最終的にこんなかんじになった。