使用页控件可以用来展示多个桌面。比如很多应用第一次登陆时，会在开始页面使用页控件来介绍功能，通过左右滑动来切换页。
通常我们使用UIPageControl和UIScrollView相互结合来实现多页切换，滑动页面时页控件标签（即页面下方的小白点）会更新到对应的页面。而直接点击页标签时，滚动条也会滚到相应的页。
（ UIPageControl的当前页小圆点和非当前小圆点的颜色是可以设置的，同时如果只有一页的时候也可以选择是否显示圆点）
效果图如下：
代码如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import UIKit class ViewController : UIViewController , UIScrollViewDelegate { //界面设计元素引用 @IBOutlet var pageControl: UIPageControl ! @IBOutlet var scrollView: UIScrollView ! //需要显示的页面内容 var courses = [ [ "name" : "Swift" , "pic" : "swift.png" ], [ "name" : "ObjectC" , "pic" : "oc.jpg" ], [ "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 = CGSizeMake ( CGFloat ( CGRectGetWidth ( self .view.bounds)) * CGFloat ( self .courses.count), CGRectGetHeight ( self .view.bounds) ) //关闭滚动条显示 scrollView.showsHorizontalScrollIndicator = false scrollView.showsVerticalScrollIndicator = false scrollView.scrollsToTop = false //协议代理，在本类中处理滚动事件 scrollView.delegate = self //滚动时只能停留到某一页 scrollView.pagingEnabled = true //添加页面到滚动面板里 let size = scrollView.bounds.size for (seq,course) in enumerate (courses) { var page = UIView () var imageView= UIImageView (image: UIImage (named:course[ "pic" ]!)) page.addSubview(imageView); page.backgroundColor = UIColor .greenColor() 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 .clearColor() pageControl.numberOfPages = courses.count pageControl.currentPage = 0 //设置页控件点击事件 pageControl.addTarget( self , action: "pageChanged:" , forControlEvents: 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 ) } } |
--- Main.storyboard ---
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <? xml version = "1.0" encoding = "UTF-8" standalone = "no" ?> < document type = "com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version = "3.0" toolsVersion = "6154.21" systemVersion = "13D65" targetRuntime = "iOS.CocoaTouch" propertyAccessControl = "none" useAutolayout = "YES" useTraitCollections = "YES" initialViewController = "BYZ-38-t0r" > < dependencies > < plugIn identifier = "com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version = "6153.13" /> </ dependencies > < scenes > <!--View Controller--> < scene sceneID = "tne-QT-ifu" > < objects > < viewController id = "BYZ-38-t0r" customClass = "ViewController" customModule = "SwiftInAction_008_019" customModuleProvider = "target" sceneMemberID = "viewController" > < layoutGuides > < viewControllerLayoutGuide type = "top" id = "y3c-jy-aDJ" /> < viewControllerLayoutGuide type = "bottom" id = "wfy-db-euE" /> </ layoutGuides > < view key = "view" contentMode = "scaleToFill" id = "8bC-Xf-vdC" > < rect key = "frame" x = "0.0" y = "0.0" width = "480" height = "480" /> < autoresizingMask key = "autoresizingMask" widthSizable = "YES" heightSizable = "YES" /> < subviews > < scrollView clipsSubviews = "YES" multipleTouchEnabled = "YES" contentMode = "scaleToFill" fixedFrame = "YES" translatesAutoresizingMaskIntoConstraints = "NO" id = "MQq-Dc-kWf" > < rect key = "frame" x = "0.0" y = "20" width = "320" height = "460" /> </ scrollView > < pageControl opaque = "NO" contentMode = "scaleToFill" fixedFrame = "YES" contentHorizontalAlignment = "center" contentVerticalAlignment = "center" numberOfPages = "3" translatesAutoresizingMaskIntoConstraints = "NO" id = "Rre-R2-IHS" > < rect key = "frame" x = "150" y = "339" width = "60" height = "37" /> < color key = "pageIndicatorTintColor" white = "0.66666666666666663" alpha = "1" colorSpace = "calibratedWhite" /> </ pageControl > </ subviews > < color key = "backgroundColor" white = "1" alpha = "1" colorSpace = "custom" customColorSpace = "calibratedWhite" /> < simulatedOrientationMetrics key = "simulatedOrientationMetrics" orientation = "landscapeRight" /> </ view > < connections > < outlet property = "pageControl" destination = "Rre-R2-IHS" id = "R3n-tp-UIl" /> < outlet property = "scrollView" destination = "MQq-Dc-kWf" id = "scK-rG-Yia" /> </ connections > </ viewController > < placeholder placeholderIdentifier = "IBFirstResponder" id = "dkx-z0-nzr" sceneMemberID = "firstResponder" /> </ objects > </ scene > </ scenes > </ document > |