按钮滚动条效果

1  .h文件
#import <UIKit/UIKit.h>

@protocol SixButtonDelegate <NSObject>

-(void)clickButton:(UIButton*)sender;


@end

@interface SixButton : UIView


@property(nonatomic,copy) NSMutableArray *tempLengthArr;

@property(nonatomic,copy) NSArray *titleItem;

@property(nonatomic,assign) float totalLength;

@property(nonatomic,assign) float midEdage;

@property(nonatomic,strong)UIView *movingView;

@property(nonatomic,strong) id <SixButtonDelegate> delegate;

@property(nonatomic,strong) UIButton *preSender;


-(instancetype)initWithFrame:(CGRect)frame AndTitleItem:(NSArray*)titleItem andSubTitleItem:(NSArray*)subTitleItem;


@end

2 .m 文件

#import "SixButton.h"

@implementation SixButton

-(instancetype)initWithFrame:(CGRect)frame AndTitleItem:(NSArray *)titleItem andSubTitleItem:(NSArray *)subTitleItem{
    
    self=[super initWithFrame:frame];
    
    if (self) {
        //
        _titleItem=titleItem;
        //calculate the length of ench item
        for (NSString *title in titleItem) {
            [self calculateItemStringLength:title];
        }
        
        //
        _midEdage=(frame.size.width-_totalLength)/(titleItem.count-1);
        //
        [self create];

    }
    return self;
}
-(void)create{
    
    for (int i=0; i<_titleItem.count; i++) {
        [self addSubview: [self createButtonWith:i]];
       // [self createSeperatorView:i];
    }
    
    _movingView=[[UIView alloc]initWithFrame:CGRectMake(0, self.frame.size.height-2, [[_tempLengthArr objectAtIndex:0] floatValue], 2)];
    
    
    _movingView.backgroundColor=[UIColor blueColor];
    
    [self addSubview:_movingView];
    
}
/*
 
 */
-(UIButton*)createButtonWith:(int)i{
    NSLog(@"a");
    static float x=0;
    
    for (int j=0; j<i; j++) {
        x+=[[_tempLengthArr objectAtIndex:j] floatValue];
    }
    
    x=x+i*_midEdage;
    
    // NSLog(@"x=%f",x);
    UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame=CGRectMake(x, 0, [[_tempLengthArr objectAtIndex:i] floatValue], self.frame.size.height);
    btn.tag=i;
    btn.titleLabel.font=[UIFont systemFontOfSize:19];
    [btn addTarget:self action:@selector(valueChange:) forControlEvents:UIControlEventTouchUpInside];
    [btn setTitle:[_titleItem objectAtIndex:i] forState:UIControlStateNormal];
    if (i==0) {
        [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
        self.preSender=btn;
    }else{
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    }
    
    [self addSubview:btn];
    x=0;
    return btn;
}
/*
 action
 */
-(void)valueChange:(UIButton*)sender{
    if (self.preSender) {
        [self.preSender setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    }
    [sender setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    
    self.preSender=sender;
    
    
    [UIView animateWithDuration:0.7 animations:^{
        _movingView.frame =  CGRectMake(sender.frame.origin.x, self.frame.size.height-2, sender.frame.size.width, 2);
    }];
    //此处添加点击操作
    //self.superview.backgroundColor=[UIColor redColor];
    [self.delegate clickButton:sender];
}


/*
计算item长度
*/
-(void)calculateItemStringLength:(NSString*)title{
//
NSStringDrawingOptions options =  NSStringDrawingUsesLineFragmentOrigin| NSStringDrawingUsesFontLeading;
//
CGRect rect = [title boundingRectWithSize:CGSizeMake(1000, MAXFLOAT)options:options attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:19]} context:nil];
// NSLog(@"%f,%f",rect.size.width,rect.size.height);

if (!_tempLengthArr) {
_tempLengthArr=[[NSMutableArray alloc]init];
    
}
    
[_tempLengthArr addObject:[NSString stringWithFormat:@"%f",rect.size.width]];
    NSLog(@"%f",rect.size.width);
if (_tempLengthArr.count==_titleItem.count) {
//static  float total=0;
for ( int i=0 ; i<_tempLengthArr.count; i++) {

float f=[[_tempLengthArr objectAtIndex:i] floatValue];
   
    _totalLength+=f;
    
}
    
}
    
}
@end

3.调用sixButton

遵循协议：SixButtonDelegate

 self.buttonTitleArr=[NSArray arrayWithObjects:@"排行榜",@"动漫",@"游戏",@"动物",@"科普",@"其他", nil];

 //6个button；
    SixButton *six=[[SixButton alloc]initWithFrame:CGRectMake(10, 40, SCREEN_Width-20, 30) AndTitleItem:self.buttonTitleArr andSubTitleItem:nil];

    six.delegate=self;
    [self.view addSubview:six];

/*协议方法*/

#pragma mark-search
-(void)clickButton:(UIButton *)sender{
    //do something

 
}

4.效果图