iOS 14 UIPageControl对比、升级与适配

一、UI层级关系改变

1.iOS 14以前

iOS 14以前 iOS 14以前

2.iOS 14以后

iOS 14以后
iOS 14以后

所以系统 在上级iOS 14以后，会发现UIPageControl的位置会有一定位移。因为之前PageControl的宽度，是单纯由指标图片组成的。现在会被_UIPageControlContentView撑大。如果布局是自适应的写法，会导致位移。
我的修改方式是：

    if(@available(iOS 14.0, *)){
        NSArray *arr = [self.pageControl subviews];
        UIView *ContentView = arr[0];
        CGFloat f = CGRectGetWidth(self.pageControl.bounds)-CGRectGetWidth(ContentView.bounds);
        @weakify(self)
        [self.pageControl mas_updateConstraints:^(MASConstraintMaker *make) {
            @strongify(self)
            make.right.mas_equalTo(self).offset(f/2-10);
        }];
    }

或

        if(@available(iOS 14.0, *)){
            self.pageControl.backgroundStyle = UIPageControlBackgroundStyleMinimal;
        }
         //self.pageControl再移动10px

二、UIPageControl新增属性

1. UIPageControlBackgroundStyle 背景样式

/// The preferred background style. Default is UIPageControlBackgroundStyleAutomatic on iOS, and UIPageControlBackgroundStyleProminent on tvOS.
@property (nonatomic, assign) UIPageControlBackgroundStyle backgroundStyle API_AVAILABLE(ios(14.0));

UIPageControlBackgroundStyle

2. UIPageControlInteractionState

/// The current interaction state for when the current page changes. Default is UIPageControlInteractionStateNone
@property (nonatomic, assign, readonly) UIPageControlInteractionState interactionState API_AVAILABLE(ios(14.0));

typedef NS_ENUM(NSInteger, UIPageControlInteractionState) {
    /// The default interaction state, where no interaction has occured.
    UIPageControlInteractionStateNone        = 0,
    /// The interaction state for which the page was changed via a single, discrete interaction.
    UIPageControlInteractionStateDiscrete    = 1,
    /// The interaction state for which the page was changed via a continuous interaction.
    UIPageControlInteractionStateContinuous  = 2,
} API_AVAILABLE(ios(14.0));

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

• Discrete
• Continuous

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

• 离散的
• 连续的

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.
@property (nonatomic, assign) BOOL allowsContinuousInteraction API_AVAILABLE(ios(14.0));

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属性的值，并使用以下属性检查当前的交互状态：UIPageControl.InteractionState

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任何索引。 对于离散交互，我们点击它，然后一个接一个地移到下一个索引。

UIPageControlInteractionStateDiscrete 离散交互
UIPageControlInteractionStateContinuous 连续交互

3. 自定义指标图片

/// The preferred image for indicators. Symbol images are recommended. Default is nil.
@property (nonatomic, strong, nullable) UIImage *preferredIndicatorImage API_AVAILABLE(ios(14.0));

pageControl.preferredIndicatorImage

4. 为不同的位置设置自定义指标图片

/*!
 * @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
 */
- (nullable UIImage *)indicatorImageForPage:(NSInteger)page API_AVAILABLE(ios(14.0));


/*!
 * @abstract Override the indicator image for a specific page. Symbol images are recommended.
 * @param image    The image for the indicator. Resets to the default if image is nil.
 * @param page      Must be in the range of 0..numberOfPages
 */
- (void)setIndicatorImage:(nullable UIImage *)image forPage:(NSInteger)page API_AVAILABLE(ios(14.0));

1*px3JM5wmB6mPgy8Pfe4JWA.png

参考资料：

1.Take a Look at iOS 14’s New UIPageControl https://medium.com/better-programming/take-a-look-at-ios-14s-new-uipagecontrol-3207a10212b9
2.uipagecontrol_看看iOS 14的新UIPageControl https://blog.csdn.net/weixin_26638123/article/details/108169945