iOS14 UIPageControl适配

问题

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

新点

背景样式backgroundStyle

1
2
3
4
5
6

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

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

UIPageControlBackgroundStyleMinimal

自定义小圆点的图片preferredIndicatorImage

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

1
2
3

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

系统图片

自定义图片

每个圆点采用不同图片

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

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

。

不同图片

设置每个圆点都不一样

1
2
3

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

都不一样

圆点的个数不再被限制

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

1	pc.numberOfPages = 40;

圆点个数过

通过拖拽快速移动圆点allowsContinuousInteraction

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

1	pc.allowsContinuousInteraction = YES;

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

1
2
3
4
5

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

} else {
// Fallback on earlier versions
}

三方SDCycleScrollView显示错误

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

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

1
2
3

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1人点赞

日记本

作者：HF_K
链接：https://www.jianshu.com/p/e21985a33ceb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。