如何在Xcode5中使用AutoLayout制作ScrollView
在Xcode 5使用故事板如何使一个完全可操作的垂直滚动滚动视图,AutoLayout ON?
考虑到子视图有层次结构:
1.UIView 2.UIScrollView 3.UIView (lets call this UIDetailView to make things easier)
请从代码到约束的具体情况,以使任何视图变小。
这篇博客文章详细介绍了如何使用带有Autolayout ON的UIScrollView,使用纯自动布局方法。 请注意,博客文章中的所有约束都是通过Storyboard定义的。
文章中的方法假设了以下层次结构:
1. View (main view of my UIViewController) 2. Scroll View (UIScrollView) 3. Container View (UIView) 4. Content View (eg UIImageView)
我猜容器视图将是你的UIDetailView,而内容视图将是UIDetailView中的任何UIView。
https://happyteamlabs.com/blog/ios-how-to-use-uiscrollview-with-auto-layout-pure-auto-layout/
故事板中带有Autolay的UIScrollView正常工作
我见过很多人推荐“容器视图”的方法,AKA的蛮力,以解决他们不明白的问题。 这是非最优的,因为你现在已经失去了滚动视图的一个很大的优势,让它认为内容是整个滚动视图,而不是立即附加到滚动视图的子视图。
下面是我在下面的例子中做的
--UIScrollView |-> UITextView |-> UILabel |-> UIOtherStuff
将UIScrollView
放置到Storyboard中的UIView
中时,只需将UIScrollView
四边固定到UIView
。 现在将您的内容添加到UIScrollView
,确保您为每个维度提供了至less两个约束。 关于Autolayout的好处在于它能够计算出scrollview的contentSize或者UILabels需要基于内容的大小。 AKA intrinsicContentSize。 所以,如果给你一个警告“scrollView的模糊内容大小”,你知道你没有给出足够的限制。 例如,您可能在视图之间给出了顶部,底部,左侧,右侧的间隔距离,但是您约束的子视图也需要一个高度,因为像这个UIScrollView
这样的无限垂直平面可以假设您的视图从零到无限高。
换句话说,Autolayout by Example的苹果指南为成功做了一个简单的3点计划:
- 创build滚动视图。
- 将UI元素放在里面。
- 创build完全定义滚动视图内容的宽度和高度的约束。
“Min melding til”的顶级TextView也随着你input更多的线条而增长,并且整个ScrollView增长以包含它。 虽然我重写UITextView
类来返回修改高度约束,滚动视图本身无需编码正常工作。
最后一件事,很多与Autolayout相关的post尝试魔法修复 – 所有的咒语translatesAutoresizingMaskIntoConstraints = NO
自动化MaskIntoConstraints translatesAutoresizingMaskIntoConstraints = NO
。 这只在视图是以编程方式创build的情况下才是必需的。
该文档清楚地说明了如何做到这一点:自动布局中的UIScrollView将始终调整自己以适应内容(UIDetailView)。
所以你必须像这样设置你的观点:
- UIView:有约束的位置。
- UIScrollView:约束绑定到UIView。
- UIDetailView:设置大小(内在的内容大小),最大的抗压缩,设置顶部,底部,领先和尾部约束到UIScrollView手动0。
我有一个类似的问题,我发现相对简单的解决scheme类似于使用纯粹的Autolay的Interface Builder中的DJ S的没有任何代码。
如果要查看这个工作,首先要删除View Controller中的任何约束。
这是样本布局:
-
查看(我的UIViewController的主视图)
-
滚动视图(UIScrollView)
-
容器视图(UIView)
- 内容视图(例如UIImageView)
-
-
A.滚动视图的宽度/高度应该小于容器视图的宽度/高度
B.容器视图应该有一些确定的宽度/高度(可以是明确的宽度/高度)
C.做控制 – 拖放容器视图到滚动视图,只添加:
- 领先的空间到集装箱
- 尾随空间到容器
D.检查这两个约束条件,并将“恒定”值设为0
E.运行应用程序和
由于新的iPhone 6和6+屏幕尺寸,我不得不对DJ S的解决scheme做一些调整。
目标
将UITextView
放置在UIScrollView
,并且从左/右屏幕边缘还有15
点的空间。
查看
1. Main View (main view of my UIViewController) 2. Scroll View (UIScrollView) 3. Container View (UIView) 4. Text View (UITextView)
解
对于空间,我从UIScrollView
– > Main View
添加了15个水平的拖尾/前导空格。 为了使UITextView
的宽度相对于屏幕宽度,我从UITextView
– > Main View
添加了一个Equal Widths
约束,并将其值设置为-30
(2 * 15pt水平空间)。 现在, UITextView
的宽度将dynamic调整任何屏幕大小。
UIScrollView
应该有Scrolling Enabled
。 UITextView
不应该。