美文网首页
UIPageControl的自定义

UIPageControl的自定义

作者: 见哥哥长高了 | 来源:发表于2016-12-02 13:18 被阅读226次

    根据项目开发的需要,系统为的UIPageControl的样式可能并不是我们想要的,这个时候我们就需要根据自己实际需求情况自定义UIPageControl
    例如:


    自定义方式1
    自定义方式2

    那么这种效果怎么实现呢?别的不多说,我们上代码代码:
    首先:我们自定义一个类:CustomPageControl类 其父类是UIView

    .h

    #import <UIKit/UIKit.h>
    @interface CustomPageControl : UIView
    
    typedef enum: NSInteger
    {
        //默认类型/圆形
        PageControlStyleCircle = 0,
        //正方形
        PageControlStyleSquare,
        
        //......
    }PageControlStyle;
    
    @property(nonatomic,assign)NSInteger numberOfPags; //点个数
    @property(nonatomic,assign)NSInteger currentPags;  //当前点位置
    
    @property(nonatomic,strong)UIColor *selectedColor; //选中的色
    @property(nonatomic,strong)UIColor *backPageColor; //背景色
    
    @property(nonatomic,assign)PageControlStyle pageControlStyle;//类别
    
    //自定义初始化方法
    -(id)initWithFrame:(CGRect)frame pageControlStyle:(PageControlStyle)pageControlStyle ;
    @end
    

    .m

    初始化

    -(id)initWithFrame:(CGRect)frame pageControlStyle:(PageControlStyle)pageControlStyle{
        if (self = [super initWithFrame:frame]) {
            //默认设置
            _backPageColor = [UIColor darkTextColor];
            _selectedColor = [UIColor whiteColor];
            _pageControlStyle = pageControlStyle;
            _currentPags = 0;
        }
        return self;
    }
    

    设置PageView

    -(void)setNumberOfPags:(NSInteger)numberOfPags{
        if (_numberOfPags != numberOfPags) {
            _numberOfPags = numberOfPags;
            CGFloat margin = 10;
            NSLog(@"%f",self.frame.size.width);
            CGFloat width = self.frame.size.width - (numberOfPags - 1)*margin;
            CGFloat pointWidth = width / numberOfPags;
            
            for (int i = 0; i < numberOfPags; i++) {
                UIView *aview = [[UIView alloc]init];
                aview.frame = CGRectMake((margin + pointWidth) * i, 0, pointWidth, pointWidth);
                aview.backgroundColor = _backPageColor;
                switch (_pageControlStyle) {
                    case PageControlStyleCircle:
                        aview.layer.cornerRadius = pointWidth / 2 ;
                        aview.layer.masksToBounds = YES;
                        break;
                       case PageControlStyleSquare:
                        break;
                    default:
                        break;
                }
                [self addSubview:aview];
                
                /**
                 *  设置cuurrentPag
                 */
                if (i == 0) {
                    if (_selectedColor) {
                        aview.backgroundColor = _selectedColor;
                    }
                    else
                    {
                        aview.backgroundColor = [UIColor whiteColor];
                    }
                }
            }
        }
    }
    

    当前的currentPage

    -(void)setCurrentPags:(NSInteger)currentPags{
        if (_currentPags != currentPags) {
            _currentPags = currentPags;
            if (self.subviews.count) {
                for (UIView *aView in self.subviews) {
                    aView.backgroundColor = _backPageColor;
                }
                UIView *aView = self.subviews[_currentPags];
                aView.backgroundColor = _selectedColor;
            }
        }
    }
    

    设置选中的颜色

    -(void)setSelectedColor:(UIColor *)selectedColor{
        if (_selectedColor != selectedColor) {
            _selectedColor = selectedColor;
            if (self.subviews.count) {
                UIView *aView = self.subviews[_currentPags];
                aView.backgroundColor = _selectedColor;
            }
        }
    }
    

    设置背景色

    -(void)setbackgroundColor:(UIColor *)backgroundColor{
        if (_backPageColor != backgroundColor) {
            _backPageColor = backgroundColor;
            if (self.subviews.count != 0) {
                for (UIView *aView in self.subviews) {
                    aView.backgroundColor = _backPageColor;
                }
                UIView *aView = self.subviews[_currentPags];
                aView.backgroundColor = _selectedColor;
            }
        }
    }
    

    以上是对UIPageControl的自定义 那么使用起来就更简单了
    我们导入头文件

    #import "CustomPageControl.h"
    
    @interface ViewController ()<UIScrollViewDelegate>
    {    
        CustomPageControl *pageControl;
        UIScrollView *scrollView;
    }
    @end
    #define screenWidth self.view.frame.size.width
    #define screenHeight self.view.frame.size.height
    

    在viewDidLoad 中:

        scrollView = [[UIScrollView alloc]init];
        scrollView.frame= CGRectMake(0, 0, screenWidth, screenHeight);
        scrollView.contentSize = CGSizeMake(5 * screenWidth, screenHeight);
        scrollView.delegate =self;
        scrollView.pagingEnabled = YES;
        scrollView.bounces = NO;
        [self.view addSubview:scrollView];
        
        
        for (int i = 1; i <= 5; i++) {
            UIImageView *aImageView = [[UIImageView alloc]init];
            aImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
    
            aImageView.frame = CGRectMake((i - 1) * screenWidth, 0, screenWidth, screenHeight);
            aImageView.contentMode = UIViewContentModeScaleAspectFit;
            [scrollView addSubview:aImageView];
        }
        pageControl = [[CustomPageControl alloc]initWithFrame:CGRectMake(100, screenHeight - 50, screenWidth - 200, 35) pageControlStyle:PageControlStyleSquare];
    //    pageControl.backgroundColor = [UIColor redColor];
        pageControl.backPageColor = [UIColor cyanColor];
        pageControl.selectedColor = [UIColor blackColor];
        pageControl.numberOfPags = 5;
        [self.view addSubview:pageControl];
    

    由于 scrollView.delegate =self; 我们实现UIScrollViewDelegate中的scrollViewDidScroll: 方法 用来监听在scrollView滚动的时候的偏移量 来改变pageControl的显示样式:

    - (void)scrollViewDidScroll:(UIScrollView *)scrollVi
    {
        CGFloat size = scrollView.contentOffset.x;
        NSInteger index = (size/scrollView.frame.size.width) + 0.5;
        NSLog(@"%f-%ld",size,index);
        pageControl.currentPags = index;
    }
    

    此时 运行程序 就是我们想要看到的效果了。。。

    相关文章

      网友评论

          本文标题:UIPageControl的自定义

          本文链接:https://www.haomeiwen.com/subject/abzfmttx.html