Xamarin.Froms AbsoluteLayout レイアウト

AbsoluteLayout を使うと画像の上にボタンやラベルといったコントロールを重ねることができデバイスサイズや縦横に関わらず View の中心に配置したり非常に簡単に書けますのでお勧めです。絶対座標を計算しなくても良いので助かります。

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

HomePage.cs 追加

HomePage.cs Code例

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

using Xamarin.Forms;

namespace AbsoluteLayout02
{
public partial class HomePage : ContentPage
{
public HomePage()
{
//InitializeComponent();

BackgroundColor = Color.White;

AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
VerticalOptions = LayoutOptions.FillAndExpand
};

// BoxView を生成する
var boxView1 = new BoxView
{
Color = Color.Pink,// 塗りつぶし色
};

// BoxView を生成する
var boxView2 = new BoxView
{
Color = Color.Blue,// 塗りつぶし色
};

// BoxView を生成する
var boxView3 = new BoxView
{
Color = Color.Yellow,// 塗りつぶし色
};

// BoxView を生成する
var boxView4 = new BoxView
{
Color = Color.Purple,// 塗りつぶし色
};

// ラベルを配置
absoluteLayout.Children.Add(boxView1); // 上付き
absoluteLayout.Children.Add(boxView2); // 下付き
absoluteLayout.Children.Add(boxView3); // 左付き
absoluteLayout.Children.Add(boxView4); // 右付き

// 上付き
AbsoluteLayout.SetLayoutFlags(boxView1, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(boxView1, new Rectangle(0.5, 0, 1, 0.25));

// 下付き
AbsoluteLayout.SetLayoutFlags(boxView2, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(boxView2, new Rectangle(0.5, 1, 1, 0.25));

// 左付き
AbsoluteLayout.SetLayoutFlags(boxView3, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(boxView3, new Rectangle(0, 0.5, 0.25, 1));

// 右付き
AbsoluteLayout.SetLayoutFlags(boxView4, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(boxView4, new Rectangle(1, 0.5, 0.25, 1));

// absoluteLayoutを配置
Content = absoluteLayout;
}
}
}

App.cs の書き換え

App.cs

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

using Xamarin.Forms;

namespace AbsoluteLayout02
{
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new HomePage();
}

/// <summary>
/// アプリ起動時処理
/// </summary>
protected override void OnStart()
{
// Handle when your app starts
}

/// <summary>
/// アプリ中断時処理
/// </summary>
protected override void OnSleep()
{
// Handle when your app sleeps
}

/// <summary>
/// アプリ再開時処理
/// </summary>
protected override void OnResume()
{
// Handle when your app resumes
}
}
}