iOS自定义UIPageControl

写在前面

我就知道会有这一天,之前因为公司的APP弹窗的种类太多,不得不自己写一个弹窗类,为每一个弹窗类型设定一个类。现在也是因为分页符的类型太多,不得不自定义。网上的都不符合自己的需求,所以自己写了一个,贴出来,如果写的不好希望大家能给修改意见。

代码

.h文件


#import <UIKit/UIKit.h>

typedef enum : NSInteger{
    //自定义pagecontrol的类型
    NKPageControlStyleA,
    NKPageControlStyleB,
}NKPageControlStyle;

@interface NKPageControl : UIPageControl

- (instancetype)initWithStyle:(NKPageControlStyle)pageControlStyle;


@end


复制代码

.m文件


#import "NKPageControl.h"

@interface NKPageControl ()

@property (nonatomic, assign) NKPageControlStyle style;

@end

@implementation NKPageControl

-(instancetype) initWithStyle:(NKPageControlStyle)pageControlStyle
{
    self = [super init];
    
    //在这里获取到创建pageControl的种类
    _style = pageControlStyle;
    
    return self;
}

-(void) updateDots
{
    if (_style == NKPageControlStyleA)
    {
        //循环获取每一个小圆点(小圆点的类型是UIView)
        for (int i = 0; i < self.subviews.count; i++)
        {
            if (i == 0)
            {
                //获取到一个小圆点
                UIView *dot = [self.subviews objectAtIndex:i];
                dot.backgroundColor = [UIColor clearColor];
                //创建imageView放在小圆点上
                UIImageView *imageView;
                if (dot.subviews.count == 0)
                {
                    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, dot.frame.size.width, dot.frame.size.height)];
                    [dot addSubview:imageView];
                }
                else
                {
                    imageView = dot.subviews.firstObject;
                }
                //判断小圆点是否是当前页面,根据不同状态设置不同图片
                if (i == self.currentPage)
                {
                    imageView.image = [UIImage imageNamed:@"page_main_selected"];
                }
                else
                {
                    imageView.image = [UIImage imageNamed:@"page_main"];
                }
            }
        }
    }
    else if (_style == NKPageControlStyleB)
    {
        //自定义种类    
    }
}

-(void) setCurrentPage:(NSInteger)page
{
    [super setCurrentPage:page];
    //每次设置当前活动的小圆点时,重新配置图片
    [self updateDots];
}

复制代码

使用

    _pageControl = [[NKPageControl alloc] initWithStyle:NKPageControlStyleA];
    //常规设置
    _pageControl.frame = CGRectMake(0 , 0, WIDTH_VIEW, 20);//小圆点控件的大小位置
    _pageControl.numberOfPages = 4;//小圆点个数
    _pageControl.currentPage = 0;
    //配置颜色
    //    _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    //    _pageControl.currentPageIndicatorTintColor = [UIColor lightGrayColor];
    _pageControl.userInteractionEnabled = NO;//关闭与  用户的交互
    //添加导视图中
    [self.view addSubview:_pageControl];

复制代码

pageControl的图片类型一样

如果pageControl的图片类型一样的话,可以使用KVC设置图片,代码如下


[pageControl setValue:[UIImage imageNamed:@"image1"] forKeyPath:@"_pageImage"];

[pageControl setValue:[UIImage imageNamed:@"image2"] forKeyPath:@"_currentPageImage"];

复制代码
本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进行讨论。谢谢!
最新SWIFT 4.0版自定义PageControl,椭圆,空心圆,图片点 刚开始做swift项目,可用资源少而且每个swift版本变化太大,以前的都不能拿来直接用,现在我参考一个object-C的PageControl自己做了一个swift版的, 参考OC资源链接:https://github.com/hackxhj/EllipsePageControl, 非常感谢原作者。 本项目在原OC的功能基础上进行的改进,增加了自定义点的宽度,点的layer,不是当前点的图片等功能 基本能满足大部分的需求,写的很简单,大家一看就懂,欢迎大家使用 由于水平有限,项目中有改进之处忘各位大神给与指点,以求不断完善 本人联系方式:wei287030375@sina.com 如果觉得还可以的话给个star吧,也是对以后进行创作的一种鼓励,谢谢 效果图: image 以下是部分代码: class WEIPageControl: UIControl { var localNumberOfPages = NSInteger()//分页数量 var localCurrentPage = NSInteger()//当前点所在下标 var localPointSize = CGSize()//点的大小 var localPointSpace = CGFloat()//点之间的间距 var localOtherColor = UIColor()//未选中点的颜色 var localCurrentColor = UIColor()//当前点的颜色 var localOtherImage: UIImage?//未选中点的图片 var localCurrentImage: UIImage?//当前点的图片 var localIsSquare = Bool()//是否是方形点 var localCurrentWidthMultiple = CGFloat()//当前选中点宽度与未选中点的宽度的倍数 var localOtherBorderColor: UIColor?//未选中点的layerColor var localOtherBorderWidth: CGFloat?//未选中点的layer宽度 var localCurrentBorderColor: UIColor?//未选中点的layerColor var localCurrentBorderWidth: CGFloat?//未选中点的layer宽度 var clickIndex: ((_ result: NSInteger?) -> ())? 在ViewController中使用 //方形点举例 class ViewController: UIViewController, UIScrollViewDelegate { pageC pageControl3.frame = CGRect.init(x: left, y: scrollView3.frame.maxY, width: width, height: 20) pageControl3.numberOfPages = pageCount//总页数 pageControl3.isSquare = true//设置为方型点 pageControl3.currentWidthMultiple = 2.5//当前点的宽度为其他点的2.5倍 pageControl3.currentColor = UIColor.red pageControl3.otherColor = UIColor.blue pageControl3.pointSize = CGSize.init(width: 14, height: 6)//方点的size pageControl3.clickPoint { (index) in//方点的点击事件 self.scrollView3.setContentOffset(CGPoint.init(x: width * CGFloat(index!), y: 0), animated: true) } self.view.addSubview(pageControl3) 代码用起来就是这么简单,欢迎大家使用, 本项目github地址:https://github.com/wei287030375/WEIPageControl
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值