othloevent #9 xamarinハンズオン

Xamarinハンズオン2017/1/15ラルフ(@r_ralph_h)

題材

・こんなものを作ってみます

Xamarin Dev Days（世界的に⾏われたXamarinのイベント）の登壇者リストを表⽰できるアプリ

目標

・Xamarin.Formsによるコード共有の体験・Bindingを使⽤したMVVMパターンの体験

進め方

基本はhttps://github.com/chomado/xamarin-dev-docを使⽤しながら進めます。

難しい部分はスライドにて補⾜説明を⼊れます

MVVMについて

MVVM(Model-View-ViewModel)ソフトウェアアーキテクチャパターンの⼀つ

ソフトウェアアーキテクチャパターン?

・ソフトの⽣産性や保守性を上げるための考え⽅・役割分担をすることでデータや処理の流れをわかり

やすくする

Model

・主にデータと⼿続きを表す・データ：登壇者の名前・URL・タイトル など・⼿続き：登壇まで何時間か計算する処理 など

・Modelは⾃⾝のデータがどのような形で描画されるか知らない

View

・ユーザーへの表⽰とユーザーからの⼊⼒を担う・XFでは、Xamlを使⽤してViewを作れる・MVVMにおいて、Viewは複雑なことはしない

・後述のViewModelの持つ情報をただ表⽰するだけ

ViewModel

・ViewとModelの架け橋・Viewに描画する状態の保持・Viewからの⼊⼒を変換し、Modelに渡す

・BindingによってViewModelが変更された時に⾃動的にViewへ反映される

Binding(ViewBinding)

・V-VM間を結ぶ技術・⼀⽅が変わった場合に対応する他⽅も変化する

aa

ViewModel → View

stringhoge ="aa";

hoge ="bb";

bb

①

②

③

aa

View→ ViewModel

stringhoge ="aa";

hoge =>"bb"

bb

①

②

③

PropertyChanged

・ViewModelの状態が変化する（プロパティによってフィールドが書き換えられる）時にOnPropertyChangedを呼ぶ

・XFのBindingでは、この時に変化したプロパティに対応するViewを変更する

バッキングフィールド

・フィールド：データを保存する変数・プロパティ：フィールドの値を読み書きする⼿段

・フィールドへの読み書きのイベントを取得したい！・Getter/Setterを実装すればできる→カッコ悪い・プロパティで取得する

バッキングフィールド

private int hoge; // 直接いじられると困るのでprivateに// こいつがバッキングフィールド

public int Hoge{

get { return hoge; }set{

hoge = value;// ここでイベント取れる！

}}

バッキングフィールド

・Modelで書いた以下の書き⽅を⾃動実装プロパティと呼ぶpublic int Hoge { get; set; }

・これによりフィールドとプロパティがよしなに⽣成される