使用自动布局适应所有设备

Posted 2023-03-15

【中文标题】使用自动布局适应所有设备

【英文标题】：Adapt to all devices with autolayout

【发布时间】：2016-07-13 15:33:10

【问题描述】：

我正在尝试设计如下所示的屏幕。我可以为几个设备做这个设计，例如 iPhone 5 和 5S。这意味着我的应用程序可以在 iPhone 5 和 5S 上正常运行。但是当我尝试在 iPhone 6 或 6S 上运行它时，我的设计被破坏和打乱了。如何为所有设备进行通用设计。

【问题讨论】：

你能把你的代码贴在这里给我们看看吗？

我已经使用了自动布局，所以我没有代码。

修复了多少按钮？还是可以更多？

是的，按钮编号已修复。将有 11 个按钮。

你能发一张它是如何坏掉的图片吗？也可能是您在情节提要中的约束图片？

【参考方案1】：

对于给定的索引，这是一个给出 CGPoint 距中心偏移的函数

func offset(forIndex index: Int) -> CGPoint 
  let part = M_PI / 11.0
  let phi = part * Double(index)
  let x = Double(UIScreen.mainScreen().bounds.width) * sin(phi)
  let y = Double(UIScreen.mainScreen().bounds.height) * cos(phi)
  print("----")
  print("index \(index)")
  print("x \(x)")
  print("y \(y)")

  return CGPoint(x: CGFloat(x), y: CGFloat(y))

使用此功能，您可以相应地定位您的按钮

【讨论】：

我更喜欢这种策略，而不是对这种自定义的东西使用自动布局。

【参考方案2】：

所以，这是我以前使用过的一个模式：

灰色条只是 UIViews，它们可以扩展和缩小以使所有按钮在不同屏幕上保持相等的间距。在您的实际设计中，这些将是透明的。这些视图中的每一个都有一个约束，以使它们具有相同的高度 - 这使按钮之间的空间保持相等，而不管屏幕的垂直大小。

其他限制是中间按钮被限制为垂直居中，并且每个按钮对包含视图的尾部空间都在增加。每个按钮也被限制为与视图上方和下方的间距为 0 点。

当您在小屏幕上运行此程序时，垫片会缩小，而在更大的屏幕上，它们会变大。在较大的屏幕上，如果按钮设置为使用固有尺寸，您还应该获得较大的按钮。

这不会保留椭圆的形状，但我猜你可以使按钮的 x 坐标与屏幕的宽度成正比来做到这一点。取决于您对整体外观的目标。