概要

Xamarin.Formsには、任意の位置にControlを配置できるAbsolute Layoutというものがあるので、これを使って、好きな場所にControlを置く方法を調べました。

環境

  • Xamarin.Forms 2.3.3.180
  • MacOS Sierra 10.12.2
  • Visual Studio for Mac

Absolute Layoutとは

Absolute Layoutは、Xamarin.Formsで使えるLayoutのひとつで、0から1の実数を指定してControlの配置を決定できます。

今回の例として、Xamlファイルはこのように用意します。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="******">
    <ContentPage.Content>
        <AbsoluteLayout x:Name="absoluteLayout">
            <StackLayout Padding="0,20,0,0" Orientation="Vertical" VerticalOptions="Start">
                <Label Text="Test" VerticalOptions="Start" />
            </StackLayout>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

Contentとして、AbsoluteLayoutを用意して、その中にStackLayoutを配置しています。

AbsoluteLayoutはx:NameでabsoluteLayoutという名前で、この後のプログラムで参照できるようにしています。

さらに、AbsoluteLayoutの中にStackLayoutなどのLayoutを書いておくと、AbsoluteLayoutがないのと同じように、いつも通りのLayoutを用意できます。

それでは、AbsoluteLayoutを使って、Controlを配置していきます。

配置

AbsoluteLayoutでは、大きくこの流れでControlを追加していきます。

  1. Controlを用意する
  2. Controlの配置する位置を決定する
  3. LayoutにControlを追加する

2番と3番は順番が逆でも大丈夫です。

今回は、例としてボタンを追加します。

実際に追加したものが下記のプログラムです。

// Controlの用意
Button button = new Button {
    Text = "Button"
};

// Controlの配置位置の決定
AbsoluteLayout.SetLayoutFlags(button, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(button, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

//LayoutにControlを追加
absoluteLayout.Children.Add(button);

Controlの用意は、いつも通りです。

次に、Controlの配置位置の決定ですが、方法としてAbsoluteLayout名前空間のSetLayoutFlags()とSetLayoutBounds()を使います。

SetLayoutFlags()は、第一引数に配置するControlを指定し、第二引数ではSetLayoutBounds()で指定するRectangleの解釈を設定するためにあります。今回は、デフォルトで定義されているものを使うので第二引数にはAbsoluteLayoutFlags.PositionProportionalを指定します。

実際に、Controlを位置を決定するのはSetLayoutBounds()です。

第一引数には配置するControlを指定し、第二引数には位置を指定します。位置はRectangleを使って示し、Rectangleの第一引数と第二引数には、配置するControlの中央の位置をx座標・y座標の順に指定し、第三引数と第四引数には、幅や高さを指定します。

幅や高さには今回、AbsoluteLayout.AutoSizeを使用しました。指定したControlの幅や高さをそのまま使うために、縮尺が崩れることなく表示されるというものです。

ここで注意しなければならないのが、x座標やy座標は画面のサイズの割合として、0から1の実数で指定します。なので、0とすれば、x座標の場合は一番左に、y座標の場合は一番上に配置されます。

最後に、XamlでAbsoluteLayoutの名前としてabsoluteLayoutを指定したので、そのabsoluteLayoutに、absoluteLayout.Children.Add(button) のようにして、Controlを追加します。

これを実行すると、iPhoneのシミュレータで実行した結果が下の図です。

normal_b33af80e-01b4-4907-a4e4-6cfd3575ec0a.png

まとめ

AbsoluteLayoutは、SetLayoutFlags()やSetLayoutBounds()の使い方で色々な配置方法が指定できます。

今回は、既に用意されているものを使いましたが、自分でも設定できるので、もし色々な使い方をしたい場合は調べてみるといいかもしれません。