[Xamarin][CrossPlatform][Control] RelativeLayout

2016.11.15

RelativeLayoutは、コントロールを相対的に配置するためのコンテナコントロールです。

本記事のコードを試したい方は、新規プロジェクトの作成でBlank Xaml App(Xamarin.Froms Portable)を選択し、RelativeLayoutSampleという名前のプロジェクトを作成してください。

制約

RelativeLayout内に配置したコントロールには、制約を付けることができます。制約とは、基準としたコントロールからどのくらいの値で幅や高さを設定するのかを示すものです。

制約は添付プロパティで表し、基準コントロールからの左端からの位置、上部からの位置、幅、高さを設定することができます。

それぞれの添付プロパティを表に示します。

添付プロパティ	説明
RelativeLayout.XConstraint	左端からの位置
RelativeLayout.YConstraint	上部からの位置
RelativeLayout.WidthConstraint	幅
RelativeLayout.HeightConstraint	高さ

また、上の表に示した添付プロパティには、以下表に示すプロパティの設定をすることができます。

プロパティ	値
ConstraintExpression Type	親要素を基準にして相対的に配置したい場合はRelativeToParentを指定します。他の子要素を指定したい場合はRelativeToViewを指定します。
Property	基準とする親要素または子要素のプロパティ名を設定します。このプロパティの値に基づいて自分自身の値を決定します。
Factor	Propertyに設定したプロパティに対する倍率を設定します。
Constant	基準とする親要素または子要素からのオフセット値を設定します。

親コントロールを基準にした配置

それでは、親コントロールを基準にしてコントロールを相対的に配置する方法を見てみましょう。

以下は、RelativeLayoutを親コントロールとして青いボックスを配置する例です。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:RelativeLayoutSample"
             x:Class="RelativeLayoutSample.MainPage">

  <RelativeLayout>
    
      <!-- 青のボックス -->
      <BoxView x:Name="blueBox" Color="Blue" 
          RelativeLayout.XConstraint =
            "{ConstraintExpression Type=RelativeToParent,
              Property=Width,
              Factor=0.25,
              Constant=0}"
  
          RelativeLayout.YConstraint =
            "{ConstraintExpression 
              Type=RelativeToParent,
              Property=Height,
              Factor=0.25,
              Constant=0}" 
  
          RelativeLayout.WidthConstraint =
            "{ConstraintExpression 
              Type=RelativeToParent,
              Property=Width,
              Factor=0.5,
              Constant=0}" 
          RelativeLayout.HeightConstraint =
            "{ConstraintExpression 
              Type=RelativeToParent,
              Property=Height,
              Factor=0.5,
              Constant=0}"/>
  </RelativeLayout>

</ContentPage>

実行例を以下に示します。

この例では、Boxの左端の位置をRelativeLayoutの0.25、上部からの位置も0.25としています。Boxの幅と高さはRelativeLayoutの0.5になるようにしています。

他のコントロールを基準にした配置

続いて、他のコントロールを基準に相対配置する例を見てみましょう。

ここでは、先ほどの緑のボックスを基準として赤いボックスを配置することとします。

他のコントロールを基準にするには、RelativeLayout.XConstraintやRelativeLayout.YConstraintのConstraintExpressionプロパティにRelativeViewを設定します。

ElementNameにblueBox（青いボックスに付けた名前）を指定することで、青いボックスを基準にします。

Propertyには、青いボックスのどのプロパティを基準にするのかを設定します。

Factorは倍率、Constantは位置を表しますので、左端から10/上部から10の位置に赤いボックスが描画されます。

<!-- 赤のボックス -->
<BoxView Color="Red" 
  WidthRequest="50" 
  HeightRequest="50"
  RelativeLayout.XConstraint =
    "{ConstraintExpression 
      Type=RelativeToView,
      Property=X,
      Factor=1,
      Constant=10,
      ElementName=greenBox}"
  RelativeLayout.YConstraint =
    "{ConstraintExpression 
      Type=RelativeToView,
      Property=Y,
      Factor=1,
      Constant=10,
      ElementName=greenBox}" />

実行例を以下に示します。