当前位置: > > > Swift - 页控件(UIPageControl)的用法

Swift - 页控件(UIPageControl)的用法

(本文代码已升级至Swift3)

使用页控件可以用来展示多个桌面。比如很多应用第一次登陆时会有个引导页(或叫做指导页、新手页),即在最开始的页面中使用页控件来介绍功能,通过左右滑动来切换页。
  
通常我们使用 UIPageControl UIScrollView 相互结合来实现多页切换,滑动页面时页控件标签(即页面下方的小白点)会更新到对应的页面。而直接点击页标签时,滚动条也会滚到相应的页。

注意:UIPageControl 的当前页小圆点和非当前小圆点的颜色是可以设置的,同时如果只有一页的时候也可以选择是否显示圆点)

效果图如下:
       

代码如下:
import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
    
    //界面设计元素引用
    @IBOutlet var pageControl: UIPageControl!
    @IBOutlet var scrollView: UIScrollView!
    
    //需要显示的页面内容
    var courses = [
        ["name":"Swift","pic":"swift.png"],
        ["name":"Scala","pic":"scala.png"],
        ["name":"Java","pic":"java.png"]
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        
        //设置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"]!))
            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.addTarget(self, action: #selector(pageChanged(_:)),
                              for: UIControlEvents.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
    }
    
    //点击页控件时事件处理
    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)
    }
}

源码下载hangge_604.zip
评论3
  • 3楼
    2017-06-07 19:57
    刘大大

    scrollView.contentSize = CGSizeMake(
    CGFloat(CGRectGetWidth(self.view.bounds)) * CGFloat(self.courses.count),
    CGRectGetHeight(self.view.bounds)
    )
    航哥 我这样写报错。改成这个样就好了
    scrollView.contentSize = CGSize(width:CGFloat(self.view.bounds.width) * CGFloat(imageArray.count), height:self.view.bounds.height)

    站长回复

    多谢你的提醒,文章代码已更新。

  • 2楼
    2016-04-20 21:56
    swift fans

    pageControl.addTarget(self, action: #selector(pageChanged(_:)),
    forControlEvents: UIControlEvents.ValueChanged)

    报错

    站长回复

    Swift语法有调整,你把Xcode升级到最新版本试试(目前是7.3)

  • 1楼
    2016-04-11 17:29
    转瞬间才发现

    36 --- 48行在Xcode 7下编译有问题...是不是语法规则变额...新人一枚

    站长回复

    是语法改变造成的。由于这篇文章写的比较早,所以现在使用Swift2会编译报错。现已修正,如果还发现其他样例不能编译的话可以给我留言。