使用页控件可以用来展示多个桌面。比如很多应用第一次登陆时，会在开始页面使用页控件来介绍功能，通过左右滑动来切换页。
通常我们使用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>
|