(本文代码已升级至Swift5)
使用页控件可以用来展示多个桌面。比如很多应用第一次登陆时会有个引导页(或叫做指导页、新手页),即在最开始的页面中使用页控件来介绍功能,通过左右滑动来切换页。
通常我们使用 UIPageControl 和 UIScrollView 相互结合来实现多页切换,滑动页面时页控件标签(即页面下方的小白点)会更新到对应的页面。而直接点击页标签时,滚动条也会滚到相应的页。
(注意:UIPageControl 的当前页小圆点和非当前小圆点的颜色是可以设置的,同时如果只有一页的时候也可以选择是否显示圆点)
效果图
image.pngimport UIKit
class ViewController: UIViewController, UIScrollViewDelegate {
//界面设计元素引用
var pageControl: UIPageControl!
var scrollView: UIScrollView!
//需要显示的页面内容
var courses = [
["name":"Swift","pic":"swift.png"],
["name":"Scala","pic":"xcode.png"],
["name":"Java","pic":"java.png"]
]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
scrollView = UIScrollView(frame: self.view.bounds)
self.view.addSubview(scrollView)
pageControl = UIPageControl(frame: CGRect(x: 0, y: self.view.bounds.size.height - 50, width: self.view.bounds.size.width, height: 20))
view.addSubview(pageControl)
//设置scrollView的内容总尺寸
scrollView.contentSize = CGSize(
width: CGFloat(self.view.bounds.width) * CGFloat(self.courses.count),
height: self.view.bounds.height
)
//关闭滚动条显示
scrollView.showsHorizontalScrollIndicator = false
scrollView.showsVerticalScrollIndicator = false
scrollView.scrollsToTop = false
//协议代理,在本类中处理滚动事件
scrollView.delegate = self
//滚动时只能停留到某一页
scrollView.isPagingEnabled = true
//添加页面到滚动面板里
let size = scrollView.bounds.size
for (seq,course) in courses.enumerated() {
let page = UIView()
let imageView=UIImageView(image:UIImage(named:course["pic"]!))
imageView.contentMode = .scaleAspectFit
imageView.frame = self.view.bounds
page.addSubview(imageView);
page.backgroundColor = UIColor.green
let lbl = UILabel(frame: CGRect(x: 0, y: 20, width: 100, height: 20))
lbl.text = course["name"]
page.addSubview(lbl)
page.frame = CGRect(x: CGFloat(seq) * size.width, y: 0,
width: size.width, height: size.height)
scrollView.addSubview(page)
}
//页控件属性
pageControl.backgroundColor = UIColor.clear
pageControl.numberOfPages = courses.count
pageControl.currentPage = 0
//设置pageControl未选中的点的颜色
pageControl.pageIndicatorTintColor = UIColor.gray
//设置pageControl选中的点的颜色
pageControl.currentPageIndicatorTintColor = UIColor.red
//设置页控件点击事件
pageControl.addTarget(self, action: #selector(pageChanged(_:)),
for: UIControl.Event.valueChanged)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
//UIScrollViewDelegate方法,每次滚动结束后调用
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
//通过scrollView内容的偏移计算当前显示的是第几页
let page = Int(scrollView.contentOffset.x / scrollView.frame.size.width)
//设置pageController的当前页
pageControl.currentPage = page
}
//点击页控件时事件处理
@objc func pageChanged(_ sender:UIPageControl) {
//根据点击的页数,计算scrollView需要显示的偏移量
var frame = scrollView.frame
frame.origin.x = frame.size.width * CGFloat(sender.currentPage)
frame.origin.y = 0
//展现当前页面内容
scrollView.scrollRectToVisible(frame, animated:true)
}
}
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_604.html
网友评论