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

 

目 次