(作业)UIScrollView

好啦,本次作业的最后一个题,只需要实现UIScrollView的图片轮播和放大功能即可。
这里写图片描述

这个实现起来也不麻烦,要想实现轮播和缩放效果,需要先让ViewController遵循UIScrollViewDelegate协议。
这里写图片描述

接下来先声明三个属性,两个scrollview,一个pagecontroll,第一个scroll与pagecontroll配合使用实现图片轮播效果,第二个scroll实现图片缩放效果。

//轮播
var scroll1: UIScrollView!
var page: UIPageControl!
//缩放
var scroll2: UIScrollView!

轮播效果

接下来先实现轮播效果,我们可以先从网上下载几张高清的图片,博主这里下了5张,并有规律的命名(从1~5),然后将图片拖到资源文件夹下面
这里写图片描述
(还有个6的图片,是用在第二个scrollview上实现缩放效果的)

然后我们就需要初始化并配置一下scrollview

self.view.backgroundColor = UIColor.white

        let width = self.view.bounds.width - 20
        let height = width * 0.56

        scroll1 = UIScrollView(frame: CGRect(x: 10, y: 100, width: width, height: height))
        //按一页一页的方式滚动
        scroll1.isPagingEnabled = true
        //隐藏水平滚动条
        scroll1.showsHorizontalScrollIndicator = false
        //设置内容大小
        scroll1.contentSize = CGSize(width: width*5, height: height)
        //设置代理
        scroll1.delegate = self
        self.view.addSubview(scroll1)

需要注意的是,使用scrollview必须设置其内容的大小,否则内容大小与scrollview大小一致,这样就不能实现轮播效果了。

配置好scrollview之后,我们就需要初始化pagecontroll了

page = UIPageControl(frame: CGRect(x: 10, y: 100+height, width: width, height: 30))
//总页数
page.numberOfPages = 5
//当前页
page.currentPage = 0
//指示器未选中时颜色
page.pageIndicatorTintColor = UIColor.brown
//指示器选中时颜色
page.currentPageIndicatorTintColor = UIColor.red
//添加事件
page.addTarget(self, action: #selector(pageChanged(page:)), for: .touchUpInside)
self.view.addSubview(page)

然后我们需要向scrollview中添加图片视图

for i in 1...5 {
    let image = UIImage(named: "\(i)")
    let imageView = UIImageView(frame: CGRect(x: width*CGFloat(i-1), y: 0, width: width, height: height))
    imageView.image = image
    imageView.contentMode = .scaleAspectFill
    scroll1.addSubview(imageView)
}

这样,我们的数据准备工作就完成了,可以打开模拟器试一下效果,发现scrollview可以滚动图片了,但是下面的pagecontroll却没有反应,点击pagecontroll,scrollview也没有反应。这是因为它们两个还没有关联起来。
首先实现scrollview里面的图片滚动后,将pagecontroll的当前页做相应的更改,这就需要UIScrollViewDelegate中的方法了。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let currentPage = Int(scrollView.contentOffset.x / (self.view.bounds.width - 20))
        page.currentPage = currentPage
    }

然后我们再实现pagecontroll绑定的方法

@objc func pageChanged(page: UIPageControl) {
        let rect = CGRect(x: scroll1.bounds.width*CGFloat(page.currentPage), y: 0, width: scroll1.bounds.width, height: scroll1.bounds.height)
        scroll1.scrollRectToVisible(rect, animated: true)
    }

到这里,图片轮播的效果就实现完成了。

扫描二维码关注公众号,回复: 11070542 查看本文章

缩放效果

轮播效果实现完成之后,我们就来实现缩放效果吧。
我们只需要先初始化一个scrollview并做一点设置,然后向其添加图片

scroll2 = UIScrollView(frame: CGRect(x: 10, y: 200+height, width: width, height: height))
scroll2.backgroundColor = UIColor.yellow
scroll2.contentSize = CGSize(width: width, height: height)
//最大缩放比例
scroll2.maximumZoomScale = 10
//最小缩放比例
scroll2.minimumZoomScale = 0.1
scroll2.delegate = self
self.view.addSubview(scroll2)

let image = UIImage(named: "6")
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
imageView.contentMode = .scaleAspectFill
imageView.image = image
scroll2.addSubview(imageView)

然后实现UIScrollViewDelegate中的方法,返回需要缩放的视图即可。

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return scroll2.subviews.first
}

图片缩放效果看起来就是这么简单,接下来看看最终运行的效果吧。
这里写图片描述

所有代码如下:
ViewControlle.swift

class ViewController: UIViewController, UIScrollViewDelegate {

    //轮播
    var scroll1: UIScrollView!
    var page: UIPageControl!
    //缩放
    var scroll2: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.view.backgroundColor = UIColor.white

        let width = self.view.bounds.width - 20
        let height = width * 0.56

        scroll1 = UIScrollView(frame: CGRect(x: 10, y: 100, width: width, height: height))
        //按一页一页的方式滚动
        scroll1.isPagingEnabled = true
        //隐藏水平滚动条
        scroll1.showsHorizontalScrollIndicator = false
        //设置内容大小
        scroll1.contentSize = CGSize(width: width*5, height: height)
        //设置代理
        scroll1.delegate = self
        self.view.addSubview(scroll1)

        page = UIPageControl(frame: CGRect(x: 10, y: 100+height, width: width, height: 30))
        //总页数
        page.numberOfPages = 5
        //当前页
        page.currentPage = 0
        //指示器未选中时颜色
        page.pageIndicatorTintColor = UIColor.brown
        //指示器选中时颜色
        page.currentPageIndicatorTintColor = UIColor.red
        //添加事件
        page.addTarget(self, action: #selector(pageChanged(page:)), for: .touchUpInside)
        self.view.addSubview(page)

        for i in 1...5 {
            let image = UIImage(named: "\(i)")
            let imageView = UIImageView(frame: CGRect(x: width*CGFloat(i-1), y: 0, width: width, height: height))
            imageView.image = image
            imageView.contentMode = .scaleAspectFill
            scroll1.addSubview(imageView)
        }

        scroll2 = UIScrollView(frame: CGRect(x: 10, y: 200+height, width: width, height: height))
        scroll2.backgroundColor = UIColor.yellow
        scroll2.contentSize = CGSize(width: width, height: height)
        //最大缩放比例
        scroll2.maximumZoomScale = 10
        //最小缩放比例
        scroll2.minimumZoomScale = 0.1
        scroll2.delegate = self
        self.view.addSubview(scroll2)

        let image = UIImage(named: "6")
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        imageView.contentMode = .scaleAspectFill
        imageView.image = image
        scroll2.addSubview(imageView)

    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let currentPage = Int(scrollView.contentOffset.x / (self.view.bounds.width - 20))
        page.currentPage = currentPage
    }

    @objc func pageChanged(page: UIPageControl) {
        let rect = CGRect(x: scroll1.bounds.width*CGFloat(page.currentPage), y: 0, width: scroll1.bounds.width, height: scroll1.bounds.height)
        scroll1.scrollRectToVisible(rect, animated: true)
    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return scroll2.subviews.first
    }

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

发布了45 篇原创文章 · 获赞 20 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/average17/article/details/78538790
今日推荐