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>

时间: 2024-10-11 06:56:37

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

[Swift学习]UIKit学习之滑块控件UISlider的用法

UIKit学习之滑块控件UISlider的用法 Slider: Sliders enable users to interactively modify some adjustable value in an app, such as speaker volume or screen brightness. UISlider: A UISlider object is a visual control used to select a single value from a continuous

iOS中的分页控件(UIPageControl)

#import "RootViewController.h" @interface RootViewController () @end @implementation RootViewController - (void)viewDidLoad { [super viewDidLoad]; /** * UIPageControl 分页控件,提供以下几个功能: 1.展示当前总页数 2.展示当前是第几页 3.切换pageControl的当前显示的点对应显示不同的界面 */ //1.创建控

推荐4个Android引导页控件

Guideshow 快速实现引导页, 2015-08-03 更新 CircleIndicator 一个轻量级的viewpager指示器 ,类似于nexus5 启动器的效果 2015-08-02 更新 XhsWelcomeAnim 小红书欢迎引导第二版 2015-07-10 更新 AppIntro 非常简洁.漂亮的引导页控件,使用简单 2015-07-07 更新 http://www.see-source.com/androidwidget/list.html

百度 flash html5自切换 多文件异步上传控件webuploader基本用法

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签

Atitti usrQBf1801 翻页控件规范 &#160;v2

Atitti usrQBf1801 翻页控件规范  v2 1. 参考api  参考easyui ,.net系列的1 1.1. 翻页流程  初始化翻页控件,以及绑定新页面event onSelectPage2 1.2. 点击下一页2 1.3. 回调新页面时间获取数据,然后绑定在控件上们3 1.4. 翻页技术原理的的参考::4 1.1. 参考api  参考easyui ,.net系列的 翻页api应该参考easyui ,.net系列的 onSelectPage  (pageNumber, pageS

VC单选按钮控件(Radio Button)用法

先为对话框加上2个radio button,分别是Radio1和Radio2. 问题1:如何让Radio1或者Radio2默认选上?如何知道哪个被选上了? 关键是选上,“默认”只要放在OnInitDialog()即可.三种方法可以让它选上, 第一种:((CButton *)GetDlgItem(IDC_RADIO1))->SetCheck(TRUE);//选上((CButton *)GetDlgItem(IDC_RADIO1))->SetCheck(FALSE);//不选上((CButton

MFC标签页控件的使用

MFC标签页控件的使用 1.在对话框中添加一个标签页控件,并为此控件关联一个CTabCtrl类变量m_tabctrl. 2.创建若干个对话框资源作为标签页控件的标签. 修改两个属性: Border:    none   // 边界为空,这样它就没了标题栏 Style:      Child   // 这个模板就可以当作另一个窗口的子窗口了在对话框的初始化函数 3,在对话框的初始化函数OnInitDialog中, 添加初始化标签页控件的代码 3.1)  // 添加标签页,并设定标签名     m_

WPF的ListView控件自定义布局用法实例

本文实例讲述了WPF的ListView控件自定义布局用法.分享给大家供大家参考,具体如下: 概要: 以源码的形式贴出,免得忘记后,再到网上查资料.在VS2008+SP1环境下调试通过 引用的GrayscaleEffect模块,可根据参考资料<Grayscale Effect...>中的位置下载. 正文: 如何布局是在App.xaml中定义源码如下 ? 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

delphi中的XML解析控件TXMLDocument的用法

Delphi中TXMLDocument控件的用法 Delphi中对XML文件的解析做的很好,比直接使用MS的MSXML2_TLB中的接口要方便很多,现称述于下面. 在讲之前先给出一个XML实例,在讲某些部分是要结合实例比较容易理解. 1<?xmlversion="1.0"encoding="gb2312"?><!--文档版本信息,注释格式同HTML--> 2<XMLPackage> 3<clinetinfoip=”202.1