Xamarin.Froms RelativeLayout レイアウト左上・上・右上・左・中心・右・左下・下・右下

リラティブレイアウトは、子要素を相対的に配置するレイアウトです。

ファイル --> 新規作成 --> プロジェクト(P)... --> Cross-Platform --> Xamarin-Forms で作成
RelativeLayout02

HomePage.cs 追加

HomePage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace RelativeLayout02
{
public partial class HomePage : ContentPage
{
public HomePage()
{
BackgroundColor = Color.White;

//リラティブレイアウトの生成
var relativeLayout = new RelativeLayout();

//ラベル左上
var label0L = new Label
{
Text = "左上",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベル右上
var label0R = new Label
{
Text = "右上",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベル上
var label0 = new Label
{
Text = "上",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベル左
var label1L = new Label
{
Text = "左",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベル中心
var label1 = new Label
{
Text = "中心",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベル右
var label1R = new Label
{
Text = "右",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベル左下
var label2L = new Label
{
Text = "左下",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベルの追加
var label2 = new Label
{
Text = "下",
BackgroundColor = Color.Blue,
FontSize = 30
};

//ラベル右下
var label2R = new Label
{
Text = "右下",
BackgroundColor = Color.Blue,
FontSize = 30
};

// 左上
relativeLayout.Children.Add(
label0L,
Constraint.RelativeToParent(parent => parent.Width * 0 - 0),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height * 0 + 0)
);

// 上
relativeLayout.Children.Add(
label0,
Constraint.RelativeToParent(parent => parent.Width * .5 - 15),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height * 0 + 0)
);

// 右上
relativeLayout.Children.Add(
label0R,
Constraint.RelativeToParent(parent => parent.Width * 1 - 60),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height * 0 + 0)
);

// 左
relativeLayout.Children.Add(
label1L,
Constraint.RelativeToParent(parent => parent.Width * 0 - 0),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height / 2 - 30)
);

// 中心
relativeLayout.Children.Add(
label1,
Constraint.RelativeToParent(parent => parent.Width * .5 - 30),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height / 2 - 30)
);

// 右
relativeLayout.Children.Add(
label1R,
Constraint.RelativeToParent(parent => parent.Width * 1 - 30),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height / 2 - 30)
);

// 左下
relativeLayout.Children.Add(
label2L,
Constraint.RelativeToParent(parent => parent.Width * 0 - 0),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height - 40)
);

// 下
relativeLayout.Children.Add(
label2,
Constraint.RelativeToParent(parent => parent.Width * .5 - 15),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height - 40)
);

// 右下
relativeLayout.Children.Add(
label2R,
Constraint.RelativeToParent(parent => parent.Width * 1 - 60),
// Y座標は中央 (親要素との相対位置で配置)
Constraint.RelativeToParent(parent => parent.Height - 40)
);

// relativeLayoutの配置
Content = relativeLayout;
}
}
}