BasicImageSlider.gif
这个教程会涉及如下内容
- 最基础的ScrollView实现轮播效果
- 给Navigation Item添加图片元素
- 使用PageControl显示当前页面位置
ScrollView
ScrollView可以使的大小超出屏幕范围的内容得以在设备上显示与交互，之前的TableView滚动列表也是基于ScrollView实现的，那么ScrollView一个比较常规的应用就是轮播，今天我们就来实现一个高大上的全屏轮播效果。
添加ScrollView
同样的，我们使用storyboard拖拽加入一个ScrollView，然后在Layout中设置为全屏。
建立一个数组用来存放轮播图片相关信息
struct scrollContent{
var image: String!
var slogan: String!
init(image: String, slogan: String){
self.image = image
self.slogan = slogan
}
}
var scrollContentList = [scrollContent(image: "iPhone7-red", slogan: "Now in red"),
scrollContent(image: "iPhone7-black", slogan: "This is 7")
]
向ScrollView中添加图片
//初始化ImageView
let imageView = UIImageView(image: UIImage(named: "iPhone7-red"))
//设置ImageView的位置和大小
imageView.frame = CGRect(x: imageScrollView.frame.width * CGFloat((imageViewList.count)), y: 0, width: imageScrollView.frame.width, height: imageScrollView.frame.height)
//向数组中添加图片
imageViewList.insert(imageView, at: (imageViewList.endIndex))
//将图片加入ScrollView
imageScrollView.addSubview(imageView)
我们可以把依照数组信息向制定ScrollView添加信息的操作封装成一个函数
func addImageView(to srcollView: UIScrollView? ){
if let myScrollView = srcollView{
let width = myScrollView.bounds.width
let height = myScrollView.bounds.height
if scrollContentList.count > 0{
for index in 0...(scrollContentList.count-1){
let imageView = UIImageView(image: UIImage(named: scrollContentList[index].image))
imageView.frame = CGRect(x: width * CGFloat(index), y: 0, width: width, height: height)
myScrollView.addSubview(imageView)
}
}
}
}
接下来实现scrollViewDelegate来响应滑动操作
func scrollViewDidScroll(_ scrollView: UIScrollView) {
print(scrollView.contentOffset.x,scrollView.contentOffset.y)
let offset = scrollView.contentOffset.x
if offset == scrollView.frame.width{//停留在第一页时淡入slogan
UIView.animate(withDuration: 1, animations: {
self.sloganLabel.text = self.scrollContentList[1].slogan
self.sloganLabel.textColor = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
self.sloganLabel.alpha = 1
})
} else if offset == 0{//停留在第2页时淡入slogan
UIView.animate(withDuration: 1, animations: {
self.sloganLabel.text = self.scrollContentList[0].slogan
self.sloganLabel.textColor = UIColor(red: 0.85, green: 0.17, blue: 0.23, alpha: 1)
self.sloganLabel.alpha = 1
})
} else { //开始滑动时淡出slogan
UIView.animate(withDuration: 0.5, animations: {
self.sloganLabel.alpha = 0
})
}
}
添加pagecontrol来指示当前页数
@IBOutlet weak var pageControl: UIPageControl!
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let page = scrollView.contentOffset.x / scrollView.frame.width
pageControl.currentPage = Int(page)
}
加入navigationcontroller避免scrollView整体向下偏移，在viewDidLoad加入如下语句
self.automaticallyAdjustsScrollViewInsets = false
这样我们的图片轮播就完成啦～
