xamlを使わないレイアウトの覚書

はじめに

初投稿です。

初心者です。

この記事は[初心者さん・学生さん大歓迎！] Xamarin その2 Advent Calendar 2016 の22日目の記事となります。

いろいろ理解が足りない上に勢いだけで書いているので、間違っていたらご指摘をお願い致します。

Xamarinを始めた経緯

「お前来月からXamarinな」

ということで

今年の9月、勤務先にてアプリを作るチームにアサインされました。

この時点では、C#にさわったことすらありませんでした。

Xamarinレイアウトの覚書

xamlを使った方が良いのでは？

現在業務上でxamlを使用していない。

理由を訊いてみたところ

アプリのベース作成当時のXamarinStudioはxamlのレンダリングがイケてなかった

ということらしい。

大分良くなったらしいが、xamlに書き換える工数がないので慣れることにした

StackLayout

使用頻度

高

使い易さ

高

var layout = new StackLayout()
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Spacing = 0,
    Padding = new Thickness(0, 0, 0, 0),
    Children = {
        new StackLayout()
        {
            WidthRequest = 200,
            HeightRequest = 40,
        }
    }
};

var child = new relativeLayout(){};

layout.Children.Add(child);

↓こんな感じになる

↓ VerticalOptions を指定しない場合

スタックの名の通り、積み上げるレイアウト

最も高頻度で使っている

HorizontalOptions,VerticalOptions横位置・縦位置を調整できる

Children.Addで子要素を随時追加

他のレイアウトを入れれば、複雑なレイアウトにもできる

RelativeLayout

使用頻度

高

使い易さ

中

var layout = new RelativeLayout()
{
    WidthRequest = 200,
    HeightRequest = 40,
};

var buttonWidth = 40;
var buttonHeight = 40;
var child1 = new Image(){};
var child2 = new Image(){};
var child3 = new Image(){};

layout.Children.Add(
    child1,
    Constraint.RelativeToParent(parent => parent.Width * .5 - buttonWidth * 1.5), // X座標
    Constraint.RelativeToParent(parent => 0), // Y座標
);
layout.Children.Add(
    child2,
    Constraint.RelativeToParent(parent => parent.Width * .5 - buttonWidth * .5),
    Constraint.RelativeToParent(parent => 0),
);
layout.Children.Add(
    child3,
    Constraint.RelativeToParent(parent => parent.Width * .5 + buttonWidth * .5),
    Constraint.RelativeToParent(parent => 0),
);

指定できるオプションはそれほど大きく変わらない

特徴的なのは、子要素の座標指定

Grid

使用頻度

低

使い易さ

中

var layout = new Grid()
{
    HeightRequest = 40,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.End,
    ColumnSpacing = 4,
    Padding = new Thickness(4, 0, 8, 0),
    RowDefinitions =
    {
        // 縦方向のレイアウトを比率で指定
        new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
        new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
    },
    ColumnDefinitions =
    {
        // 横方向のレイアウトを比率で指定
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(2, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
    },
};

var child1 = new Image(){};
var child2 = new Image(){};
var child3 = new Image(){};
var child4 = new Image(){};

layout.Children.Clear();
layout.Children.Add(child1, 0, 0);
layout.Children.Add(child2, 1, 1);
layout.Children.Add(child3, 2, 1);
layout.Children.Add(child4, 3, 1);

これで、4*2マスのグリッドになる

比率での指定なので、セルのサイズに関する数値の計算は不要になる

子要素追加時に、対象セルを座標指定

業務上では、横並びのメニューなどで使用している

AbsoluteLayout

業務上使っておらず調査も途中なので、使ってみて追記したい