iOS14 UIPageControl变化

问题

项目中使用到了SDCycleScrollView来显示轮播图，升级到iOS 14后发现轮播图上的UIPageControl的小黑点都不显示了；查看相关文档发现，iOS 14增加了新的API,导致UIPageControl无法正常显示。=

新点

背景样式backgroundStyle

/// The default background style that adapts based on the current interaction state.
UIPageControlBackgroundStyleAutomatic  = 0,
/// The background style that shows a full background regardless of the interaction
UIPageControlBackgroundStyleProminent  = 1,
/// The background style that shows a minimal background regardless of the interaction
UIPageControlBackgroundStyleMinimal    = 2,

当backgroundStyle设置成UIPageControlBackgroundStyleProminent时会增加一个白色的背景长条。

UIPageControlBackgroundStyleProminent [图片上传中...(iOS14UIPageControl变化_2.jpg-61c92a-1601200082757-0)]

当backgroundStyle设置成UIPageControlBackgroundStyleMinimal时背景会完全贴合UIPageControl的点。

UIPageControlBackgroundStyleMinimal

自定义小圆点的图片preferredIndicatorImage

一般情况下圆点已经能够满足需求，但是有时候希望小圆点是自定义图片。iOS 14中，我们可以通过preferredIndicatorImage来自定义图片了。

pc.preferredIndicatorImage = [UIImage systemImageNamed:@"sun.max.fill"];//系统图片
//或者
pc.preferredIndicatorImage = [UIImage imageNamed:@"flight"];//自定义图片

系统图片
自定义图片

每个圆点采用不同图片

我们可以通过setIndicatorImage:<#(nullable UIImage *)#> forPage:<#(NSInteger)#>设定不同小圆点图片。下面是将第一张图片换成月亮，其他太阳。

pc.preferredIndicatorImage = [UIImage systemImageNamed:@"sun.max.fill"];
[pc setIndicatorImage:[UIImage systemImageNamed:@"moon.fill"] forPage:0];

不同图片

设置每个圆点都不一样

for (NSInteger page = 0; page < pc.numberOfPages; page ++) {
    [pc setIndicatorImage:[UIImage systemImageNamed:[NSString stringWithFormat:@"%ld.circle",page + 1]] forPage:page];
}

都不一样

圆点的个数不再被限制

iOS 14之后UIPageControl的圆点个数将不再受限制，它会自适应去显示圆点。比如设置40个圆点，当前一页无法展示出全部圆点时，它会分页，后面的点会渐渐变小，当滑到后面是会自动更新到下一页。

pc.numberOfPages = 40;

圆点个数过

通过拖拽快速移动圆点allowsContinuousInteraction

iOS 14当圆点个数过多时，我们可以在小圓點上用拖曳的方式快速移动到某个圆点上。allowsContinuousInteraction是用来控制圆点是否可以被拖拽。当它设置成NO时，我们只能通过点击的方式来移动到对应圆点上。

pc.allowsContinuousInteraction = YES;

注意⚠️：这些属性都是iOS 14之后才有的所以我们要处理好对应逻辑

if (@available(iOS 14.0, *)) {

} else {
    // Fallback on earlier versions
}

三方SDCycleScrollView显示错误

因为iOS 14以后UIPageControl设置了背景，导致原来的Frame不足以显示下UIPageControl。

方法1
直接在SDCycleScrollView.m文件代码中加入

if (@available(iOS 14.0, *)) {
    x = 0;
    size.width = self.sd_width;
}

方法1g

注意⚠️：这种方法就是将UIPageControl的frame的x设置为0，宽度设置成当前屏幕宽度，这样就可以显示下了。但是这种方法会导致SDCycleScrollViewPageContolAlimentRight这个属性没有作用了。
方法2
直接在SDCycleScrollView.m文件代码中加入

 if ([self.pageControl isKindOfClass:[TAPageControl class]]) {
        CGRect pageControlFrame = CGRectMake(x, y, size.width, size.height);
        pageControlFrame.origin.y -= self.pageControlBottomOffset;
        pageControlFrame.origin.x -= self.pageControlRightOffset;
        self.pageControl.frame = pageControlFrame;
    }else{
        self.pageControl.translatesAutoresizingMaskIntoConstraints = NO;
        [[self.pageControl.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-_pageControlBottomOffset] setActive:YES];
        [[self.pageControl.heightAnchor constraintEqualToConstant:self.pageControlDotSize.height] setActive:YES];
        if (_pageControlAliment == SDCycleScrollViewPageContolAlimentRight) {
            if (@available(iOS 14.0, *)) {
                [[self.pageControl.rightAnchor constraintEqualToAnchor:self.rightAnchor constant:25] setActive:YES];
            }else{
                [[self.pageControl.rightAnchor constraintEqualToAnchor:self.rightAnchor constant:-_pageControlRightOffset] setActive:YES];
            }
        }else{
            [[self.pageControl.centerXAnchor constraintEqualToAnchor:self.centerXAnchor] setActive:YES];
        }
    }

方法2

注意⚠️：可以通过Pod引入文件修改，将下载文件放入自己项目根目录下，然后在Podfile文件中加入pod 'SDCycleScrollView', :path => 'SDCycleScrollView/'，再执行Pod install即可。

SDCycleScrollView
密码:jtv8