Swift-页控件（UIPageControl）的用法

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

通常我们使用UIPageControl和UIScrollView相互结合来实现多页切换，滑动页面时页控件标签（即页面下方的小白点）会更新到对应的页面。而直接点击页标签时，滚动条也会滚到相应的页。

（UIPageControl的当前页小圆点和非当前小圆点的颜色是可以设置的，同时如果只有一页的时候也可以选择是否显示圆点）

效果图如下：

代码如下：

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 ---

<?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>