iOS UIPageControl

In this tutorial, we’ll be discussing and implementing the UIPageControl element in our iOS Application.

在本教程中，我们将在iOS应用程序中讨论和实现UIPageControl元素。

UIPageControl (UIPageControl)

UIPageControl is inherited from UIControl. A UIPageControl displays horizontal dots with each dot corresponding to a different Page in the ViewController.

UIPageControl继承自UIControl。 UIPageControl显示水平点，每个点对应于ViewController中的不同Page。

For example, a UIPageControl is used to browse through different screens of a Food Menu.

例如，UIPageControl用于浏览食物菜单的不同屏幕。

A UIPageViewController is used to browse through different pages where each page is a Child View Controller.

UIPageViewController用于浏览不同的页面，其中每个页面都是一个子视图控制器。

Following are some of the properties and helper functions of the UIPageControl class.

以下是UIPageControl类的一些属性和辅助函数。

• currentPage : The current page that is highlighted in the UIPageControl. This returns the index of the page.
  currentPage ：UIPageControl中突出显示的当前页面。 这将返回页面的索引。
• numberOfPages : The number of pages displayed(equal to the number of dots).
  numberOfPages ：显示的页面数（等于点数）。
• hidesForSinglePage : A Boolean value to toggle the visibility of the PageControl on the current page.
  hidesForSinglePage ：一个布尔值，用于切换当前页面上PageControl的可见性。
• pageIndicatorTintColor : The tint color that’s shown on the current page.
  pageIndicatorTintColor ：当前页面上显示的色调颜色。
• currentPageIndicatorTintColor : The tint color to be used for the current page indicator.
  currentPageIndicatorTintColor ：用于当前页面指示器的色彩颜色。
• defersCurrentPageDisplay : A Bool value that controls when the current page is displayed.
  defersCurrentPageDisplay ：一个Bool值，控制何时显示当前页面。
• updateCurrentPageDisplay() : Updates the page indicator property to the current page.
  updateCurrentPageDisplay() ：将页面指示符属性更新为当前页面。

When a user taps on the left of the UIPageControl, the user is taken to the previous page.
When the user taps on the right of the UIPageControl, the user is taken to the next page.

当用户点击UIPageControl的左侧时，该用户将转到上一页。
当用户点击UIPageControl的右侧时，该用户将转到下一页。

We can detect the clicks by creating an IBAction function from the Interface Builder or using Selectors and Targets programmatically. We’ll stick with the former way in this tutorial.

我们可以通过在Interface Builder中创建IBAction函数或以编程方式使用选择器和目标来检测点击。 在本教程中，我们将坚持前一种方式。

The valueChanged event gets triggered whenever you click on the left/right of the UIPageControl.

每当您单击UIPageControl的左侧/右侧时，都会触发valueChanged事件。

In the following section, we’ll be creating a Simple iOS Application in which the Label text and the background of the UIPageControl change when you change the page.

在下一节中，我们将创建一个简单的iOS应用程序，当您更改页面时，其中Label文本和UIPageControl的背景也会更改。

以编程方式创建UIPageControl (Creating a UIPageControl programmatically)

let pageControl = UIPageControl()
        pageControl.frame = CGRect(x: 100, y: 100, width: 300, height: 300)
        pageControl.numberOfPages = 2;
        pageControl.currentPage = 0;
        view.addSubview(pageControl)

项目情节提要 (Project Storyboard)

You can set the attributes in the right-hand side attributes inspector also.

您也可以在右侧属性检查器中设置属性。

In the above storyboard,

在以上情节提要中，

• We have set the UIPageControl constraints to the screen width.
  我们已经将UIPageControl约束设置为屏幕宽度。
• Added a UILabel at the top.
  在顶部添加了UILabel。
• Ctrl + Drag the UIPageControl to create an Outlet in the ViewController
  Ctrl +拖动UIPageControl在ViewController中创建一个插座
• Ctrl + Drag the UIPageControl to create an IBAction in the ViewController. This gets called whenever we click on the UIPageControl.
  Ctrl +拖动UIPageControl在ViewController中创建IBAction。 每当我们单击UIPageControl时，都会调用此方法。
• Ctrl + Drag the UILabel to create an IBOutlet in the ViewController.
  Ctrl +拖动UILabel在ViewController中创建IBOutlet。

The code for the ViewController.swift looks like this:

ViewController.swift的代码如下所示：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!
    
    @IBOutlet weak var myPageControl: UIPageControl!
    
    @IBAction func changePage(_ sender: UIPageControl) {
    
        myLabel.text = "Page \(sender.currentPage + 1)"
        
        switch sender.currentPage {
        case 0:
            sender.backgroundColor = UIColor.black
        case 1:
            sender.backgroundColor = UIColor.gray
        case 2:
            sender.backgroundColor = UIColor.orange
        default:
            sender.backgroundColor = UIColor.brown
        }
        
        
        
    
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myPageControl.numberOfPages = 4
        myPageControl.pageIndicatorTintColor = UIColor.yellow
        myPageControl.currentPageIndicatorTintColor = UIColor.blue
        
    }

}

We’ve set the number of pages and the colors on the UIPageControl programmatically.
Every time the UIPageControl is clicked and the valueChanged event is triggered, the label and the UIPageControl backgroundColor is changed.

我们已经以编程方式在UIPageControl上设置了页面数和颜色。
每次单击UIPageControl并触发valueChanged事件时，都会更改标签和UIPageControl backgroundColor。

The output of the above application in action is given below:

上面应用程序的输出如下：

That brings an end to this tutorial. You can download the project from the link below.

这样就结束了本教程。 您可以从下面的链接下载项目。

iOSUIPageControl iOSUIPageControl

翻译自: https://www.journaldev.com/22847/ios-uipagecontrol