uipagecontrol_看看iOS 14的新UIPageControl

uipagecontrol

In this article, we will discuss the following new changes to UIPageControl in iOS 14:

在本文中，我们将讨论iOS 14中对UIPageControl的以下新更改：

• Background style
  背景风格
• Custom indicator image
  自定义指标图片
• Custom indicator image at a specific index
  特定指标处的自定义指标图像
• Infinite pages (new scrubbing behavior)
  无限页面(新的清理行为)

背景样式 (Background Style)

We have a new styling option for our UIPageControl called BackgroundStyle. This is an enum with three values:

我们为UIPageControl提供了一个新的样式选项，称为BackgroundStyle 。 这是一个具有三个值的枚举：

The usage is quite simple. By default, it is minimal:

用法很简单。 默认情况下，它是minimal ：

pageControl.backgroundStyle = .prominent

Note: When an interaction state is continuous, the background style changes automatically if you set backgroundStyle to automatic. I discuss interaction APIs later in this article.

注意：当交互状态为 continuous 状态时 ，如果将 backgroundStyle 设置 为 automatic ，则背景样式会自动更改 。 我将在本文后面讨论交互API。

Top: prominent style (new) vs. bottom: minimal style (old)

顶部：突出样式(新)与底部：最小样式(旧)

自定义指标图片 (Custom Indicator Image)

Apple has introduced a new API to set a custom icon or image to our UIPageControl compared to the old circular icon.

与旧的圆形图标相比，Apple引入了新的API，可为我们的UIPageControl设置自定义图标或图像。

I remember a lot of effort was dedicated to achieving this by writing a custom UIPageControl class. The property name is below:

我记得通过编写自定义UIPageControl类为实现此目的付出了很多努力。 属性名称如下：

/// The preferred image for indicators. Symbol images are recommended. Default is nil.
 @available(iOS 14.0, *)
 open var preferredIndicatorImage: UIImage?

The usage is quite simple. I have used SF Symbol for this demo:

用法很简单。 我已在此演示中使用了SF Symbol：

pageControl.preferredIndicatorImage = UIImage.init(systemName: “heart.fill”)

特定指标的自定义指标图像 (Custom Indicator Image at Specific Index)

/**
 * @abstract Returns the override indicator image for the specific page, nil if no override image was set.
 * @param page Must be in the range of 0..numberOfPages
 */
 @available(iOS 14.0, *)
 open func indicatorImage(forPage page: Int) -> UIImage?

Do you remember the Yahoo Weather app that came pre-installed in your iPhone? It has the UIPageControl below where the first icon is a location icon that denotes the current location. The interesting part is they had this control from the very beginning. I always used to think about the implementation and effort required just to achieve this.

你还记得雅虎天气吗 您的iPhone中已预装的应用程序？ 它在下面具有UIPageControl ，其中第一个图标是表示当前位置的位置图标。 有趣的是，他们从一开始就拥有这种控制权。 我一直都在思考实现此目标所需的实现和工作。

Yahoo Weather app UIPageControl screenshot

Yahoo Weather应用程序UIPageControl屏幕截图

Now it’s a piece of cake because iOS 14 has given us a new API with which you can set a custom icon for each index of your UIPageControl.

现在这很容易，因为iOS 14为我们提供了一个新的API，您可以使用它为UIPageControl每个索引设置自定义图标。

I have used SF Symbol for this demo:

我已在此演示中使用了SF Symbol：

pageControl.setIndicatorImage(UIImage.init(systemName: “location.fill”),
 forPage: 0)

Just imagine the customization you can do with the power to set each icon and the user experience you can give to our user.

试想一下，您可以通过设置每个图标的能力进行定制，并可以为我们的用户提供用户体验。

Below is an example where a custom icon is set to page control based on different rainy weather conditions.

下面是一个示例，其中根据不同的阴雨天气将自定义图标设置为页面控制。

无限页(新的清理行为) (Infinite Pages (New Scrubbing Behavior))

With the new UIPageControl, you can set an infinite number of pages. Well, don’t create infinitely… but how cool is that?

使用新的UIPageControl ，您可以设置无限数量的页面。 好吧，不要无限创造……但是那有多酷？

The usage is quite simple. I have set it to 400 here for this demo:

用法很简单。 在此演示中，我将其设置为400 ：

pageControl.numberOfPages = 400

Prior to iOS 14, we could set any number of pages. So what did Apple do this year to improve scenarios like this?

在iOS 14之前，我们可以设置任意数量的页面。 那么，苹果今年做了哪些工作来改善这种情况？

Well, it has introduced a new API and completely new UX for handling this very issue.

好吧，它引入了新的API和全新的UX来处理此问题。

Apple has provided a custom interaction for our new UIPageControl in iOS14 called InteractionState. It is an enum with two interaction types:

苹果为UIPageControl中的新UIPageControl提供了一个自定义的交互UIPageControl ，称为InteractionState 。 它是一个具有两种交互类型的枚举：

• Discrete
  离散的
• Continuous
  连续

In iOS 14, the default value of UIPageControl’s interaction is continuous:

在iOS 14中， UIPageControl的交互的默认值是continuous ：

You can change the interaction state to discrete by setting the property below to false:

您可以通过将下面的属性设置为false来将交互状态更改为discrete ：

/// Returns YES if the continuous interaction is enabled, NO otherwise. Default is YES.
 @available(iOS 14.0, *)
 open var allowsContinuousInteraction: Bool

You can also add an observer to change the value of the interactionState property and check the current interaction state with the property below:

您也可以添加观察者以更改interactionState属性的值，并使用以下属性检查当前的交互状态：

/// The current interaction state for when the current page changes. Default is UIPageControlInteractionStateNone
 @available(iOS 14.0, *)
 open var interactionState: UIPageControl.InteractionState { get }

Below, I have shared GIFs of these two types of interactions. You can see that continuous interaction helps us to reach any index of our UIPageControl with a drag behavior. For the discrete interaction, we tap on it and we move to the next index one by one.

下面，我共享了这两种交互类型的GIF。 您会看到，持续的交互可以帮助我们通过拖动行为到达UIPageControl任何索引。 对于离散交互，我们点击它，然后一个接一个地移到下一个索引。

Discrete interaction

离散互动

Continuous interaction

持续互动

结论 (Conclusion)

Thank you for reading. I hope this article can help you customize UIPageControl in your app and bring some life to your old control.

感谢您的阅读。 我希望本文可以帮助您自定义应用程序中的UIPageControl ，并为您的旧控件带来一些生气。

翻译自: https://medium.com/better-programming/take-a-look-at-ios-14s-new-uipagecontrol-3207a10212b9

uipagecontrol