好啦,本次作业的最后一个题,只需要实现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)
}
到这里,图片轮播的效果就实现完成了。
缩放效果
轮播效果实现完成之后,我们就来实现缩放效果吧。
我们只需要先初始化一个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.
}
}