[Xamarin][CrossPlatform][Control] RelativeLayout

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}" />

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

他のコントロールを基準にする例

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.