我应该如何通过 Storyboard 为我的 iOS 视图设置自动布局/约束?

Posted

技术标签:

【中文标题】我应该如何通过 Storyboard 为我的 iOS 视图设置自动布局/约束?【英文标题】:How should I got about setting the auto layout / constraints for my iOS view via Storyboard? 【发布时间】:2021-05-13 22:29:42 【问题描述】:

我对通过 Storyboard 为 ios 视图设置约束还很陌生。我已经构建了没有约束的下面的视图,但是在试图弄清楚如何设置自动布局的约束时遇到了问题。它并不完全对齐,但下面的视图是我想要的总体思路。

我遵循了参考和教程,但在构建下面的视图时遇到了麻烦,因为它比我所看到的教程更复杂。我无法弄清楚我应该采用哪种具体方法来设置堆栈和约束,使其看起来类似于下面以在各种屏幕尺寸上工作

如果有人可以帮助您了解设置方法,我将不胜感激。这肯定会帮助我理解将来应该如何构建类似/更复杂的视图。

我尝试使用下面显示的以下布局通过情节提要来实现它,但我对我的方法以及应如何设置约束感到困惑。我也不确定 UI 元素何时应仅放置在堆栈中而不是视图中。

【问题讨论】:

作为一般规则,当您的 UI 元素会受益于堆栈视图 排列 其子视图的方式时,请使用 UIStackView,并在以下情况下使用 UIView不是。很难说您当前的尝试有什么问题(如果有的话)......除非您显示来自另一台设备的屏幕截图并指出什么看起来像您想要的那样。 【参考方案1】:

尝试了解约束的基础知识

按照步骤实现您的目标:(该做的和不该做的)

    不要一开始就学习“stack_view”,它会让你很困惑。 不要使用自动调整大小(在每个新设备设计上都感觉不舒服) 学习简单的约束,例如:Leading、Trailing、Top & Botton。 尝试在视图控制器内的多视图中实现约束 了解如何根据内容在标签中制作 SizeToFit,例如:Textview 在键入时需要自行扩展,如果消息到达,标签会自动调整大小以适应内容。

然后下一步:

    在单元格内部实现对 tableview 和 collectionview 的约束 学习在按钮、标签、视图等中使用更大或更小常量(sizeToFit)概念... 并学习 - 容器中的水平、垂直......以及容器的底部空间。

这是 StoryBoard 和 Xib 的约束中要学习的基本知识。

迁移到 StackView 之后就很容易理解了。

如果您尝试学习 SwiftUI - StackView 是必须学习的。

【讨论】:

以上是关于我应该如何通过 Storyboard 为我的 iOS 视图设置自动布局/约束?的主要内容,如果未能解决你的问题,请参考以下文章

iOS-设置Main Interface通过storyboard或者xib加载主界面

在 UICollectionViewCell 中使用 Storyboard 中的自动布局约束

从 Xamarin.iOS 绑定库中引用 Storyboard

使用 UITabbarController 和 UINavigationController 从 storyboard 调用 View

Storyboard - 在 Storyboard 中为同一个 ViewController 创建两个不同的视图

如何在 Storyboard 中向 UITableView 添加页脚