美文网首页
Swift - 页控件(UIPageControl)的用法

Swift - 页控件(UIPageControl)的用法

作者: 小驴拉磨 | 来源:发表于2020-06-29 13:37 被阅读0次

(本文代码已升级至Swift5)

使用页控件可以用来展示多个桌面。比如很多应用第一次登陆时会有个引导页(或叫做指导页、新手页),即在最开始的页面中使用页控件来介绍功能,通过左右滑动来切换页。

通常我们使用 UIPageControl 和 UIScrollView 相互结合来实现多页切换,滑动页面时页控件标签(即页面下方的小白点)会更新到对应的页面。而直接点击页标签时,滚动条也会滚到相应的页。

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

效果图
image.png
import 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

相关文章

网友评论

      本文标题:Swift - 页控件(UIPageControl)的用法

      本文链接:https://www.haomeiwen.com/subject/iviwfktx.html