自定义PageControl

上篇文章给scrollview 四个方向添加滑动刷新,今天实现自定义的PageControl,恢复一下自己的动手能力,好久不写东西马上感觉要退化.不是很难,只要是捋一下自己的思路和解决问题方向,静下心来写一点自己喜欢的东西.下面开始.....

• 思路: **pageControl **

• 1.首先是页码个数,页码决定了我们有几个占位的dot,

• 2.pageControll的尺寸,我们有了占位的dot, 还有个动画的dot 就是会跑动的那个具有指示作用的dot,那pagecontrol的尺寸就有activeDot 和 inactiveSizeDot 中最大的那个来决定.

下面开始实现:

我们的pageControl的样式可能需要很多,先建个Base提供数据和基础数据支持,以供设计来选择.其他的动画效果以后慢慢添加:(ps:以后=不写)

#pragma mark ---计算当前的contentView
/**
 首先确定出 最大的 size 目前只 取决于 activeSize 和 inactiveSize 取他们的最大的 宽和高
  indicator 取他们最小的宽和高
 */
- (void)setContenViewSize{
    if (self.numberOfpage == 1) {
        return;
    }
    
    //:获取最大的item的宽度
    CGFloat maxItemSizeW = minItemSizeW;
    CGFloat maxItemSizeH = minItemSizeH;

    if (_activeSize.width >= _inactiveSize.width && _activeSize.width>= minItemSizeW) {
        maxItemSizeW = _activeSize.width;
        
    }else if(_inactiveSize.width >= _activeSize.width && _inactiveSize.width >= minItemSizeW){
        maxItemSizeW = _inactiveSize.width;
    }
    
    //:获取最大的高度
    if (_activeSize.height >= _inactiveSize.height && _activeSize.height>= minItemSizeH) {
        maxItemSizeH = _activeSize.height;
        
    }else if(_inactiveSize.height >= _activeSize.height && _inactiveSize.height >= minItemSizeH){
        maxItemSizeH = _inactiveSize.height;
    }
    self.maxIndicatorSize = CGSizeMake(maxItemSizeW, maxItemSizeH);
    
    
    CGFloat contentViewW = maxItemSizeW * self.numberOfpage + self.columnSpacing * (self.numberOfpage -1);
    CGFloat contentViewH = maxItemSizeH;
    
    //:contentView.frame
    self.contentView.frame = CGRectMake(0, 0, contentViewW, contentViewH);
    self.contentView.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
    
}

获取了pageControlView的frame之后,那我们接下来就开始动画了,动画写在之类里面: 根据外部传入的index 来实现activeDot的动画转场动画.

#pragma mark ---//:更新位置
- (void)updateCurrentPage:(NSInteger)currentIndex{
    NSLog(@"%d",currentIndex);
    
    if (currentIndex > self.numberOfpage - 1) {
        currentIndex = 0;
    }
    CGFloat firstLayerX = (self.maxIndicatorSize.width - self.activeSize.width)*0.5;
    CGFloat firstLayerY = (self.maxIndicatorSize.height - self.activeSize.height)*0.5;

    self.activeLayer.backgroundColor = [UIColor yellowColor].CGColor;
    if (currentIndex == 0) {
        self.activeLayer.frame = CGRectMake(firstLayerX + (self.maxIndicatorSize.width + self.columnSpacing)*currentIndex, firstLayerY, self.activeSize.width, self.activeSize.height);
        return;
    }

    //:动画开始
    [CATransaction begin];
    //:结束后的状态
    [CATransaction setCompletionBlock:^{
        self.activeLayer.frame = CGRectMake(firstLayerX + (self.maxIndicatorSize.width + self.columnSpacing)*currentIndex, firstLayerY, self.activeSize.width, self.activeSize.height);
    }];
    [CATransaction begin];
    CGFloat animaW = self.activeSize.width*0.5 + self.maxIndicatorSize.width*1.5 + self.columnSpacing;
    self.activeLayer.frame = CGRectMake(firstLayerX + (self.maxIndicatorSize.width + self.columnSpacing)*(currentIndex - 1), firstLayerY, animaW, self.activeSize.height);    [CATransaction commit];
    [CATransaction commit];
    [CATransaction commit];



}

具体效果如下:

后面的其他样式的动画会慢慢更新上来,希望会添加.哈哈哈哈嗝