RelativeLayoutでChildrenを追加後に位置を変更する方法

Question

現在の状態

TabbedPageのような画面を作成中です。
以下はサンプルです。

var rel = new RelativeLayout();

var grid = new Grid
{
    BackgroundColor = Color.Navy,
};
for(int i = 1; i <= 3; i++)
{
    grid.Children.Add(new Button
    {
        Text = $"button{i}",
    },
    i - 1, 0);
}
rel.Children.Add(grid,
    Constraint.Constant(0),
    Constraint.RelativeToParent(parent => parent.Height - 50),
    Constraint.RelativeToParent(parent => parent.Width),
    Constraint.Constant(50)
);

var stack2 = new StackLayout
{
    BackgroundColor = Color.Gray,
    Children =
    {
        new Button { Text = "ボタン", }
    }
};
rel.Children.Add(stack2,
    Constraint.RelativeToParent(parent => parent.X),
    Constraint.RelativeToParent(parent => parent.Y),
    Constraint.RelativeToParent(parent => parent.Width),
    Constraint.RelativeToView(grid, (parent, sibling) => parent.Height - (sibling.Height))
);

MainPage = new ContentPage
{
    Content = rel,
};

やりたいこと、やってみたこと

横向きになったときに、レイアウトを変更したいと考えています。
画面イメージは下のような感じです。（※画面生成時の配置場所を変更しているため、あくまでも結果イメージです）

rel.SizeChanged を使用すれば画面の回転は検知できたのですが、
レイアウトを変更しようとしても、該当のメソッドがどれか見つけれませんでした。

画面生成時に行っていることをしてみようと思い、
RelativeLayoutのChildrenを削除し、改めて追加するようにしましたが、
削除でエラーが出てしました。

すでに存在しているオブジェクトの配置を移動させるにはどうしたらよいのでしょうか？

Answer 1

実は RelativeLayout.Children.Add(View, Constraint, Constraint, Constraint, Constraint) でConstraintを再セットすることが可能です。
(Viewを複数回Addしても重複登録されることはありません)

よって、回転のタイミングでConstraintを再セットして RelativeLayout.ForceLayout() コールするとレイアウトを変更できます。

// ルートのRelativeLayoutのサイズ変更タイミングで回転を判断する
rel.SizeChanged += (sender, e) =>
{
    if(rel.Width > rel.Height)
    {
        // 横向きレイアウト
        rel.Children.Add(grid,
            Constraint.RelativeToParent(parent => parent.Width - 50),
            Constraint.Constant(0),
            Constraint.Constant(50),
            Constraint.RelativeToParent(parent => parent.Height)
        );

        rel.Children.Add(stack2,
            Constraint.RelativeToParent(parent => parent.X),
            Constraint.RelativeToParent(parent => parent.Y),
            Constraint.RelativeToView(grid, (parent, sibling) => parent.Width - (sibling.Width)),
            Constraint.RelativeToParent(parent => parent.Height)
        );
    }
    else
    {
        // 縦向きレイアウト
        rel.Children.Add(grid,
            Constraint.Constant(0),
            Constraint.RelativeToParent(parent => parent.Height - 50),
            Constraint.RelativeToParent(parent => parent.Width),
            Constraint.Constant(50)
        );

        rel.Children.Add(stack2,
            Constraint.RelativeToParent(parent => parent.X),
            Constraint.RelativeToParent(parent => parent.Y),
            Constraint.RelativeToParent(parent => parent.Width),
            Constraint.RelativeToView(grid, (parent, sibling) => parent.Height - (sibling.Height))
        );
    }

    // レイアウト再計算
    rel.ForceLayout();
};

より厳密にデバイスの向きの変更をチェックしたい場合はリンク先のガイドを参考にしてください。

Checking Device Orientation - Xamarin

Comments

[randr]

わかりやすい説明ありがとうございました。
望み通りの動作を実現できました。