如何在Xcode5中使用AutoLayout制作ScrollView

Question

在xcode 5中使用故事板如何在AutoLayout ON的情况下制作完全可操作的垂直滚动滚动视图？
考虑到子视图具有层次结构:

  1.UIView  
    2.UIScrollView
      3.UIView (lets call this UIDetailView to make things easier)

请具体从代码到约束,以使任何视图更小等.

Answer 1

故事板中的Autolayout UIScrollView正常工作

我见过很多人推荐"容器视图"方法,AKA蛮力,解决他们不理解的问题.这是非最优的,因为您现在已经失去了scrollview的一大优势,因为它认为内容是整个scrollview而不是直接附加到scrollview的子视图.

以下是我在后续示例中的操作方法

--UIScrollView
  |-> UITextView
  |-> UILabel
  |-> UIOtherStuff

当放置UIScrollView成UIView在故事板只是针的边缘的4个边UIScrollView的UIView.现在将您的内容添加到UIScrollView确保为每个维度提供至少两个约束.关于Autolayout的好处在于它确定了scrollview的contentSize或UILabels的大小需要基于其内部的内容大小.AKA intrinsicContentSize.因此,如果您收到警告"scrollView的内容大小不明确",您就会知道您没有给内容足够的约束.例如,您可能已经给出了视图之间的顶部,底部,左侧,右侧间距,但是您正在约束的子视图也需要高度,因为像这样的无限垂直平面UIScrollView可以假设您的视图从零到无限高.

换句话说,关于Autolayout by Example的Apple指南为成功制定了一个简单的3点计划:

1. 创建滚动视图.
2. 将UI元素放在其中.
3. 创建完全定义滚动视图内容的宽度和高度的约束.

当您在其中键入更多行并且整个ScrollView增长以包含它时,带有'Min melding til'的顶级TextView也在增长.虽然我重写了UITextView类以返回修改后的高度约束,但ScrollView本身无需编码即可正常工作.

最后一件事,很多与Autolayout相关的帖子尝试了神奇的修复 - 所有咒语translatesAutoresizingMaskIntoConstraints = NO.仅在以编程方式创建视图时才需要这样做.

Answer 2

此博客文章详细介绍了如何使用纯自动布局方法将UIScrollView与Autolayout ON一起使用.请注意,博客文章中的所有约束都是通过Storyboard定义的.

帖子中的方法采用以下层次结构:

1. View (main view of my UIViewController)
  2. Scroll View (UIScrollView)
     3. Container View (UIView)
       4. Content View (e.g. UIImageView)

我想Container View将是你的UIDetailView,内容视图将是你的UIDetailView中的任何UIView.

https://happyteamlabs.com/blog/ios-how-to-use-uiscrollview-with-auto-layout-pure-auto-layout/

Answer 3

文档清楚地说明了如何执行此操作:自动布局中的UIScrollView将始终调整自身大小以适应内容(UIDetailView).

所以你必须像这样设置你的观点:

• UIView:有约束的位置.
• UIScrollView:使用约束绑定到UIView.
• UIDetailView:设置大小(内在内容大小),最大化压缩阻力,将UIScrollView的top,bottom,leading和trailing约束手动设置为0.