Xamarin.Formsのレイアウト(1) 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>