今回はXamarin.Formsで皆さんがよく使っているであろう、ラ〇ンのレイアウトの作成、かつトーク画面での遷移が出来るようなアプリを作っていきたいと思います。

この記事ではレイアウトの作成までを行っています。

かりまたかりまた

実はこれ、前々からやってみたかった事です。既存のアプリのレイアウトを、Xamarinを使ってどう表現出来るのか?というのは気になる所ですよね!

かりまたかりまた

今回はLineのレイアウト・動きを再現してみたいと思います。

Android・iPhoneでのレイアウトの確認

かりまたかりまた

画面のレイアウトを考える際、TabbedPageを使えば大枠は出来るなーと考えました。そこで以前書いた記事を見直してみました。

かりまたかりまた

Androidは上に、iPhoneは下にタブがあります。そこでふと、 LINEでもOSによってタブの位置が違うのか? と疑問に思ったので確認してみました。

AndroidiPhone
かりまたかりまた

LINEでも同様にして、Androidは上に、iPhoneでは下にタブがあることが確認できました!レイアウトの大枠はTabbedPageで問題なさそうですね!

TabbedPageでレイアウトの大枠だけ作ってみる

りんちゃんりんちゃん

まずは大きい所から作ってみるのにゃ~。今回はトークタブのみ作るのにゃ~。けれど一応、他のタブも用意するのにゃ~。

ファイルの構成

かりまたかりまた

ファイル構成は以下のようになります。Viewsフォルダ直下に以下のようなファイルを作成します。

ファイルに記述するコード

かりまたかりまた

まずはタブだけを作ることが目的なので、特に作りこまずに以下の様に書きました。

Code Example

りんちゃんりんちゃん

スタートページであるMainPage.xamlMainPage.xaml.csは以下の様に書いたのにゃ~。ページ数が多いので各ファイル毎にページを持たせるようにしたのにゃ~。


りんちゃんりんちゃん

タブページにはContentPageを使うだけなのにゃ~。同様に5つのタブページを作るのにゃ~。

実際の動作を見てみる

りんちゃんりんちゃん

ここまで実装してどう動くかを確認するのにゃ~。

AndroidiPhone
 iPhoneで実行できたらGIFを貼ります。

トーク画面に情報を表示してみる

りんちゃんりんちゃん

レイアウトの大枠ができたので細かい所を実装していくのにゃ~。

PrismとReactivePropertyをNugetから取得する

りんちゃんりんちゃん

NugetからPrismReactivePropertyをインストールするのにゃ~。

「Prism」と検索して「Prism.Forms」をインストールしてください。

「ReactiveProperty」と検索して「ReactiveProperty」をインストールしてください。

りんちゃんりんちゃん

まだこれらのライブラリについてこのブログで説明できてないのにゃ~。ごめんなさいにゃ~。簡単に説明しておくと、PrismReactivePropertyMVVMの構築を手助けしてくれるとても強力なライブラリなのにゃ~!

使用する画像の追加

りんちゃんりんちゃん

使用する画像を追加するのにゃ~。Androidの場合はAndroidプロジェクト/Resources/Drawableの直下に画像を配置するのにゃ~。

りんちゃんりんちゃん

iPhoneの場合はiOSプロジェクト/Resourcesの直下に画像を配置するのにゃ~。

AndroidiPhone
 
りんちゃんりんちゃん

画像を丸く切り抜いているものがあるのにゃ~。以下のサイトを使わさせていただいたのにゃ~。

かりまたかりまた

本当はPCLに画像を配置して各OSから呼び出せるようにしたかったのですが、どうにも上手くいかなかったので各OSのプロジェクトに画像を追加しています。やり方が分かる方がいらっしゃれば教えてください…。

トークタブに表示するデータを取得・反映させる

りんちゃんりんちゃん

トークタブに表示させるにあたって、ModelsフォルダViewModelsフォルダ追加して、以下のファイルも作成するのにゃ~。また、このプロジェクトはMVVMを適用させるのにゃ~。

MVVMとは?

りんちゃんりんちゃん

MVVMについては以下の記事で説明しているのにゃ~。

ViewとViewModelをViewModelLocatorで自動的に紐づけさせる

りんちゃんりんちゃん

PrismにはViewModelLocatorというViewViewModelを自動的に紐づける機能があるのにゃ~。

りんちゃんりんちゃん

今回はトークタブのみの実装なのでTalkPageTabTalkPageTabViewModelを紐づけるのにゃ~。この機能を使えば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の反映を実現させているのにゃ~。

トーク画面にデータが反映されているか実際に動かしてみる

AndroidiPhone
 iPhoneで実行できたらGIFを貼ります。

 

りんちゃんりんちゃん

なんて豪華なタイムラインなのにゃ~~~。

かりまたかりまた

次回は、トーク一覧からの遷移ロジックを書いていきます。

Program Download

かりまたかりまた

今回作成したプログラムは以下に配置しています。

まとめ

  • TabbedPageとListViewを組み合わせるとLINEっぽいUIが簡単に実現できる。

管理人から一言

かりまたかりまた

VS for MacXamarin StudioReactivePropertyやらPrismやらを使うのにかなり時間を消費したのですが結果、上手くいかなかったです。

かりまたかりまた

どうにかしてiPhoneでも動作しているエビデンスを載せようかと思っていますが今しばらくお待ちください。