模仿荷包的一个小小的滑动块

一直在用荷包这App,感觉这个App整体真的不错,一直想做一个滑块,无意中看到这个,今天有时间就做了一个小Demo ,话不多说,上图片。。。。

#######效果图 <荷包原始效果动态的可以自己下载一个看看>

EA680F65C7FE37C7036D814398DFBC5A.jpg

#######效果图 <彬哥效果 >

2.gif

#######部分代码自定义的CustomSlider.H


/** 回调 */
@property (nonatomic,copy)changeValueBlock block;

/**
 初始化

 @param frame       位置
 @param defaultIndx 默认选中那个点

 */
- (instancetype)initWithFrame:(CGRect)frame WithDefaultIndx:(CGFloat)defaultIndx WithDefaultPicName:(NSString *)PicNameStr;

#######部分代码自定义的CustomSlider.M

- (instancetype)initWithFrame:(CGRect)frame WithDefaultIndx:(CGFloat)defaultIndx WithDefaultPicName:(NSString *)PicNameStr
{
    if (self = [super initWithFrame:frame  ]) {
        picName = PicNameStr;
        [self setUpSubViews];
        self.defaultIndx=defaultIndx;
    }
    return self;
}

#pragma mark  ====================== 创建子控件 ======================
- (void)setUpSubViews
{
    UILabel * bgLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, CustomHeight/2,CustomWidth , 2)];
    bgLabel.backgroundColor = [UIColor orangeColor];
    bgLabel.userInteractionEnabled = YES;
    CGFloat smallLableWidth = PointWidth;
    for (int i =0; i< PointNum; i++) {
        UILabel * smallPoitLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0,8, 8)];
        smallPoitLabel.center = CGPointMake(DistanceWidth + (smallLableWidth * i) , 1);
        smallPoitLabel.layer.cornerRadius = 4;
        smallPoitLabel.clipsToBounds = YES;
        smallPoitLabel.backgroundColor =[UIColor orangeColor];
        [bgLabel addSubview:smallPoitLabel];
        
    }
    [self addSubview:bgLabel];
    
    //图片
    UIImageView * sliderImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, CustomHeight/2 +1, 40, 40)];
    sliderImageView.image = [UIImage imageNamed:picName];
    [self addSubview:sliderImageView];
    self.sliderImageView = sliderImageView;
    
}


-(void)setDefaultIndx:(CGFloat)defaultIndx{
     CGFloat withPress=defaultIndx/(PointNum -1);
    //设置默认位置
    self.sliderImageView.center  = CGPointMake(DistanceWidth + (PointWidth)*(defaultIndx -1), CustomHeight/2 +1);
     _pointX=withPress*PointWidth;
    _sectionIndex=defaultIndx;
}



-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
    
    [self changePointX:touch];
    _pointX=_sectionIndex*(PointWidth) + DistanceWidth;
    [self refreshSliderFrame];
    return YES;
}

- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
   [self changePointX:touch];
   [self refreshSliderFrame];
   [self sendActionsForControlEvents:UIControlEventValueChanged];
    return YES;
}

-(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
   [self changePointX:touch];
   _pointX=_sectionIndex*(PointWidth) + DistanceWidth;
    if (self.block) {
        self.block((int)_sectionIndex);
    }
    [self refreshSliderFrame];

}

-(void)changePointX:(UITouch *)touch{
    
    CGPoint point = [touch locationInView:self];
    _pointX=point.x;
    if (point.x<DistanceWidth) {
        _pointX=DistanceWidth;
    }else if (point.x>CustomWidth - DistanceWidth ){
        _pointX=CustomWidth  - DistanceWidth;
    }
    //四舍五入
    double pX = (int)_pointX;
    double pY = (int)PointWidth;
    _sectionIndex= round(pX / pY);
}

-(void)refreshSliderFrame{
    [UIView animateWithDuration:0.5 animations:^{
        self.sliderImageView.center=CGPointMake(_pointX, CustomHeight/2 + 1);
    }];
}

#######部分代码控制器

  
    CustomSlider * customSlider = [[CustomSlider alloc]initWithFrame:CGRectMake(20, 100,[UIScreen mainScreen].bounds.size.width-40 , 100) WithDefaultIndx:2 WithDefaultPicName:@"4"];
    customSlider.backgroundColor = [UIColor clearColor];
     customSlider.block = ^(int index){
        //做自己想做的事情
         NSLog(@"当前index-->>>==%d",index);
         
    };
    
    [self.view addSubview:customSlider];

2016年09月22日如有好的想法希望提出建议，未完待续。。。。后续传上GitHub 需要源码留言邮箱

模仿荷包的一个小小的滑动块

推荐阅读更多精彩内容