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

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

 

環境

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

  • Windows 10
  • Visual Studio 2017

 

概要

レイアウトコントロール系の使用例。
 

StackLayout の使用例

StackLayout は縦方向にコントロールを積み上げて配置する。
 

プロジェクト作成

f:id:dnkrnka:20181104212652p:plain:w200
 

使用例

f:id:dnkrnka:20181104212342p:plain:w250
 

実装

変更したページは MainPage.xaml のみ。

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:StackLayoutSample"
             x:Class="StackLayoutSample.MainPage">

  <StackLayout Padding="20" Spacing="15">
    <!-- Place new controls here -->
    <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
    <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
    <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
    <StackLayout Padding="20, 40, 60, 80" Spacing="5" BackgroundColor="Silver">
      <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
      <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
      <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
    </StackLayout>
  </StackLayout>

</ContentPage>

 
 
 
 
 
 

StackLayout (Horizon) の使用例

通常は縦方向の StackLayout を横方向にコントロールを積み上げて配置する例。
 

プロジェクト作成

f:id:dnkrnka:20181104212652p:plain:w200
 

使用例

下図は横方向にスマホを回転させた状態である。
f:id:dnkrnka:20181104215146p:plain:w250
 

実装

変更したページは MainPage.xaml のみ。

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:StackLayoutSample"
             x:Class="StackLayoutSample.MainPage">

  <StackLayout Orientation="Horizontal">
    <!-- 左側の StackLayout -->
    <StackLayout Orientation="Vertical" Padding="10" BackgroundColor="Silver">
      <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
      <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
    </StackLayout>
    <!-- 右側の StackLayout -->
    <StackLayout Orientation="Vertical" Padding="10" BackgroundColor="Silver">
      <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
      <Label Text="Hello, CrossplatForm development!!" BackgroundColor="Aqua" />
    </StackLayout>
  </StackLayout>
</ContentPage>

 
 
 
 
 
 

AbsoluteLayout の使用例

デバイスの左上を起点とした位置に指定したサイズでコントロールを配置する。
 

プロジェクト作成

f:id:dnkrnka:20181104221559p:plain
 

使用例

f:id:dnkrnka:20181104221540p:plain:w250
 

実装

変更したページは MainPage.xaml のみ。

MainPage.xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ABSLayoutSample"
             x:Class="ABSLayoutSample.MainPage">
  <AbsoluteLayout>
    <Label Text="左20, 上20, 幅150, 高70" BackgroundColor="Aqua" AbsoluteLayout.LayoutBounds="20,20,150,70" />
    <Label Text="左80, 上60, 幅200, 高200" BackgroundColor="Lime" AbsoluteLayout.LayoutBounds="80,60,200,200" />
    <Label Text="左100, 上200, 幅250, 高350" BackgroundColor="Green" AbsoluteLayout.LayoutBounds="100,200,250,350" />
  </AbsoluteLayout>
</ContentPage>

 
 
 
 
 
 

RelativeLayout の使用例

RelativeLayout は、子要素を相対的に配置するレイアウトコントロールであり、配置方法として次の2つがある。

  • 親のコントロールを基準にする
  • 子のコントロールを基準にする

 
RelativeLayout 内に配置したコントロールは次のような制約を付けることができる。

意味 プロパティ
左端からの位置を表す RelativeLayout.XConstraint
上端からの位置を表す RelativeLayout.YConstraint
幅を表す RelativeLayout.WidthConstraint
高を表す RelativeLayout.HeightConstraint

 
そしてこれらのプロパティには下表のプロパティを設定することができる。

プロパティ
ConstraintExpression Type RelativeToParent を指定した場合は親要素を基準にする。
RelativeToView を指定した場合は他の子要素を基準にする。
Property 基準とする親要素または子要素のプロパティ名を設定する。
Factor Property に設定したプロパティに対する倍率を設定する。
Constant 基準とする親要素または子要素からのオフセット値を設定する。

 

プロジェクト作成

f:id:dnkrnka:20181104224050p:plain:w250
 

使用例

  • 緑色のボックスは親要素である RelativeLayout コントロールを基準にしている
    • RelativeToParent を設定している
    • Factor が 0.5 、Constant が 0 なので、緑色ボックスの X座標は RelativeLayout の Width を 0.5倍した位置になる。
    • Factor が 0.5 、Constant が 0 なので、緑色ボックスの Y座標は RelativeLayout の Height を 0.5倍した位置になる。
    • Factor が 0.25 、Constant が 0 なので、緑色ボックスの幅は RelativeLayout の WidthConstraint の 0.25倍した値になる。
    • Factor が 0.25 、Constant が 0 なので、緑色ボックスの高は RelativeLayout の HeightConstraint の 0.25倍した値になる。
  • 赤色のボックスは緑色のボックスを基準にしている
    • RelativeToView を設定している

f:id:dnkrnka:20181104224028p:plain:w250
 

実装

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RelativeLayoutSample"
             x:Class="RelativeLayoutSample.MainPage">

  <RelativeLayout>
    <!-- 緑色のボックス -->
    <!-- 矩形を描画する BoxView を使う -->
    <BoxView x:Name="greenBox" Color="Green"
           RelativeLayout.XConstraint="{ ConstraintExpression
                                          Type=RelativeToParent,
                                          Property=Width,
                                          Factor=0.5,
                                          Constant=0}"

           RelativeLayout.YConstraint="{ ConstraintExpression
                                          Type=RelativeToParent,
                                          Property=Height,
                                          Factor=0.5,
                                          Constant=0}"

           RelativeLayout.WidthConstraint="{ ConstraintExpression
                                          Type=RelativeToParent,
                                          Property=Width,
                                          Factor=0.25,
                                          Constant=0}"

           RelativeLayout.HeightConstraint="{ ConstraintExpression
                                          Type=RelativeToParent,
                                          Property=Height,
                                          Factor=0.25,
                                          Constant=0}"/>

    <!-- 赤色のボックス -->
    <BoxView Color="Red" WidthRequest="50" HeightRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression
                                          Type=RelativeToView,
                                          Property=X,
                                          Factor=1,
                                          Constant=10,
                                          ElementName=greenBox}"

             RelativeLayout.YConstraint="{ConstraintExpression
                                          Type=RelativeToView,
                                          Property=Y,
                                          Factor=1,
                                          Constant=10,
                                          ElementName=greenBox}" />
  </RelativeLayout>
</ContentPage>

 
 

Grid の使用例

使用例

縦方向 横方向
f:id:dnkrnka:20181117193715p:plain:w200 f:id:dnkrnka:20181117193634p:plain:w400

 

実装

MainPage.xaml のみの変更である。

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:GridSample"
             x:Class="GridSample.MainPage">

  <Grid Padding="10,30,10,30">
    <!-- 行の定義 -->
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="50"/>
      <RowDefinition Height="60"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- 列の定義 -->
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- 1行目 -->
    <Label Text="Row=0, Column=0" BackgroundColor="Aqua" Grid.Row="0" Grid.Column="0"/>
    <Label Text="Row=0, Column=1" BackgroundColor="Lime" Grid.Row="0" Grid.Column="1"/>

    <!-- 2行目 -->
    <Label Text="Row=1, Column=0, ColumnSpan=2" BackgroundColor="Silver" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>

    <!-- 3行目 -->
    <Label Text="Row=2, Column=0, RowSpan=2" BackgroundColor="Aqua" Grid.Row="2" Grid.Column="0" Grid.RowSpan="2"/>
    <Label Text="Row=2, Column=1" BackgroundColor="Lime" Grid.Row="2" Grid.Column="1" />

    <!-- 4行目 -->
    <Label Text="Row=3, Column=1" BackgroundColor="Lime" Grid.Row="3" Grid.Column="1" />

  </Grid>
</ContentPage>

 
 

ContentView の使用例

ContentView はコントロールを1つだけ配置できるコントロールである。
  

プロジェクト作成

f:id:dnkrnka:20181117155514p:plain
 

使用例

起動時(Small) Large 選択時
f:id:dnkrnka:20181117155441p:plain:w300 f:id:dnkrnka:20181117155424p:plain:w300

 

実装

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ContentViewSample"
             x:Class="ContentViewSample.MainPage">
  <Grid Margin="10,30,10,10">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <StackLayout Orientation="Horizontal" Grid.Row="0">
      <Button x:Name="btnSizeSmall" Text="サイズ小"/>
      <Button x:Name="btnSizeLarge" Text="サイズ大"/>
    </StackLayout>
    <ContentView Grid.Row="1" x:Name="contentView" Padding="10,30,10,10" HeightRequest="200">
      <Label x:Name="lblContent" BackgroundColor="Aqua"/>
    </ContentView>
  </Grid>

</ContentPage>

 

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

namespace ContentViewSample
{
  public partial class MainPage : ContentPage
  {
    public MainPage()
    {
      InitializeComponent();

      lblContent.Text = "Xamarin によるクロスプラットフォーム開発は" +
        "Windows は Visual Studio, Mac は Xamarin Studio を使用します";

      btnSizeSmall.Clicked += ( sender, e ) =>
      {
        // 高さを 200 に設定する
        contentView.HeightRequest = 200;
      };

      btnSizeLarge.Clicked += (sender, e) =>
      {
        // 高さを 500 に設定する
        contentView.HeightRequest = 500;
      };
    }
  }
}

 
 

ScrollView の使用例

ScrollView は画面からはみ出すようなレイアウトをスクロールして表示できるようにするコントロールである。
 

使用例

各ボタンを押すと下方向にスクロールする。

起動時 「中段へ移動」押下直後 「中段へ移動」完了後 「指定位置へ移動」完了後
f:id:dnkrnka:20181117171549p:plain:w200 f:id:dnkrnka:20181117171802p:plain:w200 f:id:dnkrnka:20181117171653p:plain:w200 f:id:dnkrnka:20181117171852p:plain:w200

 

プロジェクト作成

f:id:dnkrnka:20181117160355p:plain
 

プロジェクト構成

 

実装

MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ScrollViewSample"
             x:Class="ScrollViewSample.MainPage">

  <StackLayout Margin="10,30,10,10">
    <StackLayout Orientation="Horizontal">
      <Button x:Name="btnMoveMid" Text="中段へ移動"/>
      <Button x:Name="btnMove700" Text="指定位置へ移動"/>
    </StackLayout>

    <ScrollView x:Name="scrollView">
      <StackLayout>
        <Label Text="最上部のラベル"/>
        <BoxView HeightRequest="500" BackgroundColor="Lime"/>
        <Label x:Name="lblMiddle" Text="中段ラベル" />
        <BoxView HeightRequest="500" BackgroundColor="Lime"/>
        <Label Text="最下部のラベル" />
      </StackLayout>
    </ScrollView>
  </StackLayout>

</ContentPage>

 

MainPage.xaml.cs

下記 ScrollToAsync() の第 2 引数について

説明
Center ScrollView 内の中心に表示する
End ScrollView 内の最下部または右端に表示する
MakeVisible 指定した項目が ScrollView 内に表示されるようにスクロールする
Start ScrollView 内の最上部または左端に表示する

 

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

namespace ScrollViewSample
{
  public partial class MainPage : ContentPage
  {
    public MainPage()
    {
      InitializeComponent();

      btnMoveMid.Clicked += ( sender, e ) =>
      {
        scrollView.ScrollToAsync( lblMiddle, ScrollToPosition.Start, true );
      };

      btnMove700.Clicked += ( sender, e ) =>
      {
        scrollView.ScrollToAsync( 0, 700, true );
      };
    }
  }
}

 
 

Frame の使用例

任意のコントロールに枠線を付ける。ただし、Android の場合はデフォルトで枠線が付いてしまう。
 

使用例

f:id:dnkrnka:20181117174230p:plain:w300
 

実装例

変更したコードは MainPage.xaml のみである。
 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FrameSample"
             x:Class="FrameSample.MainPage">

  <StackLayout Margin="10,30,10,10">

    <Label Text="フレームなし" />

    <Frame OutlineColor="Gray" HasShadow="false">
      <Label Text="フレームあり・影なし"/>
    </Frame>

    <Frame OutlineColor="Gray" >
      <Label Text="フレームあり"/>
    </Frame>

    <Button Text="フレームなしボタン"/>

    <Frame OutlineColor="Blue" HasShadow="false">
      <Label Text="フレームあり・影なし"/>
    </Frame>

    <Frame OutlineColor="Blue">
      <Label Text="フレームあり"/>
    </Frame>

  </StackLayout>

</ContentPage>