2016年

6月

08日

Xamarin.Froms  RelativeLayout レイアウト

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

X座標を指定した例
Constraint.Constant(120),

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

using Xamarin.Forms;

namespace RelativeLayout01
{
    public partial class Page1 : ContentPage
    {

        public Page1()
        {
            //リラティブレイアウトの生成
            var relativeLayout = new RelativeLayout();
            //ラベルの追加
            var label1 = new Label
            {
                Text = "label1",
                BackgroundColor = Color.Blue,
                FontSize = 58,
                XAlign = TextAlignment.Center,
                WidthRequest = 160
            };

            relativeLayout.Children.Add(label1,
                //X座標は、120
                Constraint.Constant(120),
                // Y座標は中央 (親要素との相対位置で配置)                         
                Constraint.RelativeToParent(parent => parent.Height / 2 - 60)
            );

            Content = relativeLayout;
        }
    }
}

label2 他の要素との相対位置で配置

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

using Xamarin.Forms;

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

            //リラティブレイアウトの生成
            var relativeLayout = new RelativeLayout();
            //ラベルの追加
            var label1 = new Label
            {
                Text = "label1",
                BackgroundColor = Color.Blue,
                FontSize = 60 };

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

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

            relativeLayout.Children.Add(label2,
                //X座標は、120
                Constraint.Constant(120),
                // Y座標は、label1の20下(他の要素との相対位置で配置)
                Constraint.RelativeToView(label1, (parent, sibling) => sibling.Y + sibling.Height + 20)
             );
           
            // relativeLayoutの配置
            Content = relativeLayout;
        }
    }
}

 

目 次