乱ちゃんProjectその11(夏狂乱ちゃんをアプリに組み込む)

放浪軍師の Xamarin.Forms によるアプリ開発。
今回は前回紹介した夏狂乱ちゃんをアプリに組み込んでいこうと思います。

夏狂乱ちゃんを主軸にUIを再構成

今までは無機質だった乱ちゃんProjectですが、夏狂乱ちゃんを組み込むことにより華やかにしていきます。あと Xamarin.Forms.WPF に Prism を適用できることがわかったので、今回から Prism 版になります。この件に関しては以下の記事を確認してください。
www.gunshi.info

開発環境

Xamarin.Forms 3.4.0.1009999
Xamarin.Forms.Platform.WPF 3.4.0.1009999
ReactiveProperty 5.2
Prism.Forms 7.1(※WPF対応改造版)

Button コントロールの代わりに Image コントロールのタップで Command 発動

f:id:roamschemer:20190407225053g:plain:w150
Button を撤廃して、代わりにデフォルメ乱ちゃんを Image で配置し、それをタップする事で Command からバインディングさせるようにしました。GestureRecognizers クラスで再現可能です。Button 以外でも気軽に使えるみたいで今後も重宝しそうですね。
docs.microsoft.com
View の Xaml はこんな感じになります。ViewModel は Button で使った奴をそのまま使えるので修正不要。簡単ですね。

<Image Aspect = "AspectFit" Grid.Row="1" Source="{Binding RanCyanKowashiyaImage.Value, Converter={StaticResource ImageSourceConverter}}" >
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding ShingenRanCommand}" />
    </Image.GestureRecognizers>
</Image>

横スクロールする ListView を採用

f:id:roamschemer:20190407225453g:plain:w150
画面下部に移動になった ListView は横向きにスクロールするようにしました。これは今までも ListView を Grid 状に並べるために使用していたライブラリ AiForms.CollectionView に存在する HCollectionView を使用しています。これにより選択項目が無限に増えても画面を崩すことなく使えますね！かむ (@muak_x) | Twitterさんいつもありがとうございます！
kamusoft.hatenablog.jp
View はこんな感じ。こちらも ViewModel はそのまま使えますね。

<ai:HCollectionView Grid.Row="2" ItemsSource="{Binding ShingenItems}" ColumnWidth="100" Spacing="4" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <ai:ContentCell>
                <controls:ToggleButton Command="{Binding BindingContext.ShingenItemTapped, Source={x:Reference Base}}"
                        CommandParameter="{Binding}"
                        Text="{Binding Name}"
                        IsSelected="{Binding IsSelected}"
                        IsHited="{Binding IsHited}"/>
            </ai:ContentCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ai:HCollectionView>

Prism 使用時の ViewModel 共通化方法

以前、スマホ用と Windows 用で View を分けて、ViewModel を共通化するというのをやりました。
www.gunshi.info
ただ、この時は Prism なしだったので、今回は Prism ありのやり方を説明したいと思います。…と言っても Prism がある場合は超簡単で、Prism から Views に Page を追加した際に自動的に App.xaml.cs に以下のような記述がされるのですが、そこを弄るだけですね。

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    containerRegistry.RegisterForNavigation<NavigationPage>();
    //↓MainPage.xaml という Page を Views に追加すると自動的に記載される
    containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
}

コメントにあるように自動的に記載されるコードが、MainPage と MainPageViewModel を紐づけしている箇所になりますので、この MainPageViewModel を別の ViewModel クラスにしてしまえばそれだけで ViewModel を共通化できます。やっぱ Prism すげーぜ！

MVVM(Model-View-ViewModel) の利点

このように UI はガラっと変わりましたが修正は View のみで ViewModel の修正は不要でした。これは MVVM を採用して View と ViewModel を疎結合に保っていたお陰ですね！ MVVM の何が良いのか、少しずつ分かってきました。やっぱこういうのは自分でアプリを作成して、それを修正してみて初めて理解できる事なのかもしれませんね。

サイコロ機能の追加

f:id:roamschemer:20190407230322g:plain:w150
なんてことはないのですが、サイコロ的な機能を追加しました。すごろくをしたいのにサイコロが無いときとかにお使いください。一応 1 ～ 30 までを自由に設定可能です。ただ、一つずつ ON/OFF しないといけないのは面倒なので、指定範囲を OM/OFF 出来る機能ぐらいはそのうち付けるつもりです。

アイコンとスプラッシュを夏狂乱仕様に変更

f:id:roamschemer:20190407230357g:plain:w150
この辺は当たり前ですが画像ファイルを差し替えただけです。でも印象はがらっと変わりますのでアイコンやスプラッシュは超重要ですね。

折角だからダウンロードしてみてね！

乱ちゃんが擬人化した事によりものすごい勢いで印象が変わりましたね！せっかくなのでダウンロードしていってくださいな。乱屍やらなくてもサイコロの変わりぐらいにはなりますよ！
play.google.com
さて、この辺で機能開発は一旦区切りですねぇ～。次回からは Android 以外での配布を頑張っていこうと思っています。お楽しみね！