iOS 自定义实现 UIPageControl 功能 (OC)

update:
时间繁忙没来得及更完,先放上来第一版代码(见文末)。
跟公司大佬交流了一下,代码中还有很多不完善的地方(不影响使用),日后会做优化。


前言

你是否有过 UIPageControl 的小圆点突然不见了的经历?
你是否曾面临设计师小姐姐 自定义 UIPageControl 图片、间距 的需求?
—— 恭喜你,本篇文章即为解决以上问题而诞生!

正文

Apple 在 iOS 14 更新了 UIPageControl,提供了很多新的功能,相关细节可以参考这篇文章:(文章)

总结一下 iOS14 针对UIPageControl 的变化:

  1. 背景
  2. 自动翻页

感觉上是变得更炫酷了,但仔细研究我们可以发现,这为实际开发带来了许多问题。首先,UIPageControl 的视图层级关系已改变 ⬇️
(这里我会画张图)
可以发现,Apple 在 原来的小圆点和UIPageControl之间加了两个视图,这就导致UIPageControl需要的frame大小比原来的更大,同时我们也无法通过原来的方式改变圆点的间距。

其次,自定义图片的方式已改变⬇️
……

以上种种导致以往在 iOS 14 以前版本的实现方法在 iOS 14 不适用了。那怎么办呢?直观的想法是,针对iOS14的新特性另实现一套方法,代码里判断系统版本就好。我最开始也是这么做的,绞尽脑汁设了图片、改了间距,最后实现了如下效果⬇️
(此处应有一张动图)

……啊啊啊啊,这就是自动翻页的坑啊!研究了半天也不知道怎么改Indicator。好吧,无奈之下我决定自定义实现一个简易的UIPageControl,继承 UIView,没有 iOS14 带来的新特性,也更符合我们的业务需求,同时也避免了以后版本更新可能带来的新一波麻烦。
(在此本菜鸡有个感想,有时候迁就官方新变化不如自己动手丰衣足食)

实现

代码地址:SYPageControl

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本Demo使用UICollectionView实现自动无限轮播功能。 主要功能: 1.实现自动轮播,可修改轮播的时间 2.轮播图片可以来自本地,也可来自网络,通过单独的方法进行设置即可。对于加载网络图片时,Demo中使用了YYWebImage,也可自行替换成SDWebImage。 3.重写了和系统UIPageControl一样的功能,可用图片代替PageControl上的点点,也可自定义其颜色以及切换动画。 使用方法:使用方法比较简单。 /** * 加载本地图片Banner */ - (void)setupLocalBannerImageView { NSArray *array = @[@"1.png", @"2.png", @"3.png", @"4.png", @"5.png"]; FFBannerView *bannerVew = [FFBannerView bannerViewWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 200) locationImageArray:array]; bannerVew.timeInterval = 2.0; [self.view addSubview:bannerVew]; } /** * 加载网络图片Banner */ - (void)setupNetWorkBannerImageView { NSArray *array = @[@"http://i3.download.fd.pchome.net/t_960x600/g1/M00/07/09/oYYBAFMv8q2IQHunACi90oB0OHIAABbUQAAXO4AKL3q706.jpg", @"http://images.weiphone.net/attachments/photo/Day_120308/118871_91f6133116504086ed1b82e0eb951.jpg", @"http://benyouhuifile.it168.com/forum/macos/attachments/month_1104/110425215921926a173e0f728e.jpg", @"http://benyouhuifile.it168.com/forum/macos/attachments/month_1104/1104241737046031b3a754f783.jpg"]; FFBannerView *bannerVew = [FFBannerView bannerViewWithFrame:CGRectMake(0, 250, [UIScreen mainScreen].bounds.size.width, 200) netWorkImageArray:array placeHolderImage:nil]; bannerVew.timeInterval = 2.0; bannerVew.pageControlStyle = FFPageControlStyleMiddle; bannerVew.delegate = self; [self.view addSubview:bannerVew]; } 以上方式即可简单使用,如需自定义PageControl也可继承FFAbstractDotView,做些基本的设置即可。 gitHub下载地址:喜欢的朋友请给个星呗! 欢迎各位一起来讨论,有问题请发邮箱270452746@qq.com或者直接加我QQ:270452746进行讨论。谢谢!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值