【问题标题】:Xcode 6 Interface Builder centre multiple labels in middle of viewXcode 6 Interface Builder在视图中间居中多个标签
【发布时间】:2017-07-30 06:16:34
【问题描述】:

我正在编写一个 iOS 应用,它在一个视图中有多个标签,如下所示:

我希望这些标签位于视图的垂直中心,标签集合的中间作为视图的中心。

我需要为此使用自动布局,因为顶部标签可能是多行,或者可能只有一行,具体取决于输入,并且会根据此改变高度。这与顶部标签的大小不同,意味着我不能简单地将中间标签放在中间,而其他标签则与之相关。

我正在寻找代码或 IB 中的解决方案。


编辑:为了澄清,我希望将多个标签的中间居中,如下所示: (垂直中间可能会稍微偏离)

*图片应该是垂直居中

【问题讨论】:

  • @mohacs 这个问题是关于将单个标签与中心对齐。我想将一组标签的中心与容器的中心对齐。我现在已经编辑了问题以避免混淆
  • @mohacs 是的,因为我不想让任何一个标签居中。我希望在容器的垂直中间有标签集合的垂直中间。为了澄清,我的意思是垂直中间如上图所示。

标签: ios xcode swift interface-builder xcode6


【解决方案1】:

这是我的一个老问题,但它维护了相当多的视图,并且是一个很常见的用例。我不觉得其他答案是实现这一目标的非常有效的方法。

使视图集合居中的最简单方法是将它们放在本身居中的UIView 对象中。

要使用上面的示例,三个UILabels 将在一个UIView 内,顶部和底部标签与视图之间有一个0 约束。然后将视图本身设置为垂直居中。

【讨论】:

    【解决方案2】:

    我认为自动布局没有办法做到这一点,但您可以编写代码。我假设您已经计算出标签的间距,所以我将帮助您将整个内容居中。

    var o1 = label1.frame.origin
    var o4 = label4.frame.origin
    var h4 = label4.frame.height
    var w4 = label4.frame.width
    var hc4 = o4.y + h4
    var wc4 = o4.x + w4
    var screen = UIScreen.mainScreen().bounds.size.height
    var remainingScreen = (screen - (hc4 - o1.y))/2.0
    var screenW = UIScreen.mainScreen().bounds.size.width
    var remainingScreenW = (screenW - (wc4 - o1.x))/2.0
    var moveH = remainingScreen - o1.y
    var moveW = remainingScreenW - o1.x
    var frame1 = label1.frame
    var frame2 = label2.frame
    var frame3 = label3.frame
    var frame4 = label4.frame
    label1.frame = CGRect(x: frame1.origin.x + moveW, y: frame1.origin.y + moveH, width: frame1.width, height: frame1.height)
    label2.frame = CGRect(x: frame2.origin.x + moveW, y: frame2.origin.y + moveH, width: frame2.width, height: frame2.height)
    label3.frame = CGRect(x: frame3.origin.x + moveW, y: frame3.origin.y + moveH, width: frame3.width, height: frame3.height)
    label4.frame = CGRect(x: frame4.origin.x + moveW, y: frame4.origin.y + moveH, width: frame4.width, height: frame4.height)
    

    整个事情不是很容易解释,但我不会谈论每一行的作用。总体思路是它找到所有标签的左上角和右下角之间的距离(因此 label1 的 UL 和 label4 的 LR [这仅在您已经设置标签之间的间距和每个标签的宽度/高度时才有效label]),然后它找到屏幕的宽度/高度 (W/H) 并减去标签区域的 W/H,再除以 2,得到屏幕顶部和标签之间的空间。最后,它通过比较 UL 角与它应该在的位置来找到整个组件需要移动的距离,并将要移动的量与所有标签的原始位置相结合。

    注意:此代码可能会被大量压缩,如果这样编写,则更易于查看和阅读。

    【讨论】:

    • 那么标签的原点是左上角?
    • 是的...此代码可能不正确。我什么都没发生。
    • 我相信这段代码在理论上是正确的,但 frame.origin 为我返回的数字不正确。
    • 哦,对了,我还没有机会测试它 - 我今天不在我的开发 PC 上 - 但我明天会试试
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-13
    • 2015-02-06
    • 2015-11-10
    • 1970-01-01
    • 2014-09-19
    相关资源
    最近更新 更多