今回はXamarin.Formsで皆さんがよく使っているであろう、ラ〇ンのレイアウトの作成、かつトーク画面での遷移が出来るようなアプリを作っていきたいと思います。
この記事ではレイアウトの作成までを行っています。
かりまた実はこれ、前々からやってみたかった事です。既存のアプリのレイアウトを、Xamarinを使ってどう表現出来るのか？というのは気になる所ですよね！
かりまた今回はLineのレイアウト・動きを再現してみたいと思います。
Android・iPhoneでのレイアウトの確認
かりまた画面のレイアウトを考える際、TabbedPageを使えば大枠は出来るなーと考えました。そこで以前書いた記事を見直してみました。
かりまたAndroidは上に、iPhoneは下にタブがあります。そこでふと、 LINEでもOSによってタブの位置が違うのか？ と疑問に思ったので確認してみました。
| Android | iPhone |
 |  |
かりまたLINEでも同様にして、Androidは上に、iPhoneでは下にタブがあることが確認できました！レイアウトの大枠はTabbedPageで問題なさそうですね！
TabbedPageでレイアウトの大枠だけ作ってみる
りんちゃんまずは大きい所から作ってみるのにゃ～。今回はトークタブのみ作るのにゃ～。けれど一応、他のタブも用意するのにゃ～。
ファイルの構成
かりまたファイル構成は以下のようになります。Viewsフォルダ直下に以下のようなファイルを作成します。
ファイルに記述するコード
かりまたまずはタブだけを作ることが目的なので、特に作りこまずに以下の様に書きました。
Code Example
りんちゃんスタートページであるMainPage.xamlとMainPage.xaml.csは以下の様に書いたのにゃ～。ページ数が多いので各ファイル毎にページを持たせるようにしたのにゃ～。
りんちゃんタブページにはContentPageを使うだけなのにゃ～。同様に5つのタブページを作るのにゃ～。
実際の動作を見てみる
りんちゃんここまで実装してどう動くかを確認するのにゃ～。
| Android | iPhone |
 | iPhoneで実行できたらGIFを貼ります。 |
トーク画面に情報を表示してみる
りんちゃんレイアウトの大枠ができたので細かい所を実装していくのにゃ～。
PrismとReactivePropertyをNugetから取得する
りんちゃんNugetからPrismとReactivePropertyをインストールするのにゃ～。
りんちゃんまだこれらのライブラリについてこのブログで説明できてないのにゃ～。ごめんなさいにゃ～。簡単に説明しておくと、PrismもReactivePropertyもMVVMの構築を手助けしてくれるとても強力なライブラリなのにゃ～！
使用する画像の追加
りんちゃん使用する画像を追加するのにゃ～。Androidの場合はAndroidプロジェクト/Resources/Drawableの直下に画像を配置するのにゃ～。
りんちゃんiPhoneの場合はiOSプロジェクト/Resourcesの直下に画像を配置するのにゃ～。
| Android | iPhone |
 |  |
りんちゃん画像を丸く切り抜いているものがあるのにゃ～。以下のサイトを使わさせていただいたのにゃ～。
かりまた本当はPCLに画像を配置して各OSから呼び出せるようにしたかったのですが、どうにも上手くいかなかったので各OSのプロジェクトに画像を追加しています。やり方が分かる方がいらっしゃれば教えてください…。
トークタブに表示するデータを取得・反映させる
りんちゃんトークタブに表示させるにあたって、ModelsフォルダとViewModelsフォルダ追加して、以下のファイルも作成するのにゃ～。また、このプロジェクトはMVVMを適用させるのにゃ～。
MVVMとは？
りんちゃんMVVMについては以下の記事で説明しているのにゃ～。
ViewとViewModelをViewModelLocatorで自動的に紐づけさせる
りんちゃんPrismにはViewModelLocatorというViewとViewModelを自動的に紐づける機能があるのにゃ～。
りんちゃん今回はトークタブのみの実装なのでTalkPageTabとTalkPageTabViewModelを紐づけるのにゃ～。この機能を使えばBindingContextを書くことなく、紐づけができるので楽なのにゃ～。
りんちゃん紐づけに必要なのは以下の2行だけなのにゃ～。
- xmlns:mvvm=”clr-namespace:Prism.Mvvm;assembly=Prism.Forms”
- mvvm:ViewModelLocator.AutowireViewModel=”true”
トーク画面のViewとViewModelを実装してみる
りんちゃん実装してみたのにゃ～。
りんちゃんLINEのトーク一覧に表示されている行の構成は以下の様になっているのにゃ～。綺麗に分割されているのでGridを使用すると簡単に表現できるのにゃ～。
トーク画面のModelを実装してみる
りんちゃんTalk.csではMVVMに則ってViewModelへ直接値を返さないようにしているのにゃ～。
りんちゃん代わりに、ReactivePropertyを使用してプロパティの変更通知を行うようにしてUIの反映を実現させているのにゃ～。
トーク画面にデータが反映されているか実際に動かしてみる
| Android | iPhone |
 | iPhoneで実行できたらGIFを貼ります。
|
りんちゃんなんて豪華なタイムラインなのにゃ～～～。
かりまた次回は、トーク一覧からの遷移ロジックを書いていきます。
Program Download
かりまた今回作成したプログラムは以下に配置しています。
まとめ
- TabbedPageとListViewを組み合わせるとLINEっぽいUIが簡単に実現できる。
管理人から一言
かりまたVS for MacやXamarin StudioでReactivePropertyやらPrismやらを使うのにかなり時間を消費したのですが結果、上手くいかなかったです。
かりまたどうにかしてiPhoneでも動作しているエビデンスを載せようかと思っていますが今しばらくお待ちください。
