Android 喜欢 iOS Swift2.1 中的 ScrollView

Android like ScrollView in iOS Swift2.1

在 Android 中,有人使用 ScrollView 作为 XML 文件中的根,然后在其中包含许多其他不同类型的视图,从而允许滚动行为。

Swift 2.1 和 Xcode 7.1.1 是如何做到这一点的,因为情节提要不够长,无法插入我想要放入的所有不同类型的视图,就像我在Android?

的 XML 代码

我正在用 Android 的大脑思考 iOS :(

在界面生成器对象库中也有 iOS 的滚动视图:

Start to finish here is how to make it work in storyboard.

1: go to you view controller and click on Attribute Inspector.

2: change Size to Freeform instead of Inferred.

3: Go to the main view on that storyboard, not your scrollview but rather the top level view.

4: Click Size Inspector and set this view to your desired size. I changed my height to 1000.

Now you will see that you storyboard has your view setup so you can see the entire height of your scroll for easy design.

5: Drop on a scrollview and stretch it so it takes up the whole view. You should now have a scrollview with size of 320,1000 sitting on a view in your view controller.

Now we need to make it scroll and need to make it show content correctly.

6: Click on your scrollview and click on Identity Inspector.

7: Add a User Defined runtime attribute with KeyPath of contentSize then type of SIZE and put in your content size. For me it is (320, 1000).

Since we want to see our whole scroll view on the storyboard we stretched it and it has a frame of 320,1000 but in order for this to work in our app we need to change the frame down to what the visible scrollview will be.

8: Add a runtime attribute with KeyPath frame with Type RECT and 0,0,320,416.

Now when we run our app we will have a visible scrollview has a frame of 0,0,320, 416 and can scroll down to 1000. We are able to layout our subviews and images and whatnot in Storyboard just the way we want them to appear. Then our runtime attributes make sure to display it properly. All of this without 1 line of code.

这是你想的吗?

如果您希望滚动视图改变大小,我建议您尝试这样做:

你要做的是将滚动视图放到视图控制器上并添加约束。

我以前从未使用过滚动视图,所以这可能行不通。

0 行代码

故事板够长了:

您需要做的就是创建一个自由格式视图,使用从上到下的自动布局约束将您的所有内容放入该自由格式视图中,并将该视图用作 UIScrollView 的内容。

教程

  1. 视图控制器 > 显示属性检查器 > 大小 > 自由形式
  2. 视图控制器 > 显示尺寸检查器 > 模拟尺寸 > 自由形式 > 宽度和高度
  3. 添加一个UIScrollView
  4. 添加4个AutoLayout约束,top/left相对于superview,bottom/right superview相对于scrollview
    • Scroll.Top = Superview.Top 保证金
    • Scroll.Leading = Superview.Leading
    • 底部布局Guide.Top = Scroll.Bottom
    • Scroll.Trailing = Superview.Trailing
  5. UIView 作为子视图添加到 UIScrollView
  6. 重复 4 个 AutoLayout 约束,相同的规则:锚定顶部,父视图相对于子视图 width/height
    • Content.Top = Scroll.Top
    • Content.Leading = Scroll.Leading
    • Scroll.Bottom = Content.Bottom
    • Content.Trailing = Scroll.Trailing
  7. 将所有子视图添加到 UIView。确保您可以使用与 4. 和 6. anchored top & [=46= 相同的规则从上到下(以及从左到右)一直跟踪约束的自动布局链]superview.width和superview.height相对于内容。
  8. 内容视图的垂直高度由 7 处理。对于宽度,在此示例中,我决定使用 全宽。注意 Content 视图的宽度是如何相对于根视图宽度的:
    • Content.width = View.width

方法论

  • 使用以下结构创建视图层次结构:

    1. root UIView(属于 UIViewController
    2. UIScrollView 滚动条(必须根据与根的关系进行拉伸)
    3. 内容UIView(这将决定滚动条和区域)
    4. 其他所有内容都进入内容视图
  • 了解决定内容大小的因素

    1. 任一硬尺寸
    2. 与包含的视图(连续约束)的任一关系
    3. 相对于父视图
  • 了解边到边AutoLayout约束的连续性规则

    1. 对于定义封闭视图大小的方向,您应该能够遵循一组从上到下或从左到右的连续约束
    2. 仅仅定位元素不需要这样的连续性;事实上,你不需要它的连续性可能会产生冲突
  • 使外壳尺寸相对于封闭的视图(在您的示例中您试图垂直实现的):

    1. 将第一个俯视图附加到固定位置
    2. 将下方的每个视图附加到其上方的对象
    3. 将外壳底部附加到最后一个对象的底部

► 在 GitHub and additional details on Swift Recipes 上找到此解决方案。