一直在用荷包這App,感覺(jué)這個(gè)App整體真的不錯(cuò),一直想做一個(gè)滑塊,無(wú)意中看到這個(gè),今天有時(shí)間就做了一個(gè)小Demo ,話不多說(shuō),上圖片。。。。

#######效果圖 <荷包原始效果 動(dòng)態(tài)的可以自己下載一個(gè)看看>

EA680F65C7FE37C7036D814398DFBC5A.jpg

#######效果圖 <彬哥效果 >

2.gif

#######部分代碼 自定義的CustomSlider.H

/** 回調(diào) */
@property (nonatomic,copy)changeValueBlock block;

/**
 初始化

 @param frame       位置
 @param defaultIndx 默認(rèn)選中那個(gè)點(diǎn)

 */
- (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  ====================== 創(chuàng)建子控件 ======================
- (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);
    //設(shè)置默認(rèn)位置
    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(@"當(dāng)前index-->>>==%d",index);
         
    };
    
    [self.view addSubview:customSlider];

2016年09月22日 如有好的想法希望提出建議，未完待續(xù)。。。。后續(xù)傳上GitHub 需要源碼留言郵箱