Question

我试图弄清楚如何正确布置一些物品在我的Xamarin.Forms项目的页面上。

我需要创建一个登录页面，图形布局应该如下所示：

我猜我应该使用Grid，但我很难搞清楚如何使用它。

我将如何创建呈现的布局？

注意：

这个问题并不是我想要的布局。我想要的布局但是会给我一个真实的样本来学习如何正确地做 Xamarin.Forms中的布局。

Answer 1

这是解决方案

public partial class ComplexRelativeLayoutPage : ContentPage
{
    public ComplexRelativeLayoutPage()
    {
        InitializeComponent();

        RelativeLayout layout = new RelativeLayout();

        Label topLabel = new Label
        {
            Text = "I am a label",
        };
        layout.Children.Add(topLabel,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - topLabel.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),
            Constraint.Constant(10)
            );


        Image blueImage = new Image
        {
            Source= ImageSource.FromResource("ButtonRendererDemo.Resources.test.jpg")
        };
        layout.Children.Add(blueImage,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - 300 / 2;
            }),
            Constraint.RelativeToView(topLabel, (parent, label) =>
            {
                 return label.Bounds.Bottom + 20;
            }),
            Constraint.Constant(300),
            Constraint.Constant(250)
        );

        Entry e1 = new Entry
        {
            Placeholder="Input Box 1",
        };
        layout.Children.Add(e1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 10; 
            }),
            Constraint.RelativeToView(blueImage, (parent, img) =>
            {
                return img.Bounds.Bottom + 20;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 20;
            })
        );

        Entry e2 = new Entry
        {
            Placeholder = "Input Box 2",
        };
        layout.Children.Add(e2,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 10;
            }),
            Constraint.RelativeToView(e1, (parent, e) =>
            {
                return e.Bounds.Bottom;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 20;
            })
        );

        Button bLeft = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Pink
        };
        layout.Children.Add(bLeft,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 20;
            }),
            Constraint.RelativeToView(e2, (parent, e) =>
            {
                return e.Bounds.Bottom;
            })
        );

        Button bRight1 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Pink
        };
        layout.Children.Add(bRight1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - bRight1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width - 20;
            }),
            Constraint.RelativeToView(bLeft, (parent, b) =>
            {
                return b.Y;
            })
        );

        Button bRight2 = new Button
        {
            Text = "Button",
            BackgroundColor=Color.Pink
        };
        layout.Children.Add(bRight2,
            Constraint.RelativeToView(bRight1, (parent, b) =>
            {
                return b.X;
            }),
            Constraint.RelativeToView(bRight1, (parent, b) =>
            {
                return b.Bounds.Bottom + 10;
            })
        );

        Button bBottom1 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Lime
        };
        layout.Children.Add(bBottom1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - bBottom1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),               
            Constraint.RelativeToView(bRight2, (parent, b) =>
            {
                return b.Bounds.Bottom + 20;
            })
        );

        Button bBottom2 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Lime
        };
        layout.Children.Add(bBottom2,
            Constraint.RelativeToView(bBottom1, (parent, b) =>
            {
                return b.X;
            }),
            Constraint.RelativeToView(bBottom1, (parent, b) =>
            {
                return b.Bounds.Bottom + 10;
            })
        );

        ScrollView v = new ScrollView
        {
            Content=layout
        };

        Content = v;
    }
}

Answer 2

我先试试StackLayout

<StackLayout>
  <Label />
  <Image />
  <Entry />
  <Entry />
  <StackLayout Orientation="Horizontal">
    <Button />
    <StackLayout>
      <Button />
      <Button />
    </StackLayout>
  </StackLayout>
  <Button />
  <Button />
</StackLayout>

在Xamarin.Forms布局的正确方法？

2 个答案: