我想为所有 iPhone 制作类似的用户界面,我目前正在为此使用自动布局,但我不知道如何使用 `NSLayoutConstraint` 创建这个 `UI`?
此 UI 在小屏幕上运行良好,但我希望同样的 UI 也适用于更大的 iPhone(在按钮之间保持一定的空间)。我如何在其中添加约束以获得与 iPhone 4s 相同的用户界面。
我使用了UIButton
,下面的标题是 UILabel
。
有人帮我解决这个问题。
屏幕截图。
最佳答案
就我个人而言,我发现试图理解代码中的自动布局约束(以及使用 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:
从技术上讲,这些约束也支持横向,但结果可能符合也可能不符合您的要求。 (我不确定您打算支持哪些方向。)
关于ios - 自动布局和对齐约束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26505486/