今回は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でも動作しているエビデンスを載せようかと思っていますが今しばらくお待ちください。