如何在 Xamarin.Forms RelativeLayout 中水平居中视图？

Question

我想在RelativeLayout 中的Xamarin.Forms 中将标签水平居中。我尝试了类似的方法，但它不起作用：

var label = new Label {HorizontalOptions = LayoutOptions.Center};

var rl = new RelativeLayout();

rl.Children.Add(label, Constraint.RelativeToParent((parent) => parent.Width / 2 - label.Width / 2));

我想在我的标签右侧放置第二个标签，而第一个标签水平居中。我怎样才能做到这一点？

Answer 1

当您执行 RelativeLayouts 时，您可以指定 约束。

要实现您的目标，您需要先使用 RelativeToParent Constraint，然后使用 RelativeToView Constraint 用于第二个 label，它附加在第一个 view 的右侧。

第一个 view 将在整个页面中水平居中，第二个 label 附加 relative 到第一个 view 之后。

以下示例显示了这一点：-

RelativeLayout objRelativeLayout = new RelativeLayout();

Label objLabel1 = new Label();
objLabel1.BackgroundColor = Color.Red;
objLabel1.Text = "This is a label";
objLabel1.WidthRequest = 300;
objRelativeLayout.Children.Add(objLabel1,
    xConstraint: Constraint.RelativeToParent((parent) =>
    {
        return ((parent.Width - objLabel1.Width) / 2);
    }));

Label objLabel2 = new Label();
objLabel2.BackgroundColor = Color.Blue;
objLabel2.Text = "Hi";
objLabel2.WidthRequest = 100;
objRelativeLayout.Children.Add(objLabel2,
    xConstraint: Constraint.RelativeToView(objLabel1,
    new Func<RelativeLayout, View, double>((pobjRelativeLayout, pobjView) =>
    {
        return pobjView.X + pobjView.Width;
    })));

this.Content = objRelativeLayout;

更新 1：-

如果您不想使用指定的 Width 或内容的大小未知，则必须通过调用 触发 重新布局当视图需要根据您定义的约束重新定位时，RelativeLayout上的>ForceLayout。 p>

下面的更新示例说明了这一点：-

StackLayout objStackLayout = new StackLayout()
{
    Orientation = StackOrientation.Vertical,
};

RelativeLayout objRelativeLayout = new RelativeLayout();
objStackLayout.Children.Add(objRelativeLayout);

Label objLabel1 = new Label();
objLabel1.BackgroundColor = Color.Red;
objLabel1.Text = "This is a label";
objLabel1.SizeChanged += ((o2, e2) =>
{
    objRelativeLayout.ForceLayout();
});
objRelativeLayout.Children.Add(objLabel1,
    xConstraint: Constraint.RelativeToParent((parent) =>
    {
        return ((parent.Width - objLabel1.Width) / 2);
    }));

Label objLabel2 = new Label();
objLabel2.BackgroundColor = Color.Blue;
objLabel2.Text = "Hi";
objRelativeLayout.Children.Add(objLabel2,
    xConstraint: Constraint.RelativeToView(objLabel1,
    new Func<RelativeLayout, View, double>((pobjRelativeLayout, pobjView) =>
    {
        return pobjView.X + pobjView.Width;
    })));

Button objButton1 = new Button();
objButton1.Text = "Test1";
objButton1.Clicked += ((o2, e2) =>
    {
        objLabel1.Text = "This is some other label text";
    });
objStackLayout.Children.Add(objButton1);

this.Content = objStackLayout;