【Xamarin】【book】「Xamarin エキスパート養成読本」の学習記録(2) [特集2 - 第2章]

下記の「Xamarin エキスパート養成読本」を使った学習記録のページです。
Xamarinエキスパート養成読本 (Software Design plus)
 

 

環境

「Xamarin エキスパート養成読本」は Visual Studio 2015 で記載されているため、私が使用した Visual Studio 2017 とは若干操作手順が異なる。

  • Windows 10
  • Visual Studio 2017

 

概要

次のアプリを作成する

  • 4つのタブを持つ
  • タブをタップすると画面を切り換える
  • 各タブごとに異なる機能を持つ

 

作成

新規プロジェクトの作成

「ファイル」-「新規作成」-「プロジェクト」-「新しいプロジェクト」より、以下のように「Cross-Platform」から「モバイルアプリ」を選択し、「Blank App」を選ぶ。
なお、プロジェクト名は「SampleApp」とする。
f:id:dnkrnka:20181013211946p:plain
 

タブ1 の実装

 

完成後の動作
「タブ1」選択時 「ボタン1」タップ後
f:id:dnkrnka:20181014004827p:plain:w200 f:id:dnkrnka:20181014004844p:plain:w200

 

画面の作成

SampleApp プロジェクト - MainPage.xaml を開く。
f:id:dnkrnka:20181014001247p:plain
 

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SampleApp"
             x:Class="SampleApp.MainPage">
    <!-- 1つ目のタブ -->
    <TabbedPage.Children>
        <ContentPage Title="タブ1" Padding="20">
            <StackLayout Padding="20" Spacing="15"
                         BackgroundColor="White">
                <!-- Label の使用例 1 -->
                <Label Text="Hello, SampleApp!" BackgroundColor="Aqua" TextColor="Black" />
                <!-- Label の使用例 2 -->
                <Label>
                    <Label.BackgroundColor>Aqua</Label.BackgroundColor>
                    <Label.TextColor>Black</Label.TextColor>
                    <Label.Text>Hello, SampleApp!</Label.Text>
                </Label>
                <!-- Button の使用例 3 -->
                <Button x:Name="SampleButton1" Text="ボタン1" BackgroundColor="Blue" TextColor="Black"/>
                <Button x:Name="SampleButton2" Text="ボタン2" BackgroundColor="Red" TextColor="Black"/>
            </StackLayout>
        </ContentPage>
    </TabbedPage.Children>
    <!-- 2つ目のタブ -->
    <!-- 3つ目のタブ -->
    <!-- 4つ目のタブ -->
</TabbedPage>

 

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace SampleApp
{
  public partial class MainPage : TabbedPage
  {
    public MainPage()
    {
      InitializeComponent();

      SampleButton1.Clicked += (sender, e) =>
      {
        DisplayAlert("通知", "タブ1のボタン1がタップされました","OK");
      };

      SampleButton2.Clicked += (sender, e) =>
      {
        DisplayAlert("通知", "タブ1のボタン2がタップされました","OK");
      };
    }
  }
}

 
 

タブ2 の実装

「タブ2」選択時 「アカウント」「パスワード」入力後
f:id:dnkrnka:20181014024544p:plain:w200 f:id:dnkrnka:20181014024656p:plain:w200

 

「タブ2」選択時 「パスワード」未入力時
f:id:dnkrnka:20181014024544p:plain:w200 f:id:dnkrnka:20181014024931p:plain:w200

 

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SampleApp"
             x:Class="SampleApp.MainPage">
    <!-- 1つ目のタブ -->
    <TabbedPage.Children>
        <ContentPage Title="タブ1" Padding="20">
            <StackLayout Padding="20" Spacing="15"
                         BackgroundColor="White">
                <!-- Label の使用例 1 -->
                <Label Text="Hello, SampleApp!" BackgroundColor="Aqua" TextColor="Black" />
                <!-- Label の使用例 2 -->
                <Label>
                    <Label.BackgroundColor>Aqua</Label.BackgroundColor>
                    <Label.TextColor>Black</Label.TextColor>
                    <Label.Text>Hello, SampleApp!</Label.Text>
                </Label>
                <!-- Button の使用例 3 -->
                <Button x:Name="SampleButton1" Text="ボタン1" BackgroundColor="Blue" TextColor="Black"/>
                <Button x:Name="SampleButton2" Text="ボタン2" BackgroundColor="Red" TextColor="Black"/>
            </StackLayout>
        </ContentPage>
    <!-- 2つ目のタブ -->
        <ContentPage Title="タブ2" Padding="20">
            <Grid Padding="10,30,10,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" /> <!-- Y[0] -->
                    <RowDefinition Height="Auto" /> <!-- Y[1] -->
                    <RowDefinition Height="Auto" /> <!-- Y[2] -->
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" /><!-- X[0] -->
                    <ColumnDefinition Width="*" />   <!-- X[1] -->
                </Grid.ColumnDefinitions>

                <Label Text="アカウント" Grid.Row="0" Grid.Column="0" />
                <!-- Entry の使用例 1 -->
                <Entry x:Name="entryAccount" Placeholder="enter Account..." Grid.Row="0" Grid.Column="1" />

                <Label Text="パスワード" Grid.Row="1" Grid.Column="0" />
                <!-- Entry の使用例 2 -->
                <Entry x:Name="entryPassword" IsPassword="true" Placeholder="enter Password..." Grid.Row="1" Grid.Column="1" />

                <!-- セル2個を結合する -->
                <StackLayout Orientation="Horizontal" Grid.Row="2" Grid.ColumnSpan="2">
                    <!-- [認証] と [クリア]ボタンの間隔 -->
                    <Button x:Name="Authentication" Text="認証" Margin="0,0,10,0" HorizontalOptions="CenterAndExpand"/>
                    <Button x:Name="Clear" Text="クリア" HorizontalOptions="CenterAndExpand"/>
                </StackLayout>
            </Grid>
        </ContentPage>
    <!-- 3つ目のタブ -->
    <!-- 4つ目のタブ -->
    </TabbedPage.Children>
</TabbedPage>

 

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace SampleApp
{
  public partial class MainPage : TabbedPage
  {
    public MainPage()
    {
      InitializeComponent();

      SampleButton1.Clicked += (sender, e) =>
      {
        DisplayAlert("通知", "タブ1のボタン1がタップされました","OK");
      };

      SampleButton2.Clicked += (sender, e) =>
      {
        DisplayAlert("通知", "タブ1のボタン2がタップされました","OK");
      };

      Authentication.Clicked += (sender, e) =>
      {
        if (!string.IsNullOrEmpty(entryAccount.Text))
        {
          if (!string.IsNullOrEmpty(entryPassword.Text))
          {
            DisplayAlert("通知", entryAccount.Text + "を認証しました", "OK");
          }
          else
          {
            DisplayAlert("警告", "パスワードを入力してください", "OK");
          }
        }
      };

      Clear.Clicked += (sender, e) =>
      {
         entryAccount.Text = "";
         entryPassword.Text = "";
      };
    }
  }
}

 

タブ3 の実装

完成後の動作
「タブ3」選択時 検索ワード入力後
f:id:dnkrnka:20181014223526p:plain:w200 f:id:dnkrnka:20181014223630p:plain:w200
  • 検索バーに入力すると、検索結果(現状は固定文字列で SampleApp Search! )が表示される。
  • 検索ワード入力中に × ボタンを押下すると、検索結果がクリアされる。

 

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SampleApp"
             x:Class="SampleApp.MainPage">
    <!-- 1つ目のタブ -->
    <TabbedPage.Children>
        <ContentPage Title="タブ1" Padding="20">
            <StackLayout Padding="20" Spacing="15"
                         BackgroundColor="White">
                <!-- Label の使用例 1 -->
                <Label Text="Hello, SampleApp!" BackgroundColor="Aqua" TextColor="Black" />
                <!-- Label の使用例 2 -->
                <Label>
                    <Label.BackgroundColor>Aqua</Label.BackgroundColor>
                    <Label.TextColor>Black</Label.TextColor>
                    <Label.Text>Hello, SampleApp!</Label.Text>
                </Label>
                <!-- Button の使用例 3 -->
                <Button x:Name="SampleButton1" Text="ボタン1" BackgroundColor="Blue" TextColor="Black"/>
                <Button x:Name="SampleButton2" Text="ボタン2" BackgroundColor="Red" TextColor="Black"/>
            </StackLayout>
        </ContentPage>
        <!-- 2つ目のタブ -->
        <ContentPage Title="タブ2" Padding="20">
            <Grid Padding="10,30,10,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <!-- Y[0] -->
                    <RowDefinition Height="Auto" />
                    <!-- Y[1] -->
                    <RowDefinition Height="Auto" />
                    <!-- Y[2] -->
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <!-- X[0] -->
                    <ColumnDefinition Width="*" />
                    <!-- X[1] -->
                </Grid.ColumnDefinitions>

                <Label Text="アカウント" Grid.Row="0" Grid.Column="0" />
                <!-- Entry の使用例 1 -->
                <Entry x:Name="entryAccount" Placeholder="enter Account..." Grid.Row="0" Grid.Column="1" />

                <Label Text="パスワード" Grid.Row="1" Grid.Column="0" />
                <!-- Entry の使用例 2 -->
                <Entry x:Name="entryPassword" IsPassword="true" Placeholder="enter Password..." Grid.Row="1" Grid.Column="1" />

                <!-- セル2個を結合する -->
                <StackLayout Orientation="Horizontal" Grid.Row="2" Grid.ColumnSpan="2">
                    <!-- [認証] と [クリア]ボタンの間隔 -->
                    <Button x:Name="Authentication" Text="認証" Margin="0,0,10,0" HorizontalOptions="CenterAndExpand"/>
                    <Button x:Name="Clear" Text="クリア" HorizontalOptions="CenterAndExpand"/>
                </StackLayout>
            </Grid>
        </ContentPage>
        <!-- 3つ目のタブ -->
        <ContentPage Title="タブ3" Padding="20">
            <StackLayout Padding="20" Spacing="15" BackgroundColor="White">
                <!-- SearchBar の使用例 -->
                <SearchBar x:Name="searchBar" Placeholder="keyword" CancelButtonColor="Red" TextColor="Black"/>
                <Label Text="検索結果:" FontSize="Small" FontAttributes="Bold" TextColor="Black"/>
                <Label x:Name="lblResult" TextColor="Black"/>
            </StackLayout>
        </ContentPage>
        <!-- 4つ目のタブ -->
    </TabbedPage.Children>
</TabbedPage>

 

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace SampleApp
{
  public partial class MainPage : TabbedPage
  {
    public MainPage()
    {
      InitializeComponent();

      SampleButton1.Clicked += (sender, e) =>
      {
        DisplayAlert("通知", "タブ1のボタン1がタップされました","OK");
      };

      SampleButton2.Clicked += (sender, e) =>
      {
        DisplayAlert("通知", "タブ1のボタン2がタップされました","OK");
      };

      Authentication.Clicked += (sender, e) =>
      {
        if (!string.IsNullOrEmpty(entryAccount.Text))
        {
          if (!string.IsNullOrEmpty(entryPassword.Text))
          {
            DisplayAlert("通知", entryAccount.Text + "を認証しました", "OK");
          }
          else
          {
            DisplayAlert("警告", "パスワードを入力してください", "OK");
          }
        }
      };

      Clear.Clicked += (sender, e) =>
      {
         entryAccount.Text = "";
         entryPassword.Text = "";
      };

      searchBar.SearchButtonPressed += (sender, e) =>
      {
        // 検索結果が入る(が、現時点では固定文字列を入れている)
        lblResult.Text = "SampleApp Search!";
      };

      searchBar.TextChanged += (sender, e) =>
      {
        // 変更が発生したら検索結果欄を空白にする
        lblResult.Text = string.Empty;
      };
    }
  }
}

 

タブ4 の実装

完成後の動作
Android端末にて「タブ4」をタップした後
f:id:dnkrnka:20181014230116p:plain:w200

次の動作をする。

  • 端末が Android OS の場合
    • OnPlatform Color Check! のテキストを赤色で表示する
    • Android! のテキストを黒色で表示する
  • 端末が iOS の場合
    • OnPlatform Color Check! のテキストを青色で表示する
    • Android! のテキストを黒色で表示する

 

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SampleApp"
             x:Class="SampleApp.MainPage">
    <!-- 1つ目のタブ -->
    <TabbedPage.Children>
        <ContentPage Title="タブ1" Padding="20">
            <StackLayout Padding="20" Spacing="15"
                         BackgroundColor="White">
                <!-- Label の使用例 1 -->
                <Label Text="Hello, SampleApp!" BackgroundColor="Aqua" TextColor="Black" />
                <!-- Label の使用例 2 -->
                <Label>
                    <Label.BackgroundColor>Aqua</Label.BackgroundColor>
                    <Label.TextColor>Black</Label.TextColor>
                    <Label.Text>Hello, SampleApp!</Label.Text>
                </Label>
                <!-- Button の使用例 3 -->
                <Button x:Name="SampleButton1" Text="ボタン1" BackgroundColor="Blue" TextColor="Black"/>
                <Button x:Name="SampleButton2" Text="ボタン2" BackgroundColor="Red" TextColor="Black"/>
            </StackLayout>
        </ContentPage>

        <!-- 2つ目のタブ -->
        <ContentPage Title="タブ2" Padding="20">
            <Grid Padding="10,30,10,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <!-- Y[0] -->
                    <RowDefinition Height="Auto" />
                    <!-- Y[1] -->
                    <RowDefinition Height="Auto" />
                    <!-- Y[2] -->
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <!-- X[0] -->
                    <ColumnDefinition Width="*" />
                    <!-- X[1] -->
                </Grid.ColumnDefinitions>

                <Label Text="アカウント" Grid.Row="0" Grid.Column="0" />
                <!-- Entry の使用例 1 -->
                <Entry x:Name="entryAccount" Placeholder="enter Account..." Grid.Row="0" Grid.Column="1" />

                <Label Text="パスワード" Grid.Row="1" Grid.Column="0" />
                <!-- Entry の使用例 2 -->
                <Entry x:Name="entryPassword" IsPassword="true" Placeholder="enter Password..." Grid.Row="1" Grid.Column="1" />

                <!-- セル2個を結合する -->
                <StackLayout Orientation="Horizontal" Grid.Row="2" Grid.ColumnSpan="2">
                    <!-- [認証] と [クリア]ボタンの間隔 -->
                    <Button x:Name="Authentication" Text="認証" Margin="0,0,10,0" HorizontalOptions="CenterAndExpand"/>
                    <Button x:Name="Clear" Text="クリア" HorizontalOptions="CenterAndExpand"/>
                </StackLayout>
            </Grid>
        </ContentPage>

        <!-- 3つ目のタブ -->
        <ContentPage Title="タブ3" Padding="20">
            <StackLayout Padding="20" Spacing="15" BackgroundColor="White">
                <!-- SearchBar の使用例 -->
                <SearchBar x:Name="searchBar" Placeholder="keyword" CancelButtonColor="Red" TextColor="Black"/>
                <Label Text="検索結果:" FontSize="Small" FontAttributes="Bold" TextColor="Black"/>
                <Label x:Name="lblResult" TextColor="Black"/>
            </StackLayout>
        </ContentPage>

        <!-- 4つ目のタブ -->
        <ContentPage Title="タブ4" Padding="20">
            <StackLayout Padding="20" Spacing="15" BackgroundColor="White">
                <Label Text="OnPlatform Color Check!">
                    <Label.TextColor>
                        <!-- OnPlatform の使用例 1 -->
                        <OnPlatform x:TypeArguments="Color">
                            <OnPlatform.iOS>Blue</OnPlatform.iOS>
                            <OnPlatform.Android>Red</OnPlatform.Android>
                        </OnPlatform>
                    </Label.TextColor>
                </Label>

                <Label TextColor="Black">
                    <Label.Text>
                        <!-- OnPlatform の使用例 2 -->
                        <!-- x:TypeArgument はプラットフォームごとの振舞いの定義である -->
                        <OnPlatform x:TypeArguments="x:String">
                            <OnPlatform.iOS>
                                iOS!
                            </OnPlatform.iOS>
                            <OnPlatform.Android>
                                Android!
                            </OnPlatform.Android>
                        </OnPlatform>
                    </Label.Text>
                </Label>
            </StackLayout>
        </ContentPage>
    </TabbedPage.Children>
</TabbedPage>

 

MainPage.xaml

「タブ4」対応のための変更は無し。
従って
「タブ3」対応時のコードをそのまま使用すれば良い。