UIScrollView使用SnapKit 自动约束设置教程

前言

因为最近要封装一个轮播图的工具类,网上只有自动轮播图片的,但是我想封装一个能轮播所有类型UIView的,所以要用到滚动视图,之前都是用xib设置ScrollView的AutoLayout,用纯代码工作量太大,所以不用,但是要封装起来给别人用,就得用到纯代码,所以今天研究了一下,写了教程和demo代码.

传送门

如果你想学习用xib给UIScrollView设置autolayout 约束,请查看我写的这篇教程:
xcode xib滚动视图Scroll View让视图在适配所有机型

核心思想

跟xib使用scrollView一样,需要给contentView设置6个约束,上下左右宽高,满足这6条才能让滚动视图的内容视图移动起来.

先从最简单的单个内容视图来讲解

先看运行结果:

单个内容视图contentView的好处是,便于理解,一个内容视图,占据整个滚动视图的所有空间,如果要添加字内容,就添加到这一个contentView里面
代码主要思路就是,给scrollView添加子视图 contentV,然后把contentV设置6个约束,上下左右,都跟scrollView一样,然后再设置固定的宽高
上代码:

//
//  ViewController.swift
//  UIScrollView_SnapKitDemo
//
//  Created by 谭迪文 on 2021/5/21.
//

import UIKit
import SnapKit
class ViewController: UIViewController {
    var scrollV = UIScrollView()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //MARK: - 设置一个内容视图的
        view.addSubview(scrollV)
        //确定scrollView的位置
        scrollV.snp.makeConstraints { (make) in
            make.left.equalToSuperview().offset(20)
            make.right.equalToSuperview().offset(-20)
            make.top.equalToSuperview().offset(20)
            make.height.equalTo(200)
        }
        //添加内容视图,添加任意一个子视图,就行
        let contentV = UIView()
        scrollV.addSubview(contentV)
        contentV.backgroundColor = UIColor.green
        contentV.snp.makeConstraints { (make) in
            make.left.right.top.bottom.height.equalToSuperview()//上下左右高度都跟scrollView一样
            make.width.equalToSuperview().multipliedBy(2)//设置2倍宽度
        }
        //设置内容视图contentView的位置,需要设置6个约束,上下左右+宽高
        let sw = UISwitch()//添加一个switch开关,用作滚动时候能看到屏幕有变化
        sw.isOn = true
        contentV.addSubview(sw)
        sw.snp.makeConstraints { (make) in
            make.left.equalToSuperview().offset(100)
            make.top.equalToSuperview().offset(100)
        }
    }

    
}

设置多个contentView

跟上面单个 contentView一样,只不过,需要给scrollView6个约束,上下左右宽高
下面代码有2个contentView分别是:contentV2 和 contentV3 .添加到scrollView 里面,所以,给出的约束也要给出2套
contentV2给的约束是:上,左,下,都距离scrollView为0, 高度跟scrollView一样, 宽度是1倍的scrollView
contengV3给的约束是:上,下,距离scrollView为0, 高度跟scrollView一样,宽度是1倍的scrollView,左距离contentV2为0,右边距离scrollV右边为0,这样组合在一起就让contentV2 和 contentV3 和 scrollV 确定了上下左右,总体宽高 的 关系

import UIKit
import SnapKit
class ViewController: UIViewController {
    var scrollV = UIScrollView()
    var scrollV2 = UIScrollView()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
   
        //MARK: - 设置内容视图是由一个或者多个拼接在一起的
        
        view.addSubview(scrollV2)
        //确定scrollView的位置
        scrollV2.snp.makeConstraints { (make) in
            make.left.equalToSuperview().offset(20)
            make.right.equalToSuperview().offset(-20)
            make.top.equalToSuperview().offset(300)
            make.height.equalTo(200)
        }
        //添加内容视图,添加任意一个子视图,就行
        let contentV2 = UIView()
        scrollV2.addSubview(contentV2)
        contentV2.backgroundColor = UIColor.green
        contentV2.snp.makeConstraints { (make) in
            make.left.top.bottom.height.equalToSuperview()//上下左高度都跟scrollView一样
            make.width.equalToSuperview()//设置1倍宽度
        }
        let contentV3 = UIView()
        scrollV2.addSubview(contentV3)
        contentV3.backgroundColor = UIColor.yellow
        contentV3.snp.makeConstraints { (make) in
            make.top.bottom.height.equalToSuperview()//上下高度都跟scrollView一样
            make.left.equalTo(contentV2.snp.right)//让内容视图contentV3 挨着 contentV2的右侧
            make.right.equalToSuperview()//让第二个内容视图的右侧跟scrollView一样,这个目的是让滚动视图能找到2个contentV距离自己右边边缘的具体数字,否则不能滚动
            make.width.equalToSuperview()//设置1倍宽度
        }
        
    }

    
}

demo代码下载地址: 点击这里下载