ios - 自动布局和对齐约束

标签 ios autolayout xcode6 nslayoutconstraint

我想为所有 iPhone 制作类似的用户界面,我目前正在为此使用自动布局,但我不知道如何使用 `NSLayoutConstraint` 创建这个 `UI`?

此 UI 在小屏幕上运行良好,但我希望同样的 UI 也适用于更大的 iPhone(在按钮之间保持一定的空间)。我如何在其中添加约束以获得与 iPhone 4s 相同的用户界面。

我使用了 UIButton,下面的标题是 UILabel

有人帮我解决这个问题。

屏幕截图。

iPhone 4s

iPhone 6 Plus

最佳答案

就我个人而言,我发现试图理解代码中的自动布局约束(以及使用 NSLayoutConstraint)非常令人困惑且难以理解。 VFL (Visual Format Language)功能强大,但我建议如果您刚开始使用自动布局,那么使用 Storyboard或 XIB 文件可能会更容易(取决于您的个人偏好)。

由于这是一个相当复杂的话题,我将其放在一起 a sample project for you to reference on GitHub .这种方法的好处是几乎没有代码——所有配置都在 Storyboard 中完成(或者也可以在 XIB 文件中完成)。下面是我创建的约束的要点,但请引用示例项目了解具体细节:

  • 背景 View (紫色)- 约束将顶部、底部、左侧和右侧固定到父 View 的边缘。
  • 图标容器 View (白色)- 固定底部、左侧和右侧的约束;还设置了可容纳所有图标的高度。
  • 所有 ImageView 都有宽度约束和纵横比约束(保持相等的宽度和高度),并且所有标签都被约束到具有适当垂直约束的适当图像(顶部)。
  • 外角图标都只限制在它们的角上(左上角、右上角、左下角、右下角)。中心角被限制在 View 内水平居中。

如果您刚刚开始使用自动布局,您可能会发现 the following presentation I made有助于学习基础知识。

以下是来自不同模拟器的三个屏幕截图,显示布局如何根据屏幕尺寸自动调整:iPhone 5s、iPhone 6 和 iPhone 6 Plus:

iPhone 5s Example

iPhone 6 Example

iPhone 6 Plus Example

从技术上讲,这些约束也支持横向,但结果可能符合也可能不符合您的要求。 (我不确定您打算支持哪些方向。)

关于ios - 自动布局和对齐约束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26505486/

相关文章:

swift - UICollectionViewCells 在下一轮绘图之前不受约束

ios - 自动布局约束何时解决?

ios - 在自定义键盘中从 UIWebView 启动包含的应用程序

ios - ACAccountStore 未检索自定义 SLRequest 的 Facebook 帐户

objective-c - 为 UIView(UIScrollVIew 的 subview )设置 Alpha 非常慢

ios - 控制导航栏下的定位问题

ios8 - 启动服务 : invalidationHandler called - iOS 8 share sheet

ios - Swift - 分段控制 - 切换多个 View

ios - Xcode:可以在设计器的控件上附加用户定义的属性吗?

ios - 无法重现应用程序卡住,如何调试?