【问题标题】:Constraints to keep two variable-width views close together at the center of the superview在超级视图的中心保持两个可变宽度视图靠近在一起的约束
【发布时间】:2014-12-24 23:53:01
【问题描述】:

我在容器视图中水平并排有两个视图。它们相距 8 点,但宽度可变。我想保持两个视图的中心等于容器视图的中心,这样无论容器的大小,两个视图一起位于屏幕的中心。

我的想法是创建两个水平约束,一个从容器的左边缘到第一个对象的左边缘,一个从第二个对象的右边缘到容器的右边缘。然后,我将使这两个约束彼此相等,但随着容器的大小而变化。不幸的是,我找不到这样做的方法。我只能弄清楚如何使约束等于或大于/小于特定值。有没有办法做到这一点?

【问题讨论】:

  • 他们是什么样的观点?标签?包含其他视图的复杂视图?
  • 它们是基本的 UIViews。

标签: ios cocoa autolayout nslayoutconstraint


【解决方案1】:

您应该能够在 IB 中做到这一点。

创建一个宽度为 1 的空视图并设置一个水平约束以将其定位在容器的中心。这是一个占位符。

在你的两个视图上设置相对于这个中心占位符视图的约束:

左视图应该对占位符前沿有尾随约束。

右视图应该对占位符后沿有前导约束。

调整这两个约束的常量,以达到您想要的左右视图之间的间距。

【讨论】:

    【解决方案2】:

    临时思考,你有没有尝试给左视图一个前导约束,给它的上级,给右视图一个尾随约束,然后给这两者一个水平间距约束和一个等宽约束?

    【讨论】:

      【解决方案3】:

      如果你想要这样的东西:

      [   <-  equal  -> <-  equal  ->   ]
      [         [view1] [biggerview2]   ]-- resizable superview, fixed-width views
      

      视图之间有 8px,然后:

      view1.trailing = superview.centerX - 4
      biggerview2.leading = superview.centerX + 4
      

      以及其他明显的限制,例如:

      view1.leading >= default
      view1.width > 0
      
      superview.trailing >= biggerview2.trailing + default
      biggerview2.width > 0
      
      ...
      

      【讨论】:

      • 这可能是个愚蠢的问题,但在 Interface Builder 中有没有办法做到这一点?
      【解决方案4】:

      只需将您的两个视图嵌入到容器视图中即可。设置约束,使容器紧密地拥抱两个视图。然后,将容器视图置于其父视图的中心。

      【讨论】:

        【解决方案5】:

        是的,有一种方法: 您有超级视图,其中有 2 个子视图(您希望将 50:50 设置为超级视图宽度): 您需要将宽度约束(等宽)从子视图连接到父视图,并将此约束的乘数从 1 更改为 0.5(您也可以使用语法 1:2(或 1:3 用于 3 个子视图))。 您也可以在那里设置常量值来设置填充:

        示例如下:

        子视图的宽度与父视图的比例为 2:1,并且 32 是固定的填充(每边 16 个)

        所以它计算为(对于 iPhone 4S 屏幕)(320 宽度 - 32 常数)/2 = 子视图宽度

        您也可以对 3、4、5 个子视图执行相同操作,以制作更复杂的视图。 这是我的另一个示例的链接:https://dl.dropboxusercontent.com/u/48223929/AutolayoutExampleView.xib

        【讨论】:

          猜你喜欢
          • 2015-08-30
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-04-19
          • 2020-03-20
          • 1970-01-01
          • 1970-01-01
          • 2021-05-10
          相关资源
          最近更新 更多