TIPS:Xamarin.Forms:RelativeLayoutでコントロールを相対的に配置するには?Xamarin.Formsで、RelativeLayoutコントロールと各種のプロパティを使用して、画面のサイズなどに相対的にコントロールを配置する方法を解説する。2015以降Xamarin.FormsでUIコントロールを配置するとき、RelativeLayoutコントロール(Xamarin.Forms名前空間)を使えば位置やサイズを相対的に指定できる。本稿では、RelativeLayoutコントロールを使う記述方法と、動的に位置やサイズを変更する方法を解説する*1。2.2.0.45RelativeLayoutコントロールの使用例RelativeLayoutコントロールを使うと、異なる画面サイズに対して柔軟に変化するレイアウトを実現できる。次の画像は、同じ画面をサイズを変えて2つ並べたものだ。緑・赤・青色のコントロールの位置やサイズが、画面サイズに応じて変化しているのが分かるだろう。10)画面全体(灰色の部分)がRelativeLayoutコントロールだ。その中に3つのLabelコントロール(Xamarin.Forms名前空間)が配置してある。緑色のLabelコントロールは、親コントロール(=RelativeLayoutコントロール)に対して、幅50%/高さ15%のサイズにしている。位置は固定で、左から20epx/上から50epxだ。赤色のLabelコントロールは、緑色のLabelコントロールに対する相対指定になっている。幅は同じで高さは2倍だ。位置は、左端を緑色のLabelコントロールの左右中央に合わせ、上端は緑色のLabelコントロールの下端に合わせている。青色のLabelコントロールは、再び親コントロールに対する相対指定だ。高さは50epxで固定だが、幅を親コントロールに合わせている。位置は、親コントロールの下端に合わせている。配置したいUIコントロールに、位置/サイズのconstraint(制約)を指定する。constraintには、WidthConstraint添付プロパティ(幅)/HeightConstraint添付プロパティ(高さ)/XConstraint添付プロパティ(横位置)/YConstraint添付プロパティ(縦位置)の4つがある。constraintには、次の表に示すパラメータを指定する。例Type相対指定の基準にするコントロールのタイプ。constraintに指定するパラメータ実際の位置やサイズは、次式で計算した値になる。{Propertyパラメータで指定したプロパティの値}×{Factorパラメータの値}+{Constantパラメータの値}実際の例として、冒頭に掲げた画面のXAMLコードを示す(次のコード)。/></RelativeLayout>RelativeLayoutコントロール内にLabelコントロールを配置する例(XAML)この他に、Labelコントロールに文字位置などを指定するスタイル定義が必要だが、ここでは省略させていただく。RelativeLayoutコントロールに「"RelativeLayout1"」、3つ目のLabelコントロールに「"Label3"」という名前を付けてある。ここまでの話だけなら、これらの名前は不要である。次に解説する動的変更のコードで使用する。レイアウトを動的に変更するRelativeLayoutコントロール内に配置したUIコントロールの位置やサイズは、後から動的に変更できる。それには、RelativeLayoutクラスのSetBoundsConstraintメソッドを使う。上述の画面で下端にある青いラベル(=Label3)の位置を、画面が横長のときに右端へ移動させるには、コードビハインドのSizeChangedイベントハンドラーを次のコードのように記述する。}}画面サイズが変わったときにLabel3の位置を変える(C#)画面が横長のときは、Label3を右端に移動させている。RuntimeのVisualStateManagerクラスとは異なり、初期状態へ戻すときもコードを書かねばならない(else句以降)。このような場合、XAMLコードの重複するconstraint記述は削除した方がよいだろう。実行してみると次からの画像のようになる。Androidでの実行結果。Simulatorでの実行結果。Editionを使っているため、本稿ではMac上のSimulatorでの画面キャプチャーとなっている)。Windows」を参照されたい。次が画面を横長にした場合だ。Androidでの実行結果。Simulatorでの実行結果。Editionを使っているため、本稿ではMac上のSimulatorでの画面キャプチャーとなっている)。Windows」を参照されたい。まとめRelativeLayoutコントロールは、その中に配置するUIコントロールの位置やサイズを相対的に指定する。コードビハインドで後から動的に位置やサイズを変更できる。メールマガジンをご購読ください。Japanスマートジャパン3Dモデラボキャリア@IT自分戦略研究所エンジニアライフディルバートアプリITmediaねとらぼねこらぼついトピ!ITmediaはアイティメディア株式会社の登録商標です。