1-1【UI開発】OnsenUIを使ったページ遷移の実装 - 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】
【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】
1章 UI開発
1-1【UI開発】OnsenUIを使ったページ遷移の実装 【Navigation・tabbar】
2017年8月24日記事の最新化 移行
下記の内容は古くなっています。
上に貼ったリンクから最新の記事を見てください。
今回から「【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】」の実装について書いていく。
このページで今後の掲載予定を書いている通り、最初の数回はUIの実装について。今回は「OnsenUIを使ったページ遷移の実装」
OnsenUIを使ったページ遷移は大きく分けて次の4つがある。
■ナビゲーション型
■スライディングメニュー型
■タブバー型
■スプリットビュー型
それぞれの詳細はこちらから。
本連載で作成するアプリはタブバー型での遷移がメインなので、タブバー型画面遷移の実装を行う。タブバー以外にもナビゲーション型での遷移も使用しているので、それも解説していく。
ナビゲーション型画面遷移
以下、OnsenUIのドキュメントから引用
ページが親子関係を持つ場合に一般的に用いられるパターンです。子ページへは、ボタンのタップや、リスト要素の選択などからリンクされます。ナビゲーションパターンを実装するためには、
<ons-navigator>と<ons-toolbar>を組み合わせます。
親子関係を持つ場合に用いられる画面遷移方法。
今回はアプリ作成時にあるテンプレートを使用していて、それがこのネビゲーション型画面遷移を取り入れていたため、そのまま使用している。
index.htmlを親ページにしており、navigator.htmlを通してaccount.htmlが表示される設定になっている。
navigator.html
<ons-navigator var="myNavigator" page="account.html">
</ons-navigator>
index.htmlは特に手を加えていないので省略。
このページはaccount.htmlだが、アプリの最初にこのページが表示される。
タブバー型画面遷移
以下、OnsenUIのドキュメントから引用
iPhoneやiPadアプリでよく見られ、ページの下部にタブバーを配置したパターンになります。通常、タブバーにはいくつかの項目（アイテム）が並び、アイコンとテキストで表現されます。複数の機能を提供したいような場合に用いられます。Onsen UIでタブバーを実装するには、
<ons-tabbar>コンポーネントを使用します。
多くのアプリがこの方式を取り入れている。先ほどの画像でもすでに実装済み。
index.html
<!DOCTYPE HTML>
<html lang="ja" ng-app="myApp">
<head>
//省略
</head>
<body>
<ons-tabbar var="tabbar"><ons-tabbar-item icon="home" label="トップ画面" page="navigator.html" active="true">
</ons-tabbar-item>
<ons-tabbar-item icon="fa fa-pencil-square-o" label="履歴" page="history.html">
</ons-tabbar-item>
<ons-tabbar-item icon="ion-stats-bars" label="グラフ" page="graph.html">
</ons-tabbar-item>
<ons-tabbar-item icon="gear" label="設定" page="config.html">
</ons-tabbar-item>
</ons-tabbar>
</body>
</html>
赤文字の「active="true"」は現在のページを教えてくれるものなので、実装時には最初に表示されるページの<ons-tabbar-item>につけておく。
こうすることで、タブバーを利用して以下のような画面遷移が可能。
ここまでで大きな画面遷移は完了。
最後に、それ以外の画面遷移について。
pushPage( )とpopPage( )を利用した画面遷移
account.html
<div class="content" ng-app="myApp">
<div class="main" ng-controller="accountCtrl as ctrl"><div id="top_add_account" >
<ons-button onclick="myNavigator.pushPage('add_account.html', { animation : 'slide' } )">口座を追加する</ons-button>
</div>
// 省略
</div><!-- .main -->
add_account.html
<ons-toolbar class="top_bar">
<div class="left">
<ons-back-button onclick="myNavigator.popPage({ animation : 'slide' } )">Back</ons-back-button>
</div>
<div class="center">口座追加</div>
</ons-toolbar>
<div class="main">
// 省略
</div><!-- .main -->
実はこれもナビゲーション型画面遷移だけど、ちょっと勝手が違うので分けて紹介してる。myNavigatorというのはnavigator.htmlで定義した名前。
navigator.html
<ons-navigator var="myNavigator" page="account.html">
</ons-navigator>
pushPage()は遷移させたいページを指定する。popPageは遷移してきた元のページに戻る。どちらもオプションで、遷移する際のアニメーションを設定できる。その種類はslide、lift、fade、noneの4つ。
以下のような画面遷移が可能。
画面遷移については以上。
ここら辺はドキュメントをみれば難なくできるはず。
以上。
