MVVMっぽくXamarin.Formsアプリ作ってみました。その1
はじめに
世の中、すでにXamarin.Formsを使って作られたサンプルアプリはたくさんありますし、公式でもサンプルはあります。
私が今回作ってみたのはオレオレデザインパターンを適用して作ったアプリです。
Xamarin.Formsで一般的に使用されるデザインパターンはMVVMと呼ばれるものが多いのだと思います。
正直に申しまして、私自体MVVMって結局何なのだろう？っていう状況です。 私にとってはすごく難しいんです。 いろいろなサンプルを見るのですが各々結構違っていたりするんです。 マサカリが飛びまくっているんです。
Xamarin.Formsアプリを開発するにあたってどのようなデザインにするかすごく悩みました。
結局、MVVMはよくわからないから今ある知識でどうやったら今回の開発チームで効率よく開発できるか。
ということを考えてデザインパターンを設計することにしました。
- 少人数だけど分業して開発を行う必要がある。
- 機能ごと縦割ではなく、UIとロジックの横割で開発したい。
- UIとロジックは並行して開発したい。
- 最悪Xamarin.Forms無理ってなった時にもロジックは生かしたい。
この4つを意識して設計を行いました。
今後の勉強のためにも意見を頂けると助かります(ただし心が折れない程度に限る)
サンプルアプリ
今回作成したサンプルアプリケーションは
に公開をいたしました。
お題はJXUGであったストップウォッチアプリです。
ラップ機能付きストップウォッチ、結果保存、結果閲覧機能を実装しました。
kazukiさんの実装から劣化している感じになります"(-""-)"
すいません。iOSでテストしてません。WinPhoneは動きません。
デザイン
ばん(^^)/
こんな感じです。 すいません。こういう図を描くのが下手ですし説明なども下手です。 このBlogは私の復習とか説明練習も兼ねています。ほんとごめんなさい。
この図でいうControllerInterfaceの部分がロジック部になります。
そしてViewModelとView、MessagingCenterとNavigationがUI部になります。
概念の図なのですがライブラリ名とかクラス名が入ってしまっていますが今回の設計はそれらに依存している部分があるためです。
ControllerInterface
ロジッククラスのインターフェースです。
メソッドとModelInterfaceクラスをプロパティとして公開しています。
メソッドの呼び出しに対して結果をModelクラスに反映します。
またタイマーなどでの定周期処理に結果をModelクラスに反映したりします。
なぜインターフェースかというとViewModelを作る段階で実装ができていないからです。
開発の手順としては
最初にコントローラインターフェースおよびモデルインターフェースの設計を行い作成をします。
ロジック担当者はインターフェースに対する実装を別プロジェクトにて作成します。(サンプルではSwLib.Coreというプロジェクトにて実装してます。)
UI担当者はインターフェースに対するモッククラスを作成しながらViewModelを作成していきます。
ModelInterface
モデルクラスはINotifyPropertyChangedを実装しているのでプロパティの変更を監視できます。
プロパティはReadOnlyのみで定義し外部からの変更を受け付けません。
配列型の場合にはReadOnlyObservableCollectionにて実装されているので変更を監視できます。
配列型も外部からの変更を受け付けません。
なぜモデルまでインターフェースになっているかなのですがINotifyPropertyChangedの実装をどうするか決めていなかったからです。
なぜ公開しているプロパティがすべてReadOnlyかというとUI部側から勝手に変更されるように事を避けたかったからです。開発初期段階でチーム参加者がデザインパターンに不慣れだったこともあって意図しない実装を設計的に防げればなぁという感じでした。
今回はここまでで、また続き書きます。
