uiscrollview 截图问题_使用UIScrollView的正确姿势

场景分析

在实际开发中遇到UIScrollView的场景大概分为两类： 超过一个竖屏的信息展示 和 轮播图，以少数派App做个例子

少数派.gif

技术难点

通常来说，UIScrollView的布局 有两种方法：

StoryBoard + AutoLayout的方式

代码 + SnapKit布局的方式 进行

不管我们采取哪种布局技术，如果我们直接在UIScrollView中添加子视图，然后给子视图相对于UIScrollView添加约束，会发现子视图是无法显示的，这是什么原因呢？

其实是因为： UIScrollView的leading/trailing/top/bottom是相对于自己的ContentSize来说的，而不是Frame; 而在给所有子视图添加完视图前ContentSize还不确定，我们这时候又给子视图添加约束到ContentSize，相互依赖，不就成了蛋生鸡，鸡生蛋的问题了。

解决方案

我们可以给UIScrollView添加一个充满自己的ContainerView，然后我们所有子视图的布局相对于这个ContainerView就好了； 同时，只要确定了ContainerView的尺寸，也就确定了UIScrollView的ContentSize

干起来

我们通过SnapKit + 代码的方式给一个垂直滚动的UIScollView加约束来做例子，其他情况原理都是类似的。

Step1: 给UIScollView添加约束,没什么可说的

view.addSubview(scrollView)

scrollView.snp.makeConstraints { (make) in

make.edges.equalToSuperview()

}

step2 : 给UIScollView添加一个充满他的ContainerView(重要)

注意：ContainerView给定了宽度，即UIScollView的ContentSize的宽度确定了，还需要确定高度

scrollView.addSubview(containerView)

containerView.snp.makeConstraints { (make) in

make.edges.equalToSuperview()

make.width.equalTo(ScreenWidth)

}

Step3: 在ContainerView中添加子视图

//add 5 orange view

for i in 0..<5 {

let orangeView = UIView()

orangeView.backgroundColor = #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)

containerView.addSubview(orangeView)

orangeView.snp.makeConstraints({ (make) in

make.left.right.equalTo(containerView)

make.height.equalTo(orangeViewGap)

if i == 0 {

make.top.equalTo(containerView.snp.top).offset(orangeViewGap)

} else if let previousView = containerView.subviews[i-1] as? UIView{

make.top.equalTo(previousView.snp.bottom).offset(orangeViewGap)

}

if i == 4 {

containerView.snp.makeConstraints({ (make) in

make.bottom.equalTo(orangeView.snp.bottom).offset(orangeViewGap)

})

}

})

}

上面代码中，第一个View很简单，关键是最后一个子视图，一定要加好最后一个子视图到ContainerView的间隔，即我们确定了ContainerView的高度，那么我们就确定了UIScrollView的ContentSize的高度，到此，完成整个布局过程； 核心代码都在上面。

最终，完成效果如下：

ScrollView.gif