Titanium MobileでTableViewの行クリックすると詳細画面へアニメーションしながら画面遷移させてみる。
// 最初に開かれる画面(TableView) var win1 = Titanium.UI.createWindow({ title:'bookmark', backgroundColor:'#fff' }); var rows = [ {title:'apple', hasChild:true, url:'http://www.apple.co.jp'}, {title:'amazon', hasChild:true, url:'http://www.amazon.co.jp'}, {title:'google', hasChild:true, url:'http://www.google.co.jp'} ]; var tblView = Titanium.UI.createTableView({ data:rows }); win1.add(tblView); // ナビゲーショングループと、それを含むTopLevelのWindow var rootWin = Titanium.UI.createWindow(); var navGrp = Titanium.UI.iPhone.createNavigationGroup({ // ナビゲーショングループの1枚目の画面を指定 window:win1 }); // ナビゲーショングループをTopLevelのWindowに追加し、開く rootWin.add(navGrp); rootWin.open(); // 行クリック時の処理 tblView.addEventListener('click', function(e){ var childWin = Titanium.UI.createWindow({ title:'webwindow', backgroundColor:'#333' }); var webv = Titanium.UI.createWebView({ url:e.rowData.url }); childWin.add(webv); //クリックで子画面を開く navGrp.open(childWin, {animated:true}); });
このように書くと、行をクリックしたとき、画面が横スライドして子画面が出てくる。
子画面の元に戻るナビゲーションボタンとかも、特に設定しなくても表示されている。
簡単!(Titanium.UI.iPhone.createNavigationGroup の iPhone の部分を記述し忘れて、小一時間悩んだのは秘密だ)