Swift - 页控件（UIPageControl）的用法

使用页控件可以用来展示多个桌面。比如很多应用第一次登陆时，会在开始页面使用页控件来介绍功能，通过左右滑动来切换页。

通常我们使用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>