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

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

Swift - 页控件(UIPageControl)的用法的更多相关文章

  1. iOS:分页控件UIPageControl的使用

    分页控件:UIPageControl   功能:通常搭配滚动视图一起使用,设置pagingEnabled=YES即可,UIScrollView会被分割成多个独立页面,用户的滚动体验则变成了页面翻转,一 ...

  2. Atitti usrQBf1801 翻页控件规范  v2

    Atitti usrQBf1801 翻页控件规范  v2 1. 参考api  参考easyui ,.net系列的1 1.1. 翻页流程  初始化翻页控件,以及绑定新页面event onSelectPa ...

  3. MFC ActiveX新增属性页 控件不响应

    在Activex中可以添加自定义的属性页,在新的属性页上添加一个button控件,设置好响应函数后,测试时发现点击button没有响应. 对比之前的主属性页发现,新增属性页的属性“Disabled” ...

  4. 023.MFC_属性页控件(tab control)

    属性页控件属性页->选项卡->对话框CTabCtrl一.建立名为tabCtrl的mfc工程,添加Tab Control控件,设置属性ID为IDC_TAB,并添加变量m_tab 在tabCt ...

  5. Swift - 图像控件(UIImageView)的用法

    1,使用图像控件显示图片 1 2 3 var imageView=UIImageView(image:UIImage(named:"icon")) imageView.frame= ...

  6. Swift UI控件详细介绍(上)

    UI控件 首先介绍一下AppDelegate.swift@UIApplicationMain 调用了OC中的UIApplicationMain函数:UIApplicationMain是iOS应用程序的 ...

  7. DevExpress 控件 GridControl常见用法

    刚接触DevExpress第三方控件,把GridControl的常见用法整理一下,以供参考: 说明: gcTest   GridControl gvText    GridView //隐藏最上面的G ...

  8. Repeater控件的详细用法

    中隔行(交替项)呈现一次.通过设置 AlternatingItemTemplate 元素的样式属性,可以为其指定不同的外观. FooterTemplate在所有数据绑定行呈现之后呈现一次的元素.典型的 ...

  9. Webdriver控制翻页控件,并实现向前向后翻页功能,附上代码,仅供参考,其他类似日期控件的功能可以自己封装

    新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...

随机推荐

  1. c# 课堂总结6 --集合与结构体

    一.集合 使用时必须添加 System.Collections 集合与数组的区别: 1:数组声明了它容纳的元素的类型,而集合不声明.这是由于集合以object形式来存储它们的元素.初始化时集合无需定义 ...

  2. 基于visual Studio2013解决算法导论之002归并排序

     题目 归并排序 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> #in ...

  3. cocos2d-x游戏开发系列教程-坦克大战游戏之子弹的碰撞检测处理

    在上篇我们加上了简单的坦克之间的碰撞检测,这篇我们继续加上子弹之间, 子弹与坦克之间的碰撞检测,对于上一篇碰撞处理不太完美的地方我们继续改进. 1.子弹之间的碰撞 //玩家子弹和敌方子弹之间的碰撞 C ...

  4. 基于visual Studio2013解决C语言竞赛题之0702函数设计

       题目

  5. 【代码】Android: 怎样设置app不被系统k掉

    有一种方法可以设置app永远不会被kill,AndroidManifest.xml 中添加: android:persistent="true" 适用于放在/system/app下 ...

  6. [HTML5实现人工智能]小游戏《井字棋》发布,据说IQ上200才能赢

    一,什么是TicTacToe(井字棋)   本 游戏 为在下用lufylegend开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿 ...

  7. Ch05 视图模型

    5.1  什么是视图模型 5.1.1  在线商店示例 5.1.2  建立视图模型 5.1.3  交付表现模型 5.1.4  ViewData.Model 5.2  表现用户输入 5.2.1  设计(输 ...

  8. hdu4431 Mahjong

    Mahjong Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  9. [置顶] DX报表的开发流程(1)

    DevExpress.XtraReports简称为DX报表. 本文主要介绍下VS2010项目中如何开发DX报表,具体的内容包括: (1)下载安装 (2)报表文件创建 (3)页面文件的创建 (4)页面的 ...

  10. css 水平居中的办法

    <div style="width: 100%; text-align: center; margin: auto;"> <div style="dis ...