Googleの検索で、「Titanium xxxx」みたいな感じで思いつく限りのキーワードを入れて関連しそうな情報をチェックしたり、Githubでお手本になりそうなソースを探したりと色々なことをやってきて、これ以上進展がないかなーと思ってました。
そんな状況の中で、昨日ふと”Titanium.UI.createButtonBar” というキーワードを思いついて一番上に表示されたのがこちらでした
Ti.UI.ButtonBarのenabledを設定する
newer(もしくはolder)ボタンを画面上部に配置していますが、各ボタンのenabledを制御すれば自分がやりたいことが実現できるわけだしこのアイデアを流用することにしました。
実装にあたっては、上記ページの情報に加えて、AppceleratorのDeveloperCenterのサイトでButtonBar ignores enabled property on labelsというのがあったのでこちらも参考にしました。
こんな感じのコードで動作するようになりました。
// 一番最後のページを生成するlastPage()のみ抜粋 lastPage:function(){ var self = this; var webview = null; var operationButtons = [ { title:'newer', width:100, enabled:false }, { title:'older', width:100, enabled:true } ]; var button_bar = Titanium.UI.createButtonBar({ labels:operationButtons, style:Ti.UI.iPhone.SystemButtonStyle.BAR }); button_bar.labels = operationButtons; /* ボタンバーに対してclickイベントリスナーを設定。ただこれだけでは ダメみたいで、Windowに対してopenイベントリスナーも設定必要みたい */ button_bar.addEventListener('click',function(e){ webview = self.newerEntry(); self.first_window.animate({ transition: Titanium.UI.iPhone.AnimationStyle.CURL_UP, view:webview }); }); self.first_window.addEventListener('open', function(e){ operationButtons[1].enabled = (operationButtons[1].enabled==false)?false:true; button_bar.labels = operationButtons; }); /* ボタンバーのプロパティ、イベントリスナーの設定をすべて終えたら 最後にWindowのsetTitleControlメソッドを使ってボタンバーの設置をする */ self.first_window.setTitleControl(button_bar); }
実際にエミュレータ上で画面遷移繰り返す中で気づいたのですが
- newer or olderのどちらのボタンがクリックされたのか
- 現在何ページ目を表示しているか
という「状態」を常にチェックしないといけません。
考慮しないといけない「状態」っていうのがおそらく
現在のページ数 | newerクリックした時のボタン状態 | olderクリックした時のボタン状態 |
1ページ | disable | enable |
2ページ | enable→disable | enable |
3ページ以降 | enable | enable |
最終ページの1つ前 | enable | enable→disableへ |
最終ページ | enable | disable |
のはず。現在はfirstPage(),lastPage(),middlePage()の中で、現在のページ数チェックとどのボタンクリックしたのか判定しているため基本同じようなコードが存在して、スパゲッティコードになりそうなので、この部分の設計をしっかりしておかないと、後々大変になりそうなので、ここはちょっとじっくり考えることにします。