Xamarin.Formsのレイアウト（１） StackLayout

はじめに

UIを作成する上でレイアウトは大切です。
適切なレイアウトを選択することで、使いやすいアプリケーションを作ることができます。

Xamarin.Formsでは以下の5つのレイアウトが用意されています。

• StackLayout
• AbsoluteLayout
• Grid
• RelativeLayout
• FlexLayout

今回利用するサンプルはこちらのClassmethodさんのブログに掲載されているC#のサンプルを元にしています。
それに加えてXAMLでの記述の仕方を併記しました。

今回はもっともシンプルなStackLayoutについてです。

StackLayout

名前のとおり、要素を積み上げていくレイアウト。
横方向、または縦方向に要素を積み上げていきます。

C＃

C#では以下のように記述します。
Orientationプロパティでコントロールを並べる方向を指定します。
何も指定しない場合は縦方向です。

• StackOrientation.Vertical（縦）
• StackOrientation.Horizontal（横）

using Xamarin.Forms;

namespace XamarinFormsUIPractice.Views
{
    public partial class StackLayoutCsharp : ContentPage
    {
        public StackLayoutCsharp()
        {
            InitializeComponent();

            var stackLayout = new StackLayout();
            stackLayout.Orientation = StackOrientation.Vertical;
            stackLayout.Padding = new Thickness(10, 10, 10, 10);
            stackLayout.Spacing = 5;
            stackLayout.Children.Add(new Label
            {
                FontSize = 30,
                Text = "First",
                HeightRequest = 100,
                BackgroundColor = Color.FromHex("82DADA"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Second",
                //VerticalOptions = LayoutOptions.FillAndExpand,//縦方向に余白を最大限に利用する
                HeightRequest = 200,
                BackgroundColor = Color.FromHex("53CF9E"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Third",
                HeightRequest = 300,
                BackgroundColor = Color.FromHex("EB6379"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Forth",
                HeightRequest = 400,
                BackgroundColor = Color.FromHex("53CF9E"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Fifth",
                HeightRequest = 500,
                BackgroundColor = Color.FromHex("EB6379"),
            });

            this.Content = stackLayout;
        }
    }
}

StackLayoutクラスのインスタンスのChildrenプロパティに要素をAddしていくと、その順番に並んでいきます。

各要素に指定した高さ、または幅で並んでいきますが、画面いっぱいになると、それぞれの高さの比率に基づいて調整されます。

StackLayoutにStackLayoutを入れ子にすることができます。

コメントアウトしてありますが、VerticalOptionsプロパティにLayoutOptions.FillAndExpandを指定すると他の要素が埋まった後に余ったサイズいっぱいになるように自動的に高さ（または幅）を調整してくれます。
例えば、上と下に高さ10の要素を作って真ん中は残り全部使うような指定をすることができます。

XAML

XAMLでは以下のように書きます。

    <StackLayout Padding="10,10,10,10" Spacing="5" Orientation="Vertical">
        <Label Text="First" FontSize="30" HeightRequest="100" BackgroundColor="#82DADA"/>
        <Label Text="Second" FontSize="30" HeightRequest="200" BackgroundColor="#53CF9E"/>
        <Label Text="Third" FontSize="30" HeightRequest="300" BackgroundColor="#EB6379"/>
        <Label Text="Forth" FontSize="30" HeightRequest="400" BackgroundColor="#53CF9E"/>
        <Label Text="Fifth" FontSize="30" HeightRequest="500" BackgroundColor="#EB6379"/>
    </StackLayout>