The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

1-1【UI開発】OnsenUIを使ったページ遷移の実装 - 【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】

f:id:duo-taro100:20160218004611p:plain

1章 UI開発

1-1【UI開発】OnsenUIを使ったページ遷移の実装 【Navigation・tabbar】

2017年8月24日記事の最新化 移行

www.sky-limit-future.com

 

www.sky-limit-future.com

 

 

 

下記の内容は古くなっています。

上に貼ったリンクから最新の記事を見てください。

 

 

 

今回から「【連載】ハイブリッドアプリ開発で貯金管理アプリを作る【Cordova・Monaca・OnsenUI・AngularJS】」の実装について書いていく。

it-innovation.hatenablog.com

このページで今後の掲載予定を書いている通り、最初の数回は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は特に手を加えていないので省略。

f:id:duo-taro100:20160501004317p:plain

このページはaccount.htmlだが、アプリの最初にこのページが表示される。

 

f:id:duo-taro100:20160322234952p:plain

タブバー型画面遷移

以下、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>につけておく。

こうすることで、タブバーを利用して以下のような画面遷移が可能。

f:id:duo-taro100:20160501011055p:plain

ここまでで大きな画面遷移は完了。

最後に、それ以外の画面遷移について。

f:id:duo-taro100:20160218004753j:plain

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つ。

以下のような画面遷移が可能。

f:id:duo-taro100:20160501012423p:plain

 

画面遷移については以上。

ここら辺はドキュメントをみれば難なくできるはず。

 

f:id:duo-taro100:20160218004600p:plain

 

以上。