前回の「[Xamarin.CrossPlatform] マスタ/詳細アプリのプロジェクトを理解する1」では、マスタ/詳細型アプリの要素技術について取り上げました。
今回は、実行時のアプリ画面と新規プロジェクト作成後のプロジェクト構成、共通プロジェクトのApp.xaml中身を見ていきます。
とりあえず実行してみる
新規プロジェクトを作成して実行すると、以下の画面が表示されます。
これはアプリのメインとなる画面で、項目が一覧表示されます。
メイン画面の右上にある「Add」をタップすると、以下のように項目を追加するための画面が表示されます。
画面下の「About」をタップすると、アプリの情報画面が表示されます。
上記のように、大きく3つの画面で構成されていることがわかります。
プロジェクト構成
続いてプロジェクトの構成をみてみましょう。
以下はプロジェクト名を「MasterDetailSample」として作成した例です。スクショはVS for Macのものですが、構成自体はWindows版も同じです。
ソリューションには3つのプロジェクトがあります。
- MasterDetailSample
iOSとAndroidの共通プロジェクトです。 - MasterDetailSample.Droid
Android用のプロジェクトです - MasterDetailSample.iOS
iOS用のプロジェクトです。
共通プロジェクトの構成
共通プロジェクトを展開すると、以下のようになります。
前回説明した通り、マスタ/詳細型はMVVMパターンを採用していますので、Models, ViewModels, Viewsというようにフォルダを分けてファイルが作成されています。Servicesについては、後ほど見ていくこととします。そのほか、App.xamlというファイルがあります。
App.xaml
App.xamlのコードは以下のようになっています。
<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MasterDetailSample.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="Primary">#2196F3</Color>
<Color x:Key="PrimaryDark">#1976D2</Color>
<Color x:Key="Accent">#96d1ff</Color>
<Color x:Key="LightBackgroundColor">#FAFAFA</Color>
<Color x:Key="DarkBackgroundColor">#C0C0C0</Color>
<Color x:Key="MediumGrayTextColor">#4d4d4d</Color>
<Color x:Key="LightTextColor">#999999</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="BarTextColor" Value="White" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
<Application.Resources>や<ResourceDictionary>という名前から推測できるように、アプリケーション内で使用するリソースを定義しているファイルです。
例えば、5行目は、Primaryという名前で#2196F3の色を定義しています。このようにして定義された色は、データバインディングの機構を使用してViewから使用することができます。
<Color x:Key="Primary">#2196F3</Color>
コメント