如何与约束水平对齐？答案

【问题标题】：How alignement horizontaly with constraints?如何与约束水平对齐？
【发布时间】：2019-12-05 05:34:35
【问题描述】：

我怎样才能水平对齐三个元素 [A B C] 一个在另一个之前有约束？

public static void AddConstraintsElements(UIView View, UIView element, UIView element2, UIView element3)
        {
            NSLayoutConstraint.ActivateConstraints(new[] {
                element.TopAnchor.ConstraintGreaterThanOrEqualTo(View.TopAnchor, constant: 20),
                element.LeadingAnchor.ConstraintGreaterThanOrEqualTo(View.LeadingAnchor, constant: 100),
                element.WidthAnchor.ConstraintGreaterThanOrEqualTo(View.WidthAnchor, 1),
                element.HeightAnchor.ConstraintGreaterThanOrEqualTo(View.HeightAnchor, 1),

                element2.BottomAnchor.ConstraintGreaterThanOrEqualTo(View.TopAnchor, constant: 20),
                element2.TrailingAnchor.ConstraintGreaterThanOrEqualTo(View.LeadingAnchor, constant: 120),
                element2.WidthAnchor.ConstraintGreaterThanOrEqualTo( 1),
                element2.HeightAnchor.ConstraintGreaterThanOrEqualTo( 1),

                element3.BottomAnchor.ConstraintGreaterThanOrEqualTo(View.TopAnchor, constant: 20),
                element3.TrailingAnchor.ConstraintGreaterThanOrEqualTo(View.LeadingAnchor, constant: 120),
                element3.WidthAnchor.ConstraintGreaterThanOrEqualTo( 1),
                element3.HeightAnchor.ConstraintGreaterThanOrEqualTo( 1)
            });
        }

第一个和第二个元素的其他情况，请删除第三个元素：

我试过了，还是不行

element1.WidthAnchor.ConstraintEqualTo(25).Active = true;
            element1.HeightAnchor.ConstraintEqualTo(element1.WidthAnchor).Active = true;

            element2.WidthAnchor.ConstraintEqualTo(30).Active = true;
            element2.HeightAnchor.ConstraintEqualTo(30).Active = true;



            element1.TrailingAnchor.ConstraintEqualTo(element2.LeadingAnchor).Active = true;

            element1.TopAnchor.ConstraintEqualTo(View.TopAnchor, 15).Active = true;
            element2.TopAnchor.ConstraintEqualTo(View.TopAnchor, 15).Active = true;

            element1.LeftAnchor.ConstraintEqualTo( View.CenterXAnchor).Active = true;
            element2.RightAnchor.ConstraintEqualTo(View.RightAnchor).Active = true;

【问题讨论】：

你想让它们水平填充视图，它们之间有一些边距还是应该是什么样子？从您的问题中不清楚您想要什么效果。
@Cheesebaron 他们之间没有任何边距
还不清楚，不妨快速画出你想要达到的效果。
仍然不清楚 A 的前沿和 C 的后沿是否接触到屏幕的边缘。如何确定高度？
所以你也想让它们在屏幕上居中？

标签： c# ios xamarin

【解决方案1】：

假设您想将它们对齐，例如：

+-----------------------------------------------+
|                       ^                       |
|                      120                      |
|                       v                       |
|       +---------++---------++---------+       |
|       |         ||         ||         |       |
|       |    A    ||    B    ||    C    |       |
|       |         ||         ||         |       |
|       +---------++---------++---------+       |
|                                               |
|                                               |
|                                               |

项目居中，距离顶部 120 点，并且它们具有固定的宽度和高度。你可以这样做：

// set widths and heights
a.WidthAnchor.ConstraintEqualTo(25).Active = true;
a.HeightAnchor.ConstraintEqualTo(a.WidthAnchor).Active = true;

b.WidthAnchor.ConstraintEqualTo(25).Active = true;
b.HeightAnchor.ConstraintEqualTo(b.WidthAnchor).Active = true;

c.WidthAnchor.ConstraintEqualTo(25).Active = true;
c.HeightAnchor.ConstraintEqualTo(c.WidthAnchor).Active = true;

// align B view as the middle view
b.CenterXAnchor.ConstraintEqualTo(View.CenterXAnchor).Active = true;

// align A to left of B
a.TrailingAnchor.ConstraintEqualTo(b.LeadingAnchor).Active = true;

// align C to right of B
c.LeadingAnchor.ConstraintEqualTo(b.TrailingAnchor).Active = true;

// align A, B and C, 120 points from the top
a.TopAnchor.ConstraintEqualTo(View.TopAnchor, 120).Active = true;
b.TopAnchor.ConstraintEqualTo(View.TopAnchor, 120).Active = true;
c.TopAnchor.ConstraintEqualTo(View.TopAnchor, 120).Active = true;

【讨论】：

【解决方案2】：

我会将 B 居中对齐，并将宽度设置为首选的高度，然后将 A 和 C 匹配为 B 的宽度、高度和垂直，并将空间 A 和 C 水平参考 B 作为首选。

所以

B -> 宽度、高度、垂直、水平

A -> 将宽度与 B 匹配，将高度与 B 匹配，将垂直与 B 匹配，根据 B 的位置设置水平（例如 -15 或其他）

C -> 将宽度与 B 匹配，将高度与 B 匹配，将垂直与 B 匹配，将水平设置为参考 B 的位置（例如 +15 或其他）

【讨论】：