如何在iOS版UIScrollView中使用自动布局

by Sam Ollason

通过萨姆·奥拉森(Sam Ollason)

如何在iOS版UIScrollView中使用自动布局 (How to use Auto Layout with UIScrollView for iOS)

I love building tools with software, and that is why I am currently the Lead Developer for Green 13 Solutions.

我喜欢用软件来构建工具，这就是为什么我目前是Green 13 Solutions的首席开发人员。

Recently I have been having lots of fun using Swift and the Interface Builder in Xcode to create iOS apps.

最近，我在Xcode中使用Swift和Interface Builder创建iOS应用程序获得了很多乐趣。

I ran into some challenges when I was trying to create a scene where users can scroll to see content that overflows in the current content view. The content wasn’t scrolling properly and the text wasn’t automatically being shown properly for different screen sizes.

当我尝试创建一个场景时 ，用户可以滚动查看在当前内容视图中溢出的内容时遇到了一些挑战。 内容无法正确滚动，并且无法针对不同的屏幕大小自动正确显示文本。

Here are some notes for my future self to refer to. I hope you find them useful as well!

以下是我将来的自我参考。 希望您也觉得它们有用！

Here is a repository for the project if you want to see the completed example.

如果您想查看完整的示例，这是项目的存储库 。

我们将建立什么 (What we will build)

Our app will have a single page. The page will contain some text and users can scroll down to see the text that overflows from their current content view.

我们的应用程序将只有一个页面。 该页面将包含一些文本，用户可以向下滚动以查看其当前内容视图中溢出的文本。

We will use the Interface Builder in Xcode to add a UIScrollView object, a nested UIView object and then a further nested UITextView object. We will use the Interface Builder to add constraints to these elements. The constraints will mean that Auto Layout can enable scrolling to happen properly and the Text View will automatically appear properly on different screen sizes.

我们将使用Xcode中的Interface Builder，添加一个UIScrollView对象，一个嵌套的UIView对象，然后再添加一个嵌套的UITextView对象。 我们将使用Interface Builder将约束添加到这些元素。 这些限制意味着自动布局可以使滚动正确进行，并且“文本视图”将自动正确显示在不同的屏幕尺寸上。

少量的背景信息(用于双关语) (A swift bit of background info (pun intended))

The UIScrollView object can be used as a parent object to other UIKit items such as UIView and UITextView.

UIScrollView对象可以用作其他UIKit项(如UIView和UITextView)的父对象。

Doing this means that all child objects can collectively have their origin shifted relative to the content view that is shown to the user. This means ‘scrolling’ behaviour works as users expect. Another benefit is that Auto Layout will properly size our elements on different screens as expected.

这样做意味着所有子对象都可以相对于显示给用户的内容视图 共同偏移其原点 。 这意味着“滚动”行为按用户期望的方式工作。 另一个好处是，自动版式可以按预期在不同屏幕上正确调整元素的大小。

We use the terms ‘UIScrollView’ and ‘Scroll View’ interchangeably below, and similarly for View and Text View.

我们在下面互换使用术语“ UIScrollView”和“ Scroll View”，并且对于“视图”和“文本视图”也类似。

Below are the steps to follow.

以下是要遵循的步骤。

新增检视 (Adding View)

Create new project and selecting ‘Single View App’. If you click on Main.storyboard and you will see we have a scene with a blank View element.

创建新项目，然后选择“ Single View App”。 如果单击Main.storyboard，您将看到一个场景，其中的View元素为空白。

添加滚动视图 (Adding Scroll View)

Drag a Scroll View UI element from the Object Library into the scene. Then add the constraints shown in the picture below to anchor the Scroll View element to the edges of its parent Safe Area.

将“滚动视图” UI元素从“对象库”拖到场景中。 然后添加下图所示的约束，以将Scroll View元素锚定到其父安全区域的边缘。

添加视图元素 (Add a View element)

Use the Object Library to drag a View element into the scene. The View will be the parent container for our Text View element.

使用对象库将View元素拖到场景中。 视图将是我们的文本视图元素的父容器。

Manually resize the View element with your cursor so that it fills the width of the screen.

使用光标手动调整View元素的大小，以使其填满屏幕的宽度。

锚点视图到滚动视图 (Anchor View to Scroll View)

Click on the View element in the object hierarchy and drag+release your cursor onto the Scroll View element above it in the hierarchy. Click on the 4 topmost options to apply these constraints. Click on the ‘Equal Widths’ to apply this constraint also.

单击对象层次结构中的View元素，然后将光标拖动并释放到层次结构中其上方的Scroll View元素上。 单击4个最上面的选项以应用这些约束。 单击“相等宽度”以同样应用此约束。

Why? Constraining the View this way means that a child Text View element we add works properly with Auto Layout. This happens because we constrain the Text View to the bottom of the View (which we anchored properly to the bottom of the Scroll View!) instead of directly to the bottom of the Scroll View.

为什么？ 以这种方式约束View意味着我们添加的子Text View元素可以与Auto Layout一起正常使用。 发生这种情况是因为我们将“文本视图”限制在“视图”的底部(我们已正确地锚定到“滚动视图”的底部！)，而不是直接限制在“滚动视图”的底部。

You will see that the layout guides in the Interface Builder are red because there is some other error. We will fix this shortly.

您会看到Interface Builder中的布局指南为红色，因为还有其他错误。 我们将尽快修复此问题。

将文本视图添加为子视图 (Add Text View as child to View)

Add a Text View element inside the View element in the scene.

在场景的View元素内添加Text View元素。

向文本视图添加约束 (Add constraints to the Text View)

Add the constraints in the picture below to the Text View.

将下图中的约束添加到“文本视图”。

Why? This will constrain the Text View relative to the View object that is surrounding it.

为什么？ 这将相对于其周围的View对象限制Text View。

在文本视图中禁用滚动行为 (Disable scroll behaviour in Text View)

You should have a similar screen to the one below. You can see that there is still a lot of red in the Interface Builder.

您应该具有与以下屏幕类似的屏幕。 您会看到Interface Builder中仍然有很多红色。

You can remove these warnings by selecting the Text View element and deselecting the ‘Scrolling Enabled’ in the editor pane on the right hand side.

您可以通过选择“文本视图”元素并在右侧的编辑器窗格中取消选择“已启用滚动”来删除这些警告。

Note that we will still have scroll behaviour with this approach but it will be the parent Scroll View that is actually being moved, not the individual Text View element. Its the same as how a leaf only moves on a river because the river that surrounds it is moving!

请注意，使用此方法仍将具有滚动行为，但实际上将移动的是父Scroll View，而不是单个Text View元素 。 就像叶子只在河上移动一样，因为它周围的河正在移动！

This is slightly subtle but quite important to understand as it underpins the whole solution.

这有点微妙，但要理解它很重要，因为它是整个解决方案的基础。

最后 (Finally)

Add some more content to the Text View. You should see that scrolling works as expected and that the Text View appears properly on different screen sizes.

向“文本视图”中添加更多内容。 您应该看到滚动按预期进行，并且“文本视图”可以在不同的屏幕尺寸上正确显示。

This is the beauty of Auto Layout!

这就是自动版式的美！

Here is a repository for the project if you want to see the completed example.

如果您想查看完整的示例，这是项目的存储库 。

All information about robins for the Text View content is directly from Wikipedia. Thanks to the community for this.

有关文本视图内容的知更鸟的所有信息都直接来自Wikipedia 。 感谢社区为此。

Why robins? Because I love birds and robins are particularly awesome creatures!

为什么叫罗宾？ 因为我爱鸟和知更鸟，所以它们是特别棒的动物！

Thanks for reading, I hope you found this useful. Please let me know if you have any comments of questions!

感谢您的阅读，希望您觉得这很有用。 如果您有任何问题评论，请告诉我！

翻译自: https://www.freecodecamp.org/news/how-to-use-auto-layout-with-uiscrollview-for-ios-b94b8687a4cc/