2016年

5月

26日

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

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

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

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 AbsoluteLayout01
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            //InitializeComponent();

            BackgroundColor = Color.Blue;

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

            // Labelを生成する
            Label label = new Label
            {
                Text = "中心",
                FontSize = 40,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label1 = new Label
            {
                Text = "左上",
                FontSize = 40,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label2 = new Label
            {
                Text = "右上",
                FontSize = 40,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label3 = new Label
            {
                Text = "左下",
                FontSize = 40,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label4 = new Label
            {
                Text = "右下",
                FontSize = 40,
                TextColor = Color.Yellow,
            };

            // ラベルを配置
            absoluteLayout.Children.Add(label); // 中心
            absoluteLayout.Children.Add(label1); // 左上
            absoluteLayout.Children.Add(label2); // 右上
            absoluteLayout.Children.Add(label3); // 左下
            absoluteLayout.Children.Add(label4); // 右下

            // 中心
            AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 左上
            AbsoluteLayout.SetLayoutFlags(label1, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label1, new Rectangle(0, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 右上
            AbsoluteLayout.SetLayoutFlags(label2, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label2, new Rectangle(1, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
                       
            // 左下
            AbsoluteLayout.SetLayoutFlags(label3, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label3, new Rectangle(0, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 右下
            AbsoluteLayout.SetLayoutFlags(label4, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label4, new Rectangle(1, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

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

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

using Xamarin.Forms;

namespace AbsoluteLayout01
{
    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            //InitializeComponent();

            BackgroundColor = Color.Blue;

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

            // Labelを生成する
            Label label = new Label
            {
                Text = "中心(0.5,0.5)",
                FontSize = 22,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label1 = new Label
            {
                Text = "左上(0,0)",
                FontSize = 24,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label2 = new Label
            {
                Text = "右上(1,0)",
                FontSize = 24,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label3 = new Label
            {
                Text = "左下(0,1)",
                FontSize = 24,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label4 = new Label
            {
                Text = "右下(1,1)",
                FontSize = 24,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label01 = new Label
            {
                Text = "上(0.5,0)",
                FontSize = 24,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label02 = new Label
            {
                Text = "左中心(0,0.5)",
                FontSize = 22,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label03 = new Label
            {
                Text = "右中心(1,0.5)",
                FontSize = 22,
                TextColor = Color.Yellow,
            };

            // Labelを生成する
            Label label04 = new Label
            {
                Text = "下(0.5,1)",
                FontSize = 24,
                TextColor = Color.Yellow,
            };

            // ラベルを配置
            absoluteLayout.Children.Add(label); // 中心
            absoluteLayout.Children.Add(label1); // 左上
            absoluteLayout.Children.Add(label2); // 右上
            absoluteLayout.Children.Add(label3); // 左下
            absoluteLayout.Children.Add(label4); // 右下

            absoluteLayout.Children.Add(label01); // 上
            absoluteLayout.Children.Add(label02); // 左中心
            absoluteLayout.Children.Add(label03); // 右中心
            absoluteLayout.Children.Add(label04); // 下
                        
            // 左上
            AbsoluteLayout.SetLayoutFlags(label1, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label1, new Rectangle(0, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 上
            AbsoluteLayout.SetLayoutFlags(label01, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label01, new Rectangle(0.5, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 右上
            AbsoluteLayout.SetLayoutFlags(label2, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label2, new Rectangle(1, 0, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 左中心
            AbsoluteLayout.SetLayoutFlags(label02, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label02, new Rectangle(0, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 中心
            AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 右中心
            AbsoluteLayout.SetLayoutFlags(label03, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label03, new Rectangle(1, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 左下
            AbsoluteLayout.SetLayoutFlags(label3, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label3, new Rectangle(0, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 下
            AbsoluteLayout.SetLayoutFlags(label04, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label04, new Rectangle(0.5, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

            // 右下
            AbsoluteLayout.SetLayoutFlags(label4, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(label4, new Rectangle(1, 1, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

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

 

目 次