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

# はじめに

初投稿です。

初心者です。

この記事は[[初心者さん・学生さん大歓迎！] Xamarin その2 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/xamarin-welcome) の22日目の記事となります。

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

# Xamarinを始めた経緯

**「お前来月からXamarinな」**

ということで

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

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

# Xamarinレイアウトの覚書

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

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

理由を訊いてみたところ

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

ということらしい。

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

## StackLayout

<dl>
  <dt>使用頻度</dt>
  <dd>高</dd>
  <dt>使い易さ</dt>
  <dd>高</dd>
</dl>

	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);

↓こんな感じになる

![01.png](https://qiita-image-store.s3.amazonaws.com/0/152213/f26f5f02-0621-6921-10ae-a493e1d3446f.png)

↓ VerticalOptions を指定しない場合
![02.png](https://qiita-image-store.s3.amazonaws.com/0/152213/8a55474f-49f7-8a94-ebe8-c5b327969f3e.png)

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

最も高頻度で使っている

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

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

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

## RelativeLayout

<dl>
  <dt>使用頻度</dt>
  <dd>高</dd>
  <dt>使い易さ</dt>
  <dd>中</dd>
</dl>

	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),
	);

![03.png](https://qiita-image-store.s3.amazonaws.com/0/152213/c8bf962e-a173-3967-c168-313c1dfed17c.png)

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

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

## Grid

<dl>
  <dt>使用頻度</dt>
  <dd>低</dd>
  <dt>使い易さ</dt>
  <dd>中</dd>
</dl>

	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マスのグリッドになる

![04.png](https://qiita-image-store.s3.amazonaws.com/0/152213/0fcd17f2-3c82-b475-1560-245009de5e58.png)

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

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

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

## AbsoluteLayout

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