xamarin - 如何在 Xamarin.Forms RelativeLayout 中水平居中 View ？

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

当你在做 相对布局 你有 约束 您可以指定。

要实现您的目标，您需要使用 相对父级 约束 首先，然后是 相对 View 约束 对于附加在第一个 View 右侧的第二个标签。

然后第一个 View 将在整个页面水平居中，并附加第二个标签 亲戚 之后的第一个 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:-

如果您不想使用指定的 宽度或者内容大小未知，则您必须通过调用 触发重新布局。 ForceLayout 在 相对布局 当 View 需要根据 重新定位时约束 你已经定义了。

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

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;