当 space 受到限制时,减少元素之间 space 的数量
Decrease amount of space between elements when space is restricted
想象一下您并排放置三个按钮的情况。您希望这三个按钮填充可用宽度,并且是具有最小尺寸集的完美正方形,它们之间的设置数量为 space。要进行此设置,您将有以下限制条件:
答:
1:1 与 A 的比率
通往superview
宽度和高度 >= 25
乙:
等于 A
的宽度和高度
通向 A:50
C:
等于 A
的宽度和高度
通往 B: 50
尾随到超级视图
现在假设可用宽度足够小以至于没有足够的水平 space 以确保按钮是一个完美的正方形,每个按钮之间有 50 个。您不想打破纵横比和宽度约束,而是希望减少按钮之间的 space 数量。我的问题是,你是怎么做到的?
我想我只是将主要约束的关系更改为小于或等于,但这会导致这两个约束的不等式约束歧义。我想也许我需要为前导指定一个最小值,所以我又添加了两个设置为大于或等于 10 的前导约束。这并没有解决歧义。然后我添加了另一组前导约束,这次等于两个值之间的设定值,然后我降低了它们的优先级。这解决了歧义,但是按钮之间的 space 永远不会减少 - 尽管优先级降低,但它始终是我为具有 equals 约束的约束设置的值。
需要设置什么约束才能得到这个?
- 三个按钮并排显示在同一水平线上space
- 三个按钮都是正方形
- 按钮的最小尺寸 (25x25)
- 他们之间的固定数量 space - 50
- 当横向space太小,不能保证全部满足约束时,应该减少按钮之间的space量。
尝试为每个按钮制作内容模式 UIViewContentModeScaleAspectFit
或 IB 所称的任何内容。然后控制space之间使用宽度代替leading
。我猜想点击之间的 space 会调用按钮的目标,因此在这种情况下,以这种方式使用三个常规 UIView,然后将按钮添加为它们的子视图。
您可能需要一个具有所需优先级的间距约束,以表示允许的最小间距。例如 >= 10 @1000.
然后,您需要一个较低优先级的间距约束,用等式表示所需的间距,例如 == 50 @200。
但是,您有两个交互按钮 space。歧义的出现是因为当没有足够的 space 来实现所需的距离时,自动布局不知道要减少哪个。
您可以设置不同的优先级来解决歧义,但随后一个间距会缩小,而另一个间距保持在 50,直到达到最小值,此时另一个间距也会缩小。
我怀疑您希望两个 space 始终相等。没有直接的方法可以仅通过约束来做到这一点。相反,您需要使用隐藏的 spacer 视图。所以,你会做这样的事情:
|-[buttonA][spacer1(>=10,==50@200)][buttonB(==buttonA)][spacer2(==spacer1)][buttonC(==buttonA)]-|
我最终决定避免 spacer 意见,并制定了解决方案来实现最终结果。我没有将其设置为让自动布局计算出计算结果并自动减少按钮之间的 space,而是决定根据视图的宽度以编程方式设置这些约束的 constant
。因此确保按钮之间的 space 对于大宽度是大的,对于小宽度是小的。
为了实现这一点,我简单地为水平约束设置了一个出口集合,然后在 updateViewConstraints
中循环约束并将 constant
设置为 self.view.frame.size.width / 12
。
想象一下您并排放置三个按钮的情况。您希望这三个按钮填充可用宽度,并且是具有最小尺寸集的完美正方形,它们之间的设置数量为 space。要进行此设置,您将有以下限制条件:
答:
1:1 与 A 的比率
通往superview
宽度和高度 >= 25
乙:
等于 A
的宽度和高度
通向 A:50
C:
等于 A
的宽度和高度
通往 B: 50
尾随到超级视图
现在假设可用宽度足够小以至于没有足够的水平 space 以确保按钮是一个完美的正方形,每个按钮之间有 50 个。您不想打破纵横比和宽度约束,而是希望减少按钮之间的 space 数量。我的问题是,你是怎么做到的?
我想我只是将主要约束的关系更改为小于或等于,但这会导致这两个约束的不等式约束歧义。我想也许我需要为前导指定一个最小值,所以我又添加了两个设置为大于或等于 10 的前导约束。这并没有解决歧义。然后我添加了另一组前导约束,这次等于两个值之间的设定值,然后我降低了它们的优先级。这解决了歧义,但是按钮之间的 space 永远不会减少 - 尽管优先级降低,但它始终是我为具有 equals 约束的约束设置的值。
需要设置什么约束才能得到这个?
- 三个按钮并排显示在同一水平线上space
- 三个按钮都是正方形
- 按钮的最小尺寸 (25x25)
- 他们之间的固定数量 space - 50
- 当横向space太小,不能保证全部满足约束时,应该减少按钮之间的space量。
尝试为每个按钮制作内容模式 UIViewContentModeScaleAspectFit
或 IB 所称的任何内容。然后控制space之间使用宽度代替leading
。我猜想点击之间的 space 会调用按钮的目标,因此在这种情况下,以这种方式使用三个常规 UIView,然后将按钮添加为它们的子视图。
您可能需要一个具有所需优先级的间距约束,以表示允许的最小间距。例如 >= 10 @1000.
然后,您需要一个较低优先级的间距约束,用等式表示所需的间距,例如 == 50 @200。
但是,您有两个交互按钮 space。歧义的出现是因为当没有足够的 space 来实现所需的距离时,自动布局不知道要减少哪个。
您可以设置不同的优先级来解决歧义,但随后一个间距会缩小,而另一个间距保持在 50,直到达到最小值,此时另一个间距也会缩小。
我怀疑您希望两个 space 始终相等。没有直接的方法可以仅通过约束来做到这一点。相反,您需要使用隐藏的 spacer 视图。所以,你会做这样的事情:
|-[buttonA][spacer1(>=10,==50@200)][buttonB(==buttonA)][spacer2(==spacer1)][buttonC(==buttonA)]-|
我最终决定避免 spacer 意见,并制定了解决方案来实现最终结果。我没有将其设置为让自动布局计算出计算结果并自动减少按钮之间的 space,而是决定根据视图的宽度以编程方式设置这些约束的 constant
。因此确保按钮之间的 space 对于大宽度是大的,对于小宽度是小的。
为了实现这一点,我简单地为水平约束设置了一个出口集合,然后在 updateViewConstraints
中循环约束并将 constant
设置为 self.view.frame.size.width / 12
。