使用页控件可以用来展示多个桌面。比如很多应用第一次登陆时，会在开始页面使用页控件来介绍功能，通过左右滑动来切换页。
通常我们使用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 UIKitclass 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, 100, height: 20)) lbl.text = course["name"] page.addSubview(lbl) page.frame = CGRect(x: CGFloat(seq) * size.width, y: 0, 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> |