Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

初投稿です。

初心者です。

この記事は[初心者さん・学生さん大歓迎!] 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);

↓こんな感じになる

01.png

↓ VerticalOptions を指定しない場合
02.png

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

最も高頻度で使っている

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

03.png

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

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

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

04.png

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

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

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

AbsoluteLayout

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

aokym
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした