15.UIScrollView

UIScrollView

UIScrollView用于当视图太大时,可以滚动来浏览整个界面, 下面我们学习如何使用它,并实现一个引导页.

1. UIScrollView的创建

let scrollView = UIScrollView(frame: self.view.bounds)
self.view.addSubview(scrollView)

let provenceImg = UIImageView(image: UIImage(named: "Provence"))
scrollView.contentSize = provenceImg.bounds.size
scrollView.addSubview(provenceImg)

运行程序

注意: UIScrollView除了设置了frame外,还要设置contentSize, frame是UIScrollView可见区域位置和大小,而contentSize是它的实际内容大小,
这里我们设置的contentSize是一张很大的图片的大小.

2. UIScrollView的滚动条的风格

我们查看UIScrollView的定义,它有一个indicatorStyle的属性

public var indicatorStyle: UIScrollViewIndicatorStyle // default is UIScrollViewIndicatorStyleDefault

然后我们查看UIScrollViewIndicatorStyle的定义

public enum UIScrollViewIndicatorStyle : Int {

    case Default // 黑色白边框
    case Black // 黑色
    case White // 白色
}

我们将滚动条设置成白色的

scrollView.indicatorStyle = .White

运行程序

3. UIScrollView的缩放

查看UIScrollView的定义

public var minimumZoomScale: CGFloat // 默认值1.0
public var maximumZoomScale: CGFloat // 默认值1.0,必须maximumZoomScale > minimumZoomScale才能缩放

现在我们实现一个需求: 让图片最大可以放大4被,最小0.2倍

scrollView.minimumZoomScale = 0.2
scrollView.maximumZoomScale = 4

运行程序, 我们发现根本没法缩放,查看UIScrollViewDelegate的定义我们发现一个方法

@available(iOS 2.0, *)
    optional public func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? // return a view that will be scaled. if delegate returns nil, nothing happens
这个方法要返回一个被缩放的UIView, 如果delegate为nil,那么不会缩放

由此可以知道为什么我们的缩放无效了, 下面我们继续完成需求

class ViewController9: UIViewController, UIScrollViewDelegate {
    override func viewDidLoad() {
        ...
        scrollView.delegate = self
    }

    ...

    // MARK: - UIScrollViewDelegate

    // MARK: UIScrollView正在缩放的时候调用
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView?  {
        return self.provenceImg
    }
}

运行程序,我们发现可以实现缩放了

4. UIScrollView的常用属性

public var directionalLockEnabled: Bool // 默认值false, 是否锁定滑动方向
public var bounces: Bool // 默认值true, 是否允许回弹
public var alwaysBounceVertical: Bool // 默认值是false, 如果它为true,且bounces也为yes,那么允许垂直滚动
public var alwaysBounceHorizontal: Bool // 默认值是false, 如果它为true,且bounces也为yes,那么允许水平滚动
public var pagingEnabled: Bool // 默认值为false, 是否以页为单位滚动
public var scrollEnabled: Bool // 默认值为true, 是否允许滚动
public var showsHorizontalScrollIndicator: Bool // 默认值true, 是否显示水平滚动条
public var showsVerticalScrollIndicator: Bool  // 默认值true, 是否显示垂直滚动条

5. 实现一个引导页

import UIKit

class GuideViewController: UIViewController {
    let numPage: CGFloat = 3
    var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        let winSize = self.view.bounds.size

        self.scrollView = UIScrollView(frame: self.view.bounds)
        scrollView.pagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.bounces = false
        scrollView.contentSize = CGSize(width: winSize.width * numPage, height: winSize.height)

        // scrollView添加3页内容
        for i in 1...Int(numPage) {
            let image = UIImage(named: "guide\(i)")
            let imageView = UIImageView(frame: CGRect(x: CGFloat(i-1) * winSize.width, y: 0, width: winSize.width, height: winSize.height))
            imageView.image = image
            scrollView.addSubview(imageView)
        }
        self.view.addSubview(scrollView)

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

运行程序

一般引导页下面会有几个小圆点指示当前属于第几页, 解决方法有两个, 第一个让设计妹子给每张图片添加点, 第二个使用UIPageControl.

严重推荐使用第一种方法, 不是因为简单, 而是你有机会和妹子接触, 一回生二回熟, 如果你硬是要所有问题都用技术解决, 那么送你一句话, 活该单身!

最后, 一般最后一个界面都会添加一个按钮,用于跳转到应用的主界面,UIScrollViewDelegate中有一个方法:

@available(iOS 2.0, *)
optional public func scrollViewDidScroll(scrollView: UIScrollView) // 滚动时调用

我们可以实现这个方法

// MARK: - UIScrollViewDelegate

// MARK: 滚动时调用
func scrollViewDidScroll(scrollView: UIScrollView) {
    let offset = scrollView.contentOffset
    let currentPage = Int(offset.x/self.view.bounds.width)
    print(currentPage)
    if currentPage == Int(numPage-1) {
        print("显示跳转到主页的按钮")
    } else {
        print("隐藏跳转到主页的按钮")
    }
}

添加一个UIButton没什么难度, 就不写了,各位可以自己实现

6. 完整代码

import UIKit

class GuideViewController: UIViewController, UIScrollViewDelegate {
    let numPage: CGFloat = 3
    var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        let winSize = self.view.bounds.size

        self.scrollView = UIScrollView(frame: self.view.bounds)
        scrollView.pagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.bounces = false
        scrollView.contentSize = CGSize(width: winSize.width * numPage, height: winSize.height)

        // scrollView添加3页内容
        for i in 1...Int(numPage) {
            let image = UIImage(named: "guide\(i)")
            let imageView = UIImageView(frame: CGRect(x: CGFloat(i-1) * winSize.width, y: 0, width: winSize.width, height: winSize.height))
            imageView.image = image
            scrollView.addSubview(imageView)
        }
        self.view.addSubview(scrollView)
        scrollView.delegate = self

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: - UIScrollViewDelegate

    // MARK: 滚动时调用
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let offset = scrollView.contentOffset
        let currentPage = Int(offset.x/self.view.bounds.width)
        print(currentPage)
        if currentPage == Int(numPage-1) {
            print("显示跳转到主页的按钮")
        } else {
            print("隐藏跳转到主页的按钮")
        }
    }

}