实现类似开关的移动选择器

因项目需求，多处会用到一种类似ios开关的选择菜单，点击切换时背景条会滑动，这个东西以前到也见过，其实还蛮常见的，仔细思索了下，觉得不是太难，就自己实现了一个，现在把原理和成果分享一下，下面是需求图：

E22E8A22-62C9-43C4-8EDD-F36D2F69535E.png

1.实现这种需求首先看其功能，既然是选择器，按钮是必不可少的，那么，按钮的背景视图也是不可少的，最后，看似是按钮背景的滑动条是怎么实现的呢，我们很多人第一眼看到肯定会想到是一个按钮来回跑来跑去的感觉，其实不然，那样的话你无法处理多个按钮的点击事件，所以，换个思路，把这个背景图单独作为一个移动的view,大小和按钮一样，在点击的时候只需依次顺序移动位置即可，这样就实现了需求，类似这种的选择器大致思路也大差不差。明白了实现原理，就可以随意自己定义了。下面上代码：

5A6AD88A-D201-496F-9F41-E94EAA4E76D4.png

#import <UIKit/UIKit.h>

typedef void(^jshSelectBlock)(NSInteger index);

@interface JshSelect : UIView
/*创建JshSelect*/
+ (instancetype)initWithCGRect:(CGRect)frame  masks:(BOOL)masks;
/*数据源*/
@property(nonatomic,assign) NSArray *titleArray;
/*滑动条*/
@property(nonatomic,strong) UIView  *sliderView;
/*当前选中的开关索引*/
@property(nonatomic,assign) NSInteger currentIndex;
/**记录选中的按钮*/
@property(nonatomic,strong)UIButton*selectButton;
/*回调*/
@property(nonatomic,copy) jshSelectBlock  jshSelectBlock;

@end

.m方法

CF2DB255-6B44-4BF4-9491-0AD8866B556F.png 8C7910C6-3225-4E90-91AC-F60777FB2F33.png 78C33D1C-04C6-4DDF-BF3A-73BEBC569642.png

#import "JshSelect.h"

@implementation JshSelect

//背景
+ (instancetype)initWithCGRect:(CGRect)frame masks:(BOOL)masks;{

JshSelect *headerView = [[JshSelect alloc] initWithFrame:frame];
if (masks) {
    
    headerView.layer.cornerRadius=12.5f;
    headerView.backgroundColor=AXGColor(245,242, 247);
    headerView.layer.borderWidth=0.5;
    headerView.layer.borderColor=AXGColor(212,212, 212).CGColor;
    headerView.layer.masksToBounds=YES;

}
return headerView;
}

//根据产来的数组创建按钮和滑动条
-(void)setTitleArray:(NSArray *)titleArray{
//创建滑动条
UIView *sliderView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width/titleArray.count, 25)];
sliderView.layer.cornerRadius=12.5f;
sliderView.layer.masksToBounds=YES;
sliderView.backgroundColor=[UIColor redColor];
[self addSubview:sliderView];
self.sliderView=sliderView;

//创建选择器
for (int i=0; i<titleArray.count; i++) {
    
    UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
    btn.tag=i;
    btn.layer.cornerRadius=12.5f;
    btn.titleLabel.font=[UIFont systemFontOfSize:12.0f];
    btn.frame=CGRectMake((self.frame.size.width/titleArray.count)*i, 0, self.frame.size.width/titleArray.count, 25);
    [btn setExclusiveTouch:YES];
    [btn setTitle:titleArray[i] forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
    [btn addTarget:self action:@selector(clickEvent:) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:btn];
    
    if (i==0) {
        //切换状态
        _selectButton.selected=NO;
        btn.selected=YES;
        //记录值
        _selectButton=btn;
    }

}

}

-(void)clickEvent:(UIButton *)sender{

//否则点击同一个无效
if (sender==_selectButton) {
    return;
}
//切换状态
_selectButton.selected=NO;
//滑动动画
[UIView animateWithDuration:0.35f animations:^{
    
 self.sliderView.frame= CGRectMake(sender.frame.origin.x, self.sliderView.frame.origin.y, self.sliderView.frame.size.width, self.sliderView.frame.size.height);
    
}completion:^(BOOL finished) {
    
    //动画结束后切换状态不会有闪的效果
    sender.selected=YES;
    
}];
//记录值
self.currentIndex=sender.tag;
_selectButton=sender;

//点击回调
_jshSelectBlock(sender.tag);
}

@end

这样这个选择器就创建好了，只需要在用的地方初始化，传入一下标题数组，实现以下回调就好了，按钮的宽度为你设置这个选择器的宽度/个数,创建时候自己计算好，还有，动画如果不需要可以关掉，也就是把uiview的去掉即可，直接改变位置。

//创建选择器
_navSelect =[JshSelect initWithCGRect:CGRectMake((MAINSCREEN_WIDTH/2)-75,9, 150, 25) masks:YES];
_navSelect.titleArray=@[@"行情",@"自选"];
[self.navView addSubview:_navSelect];

//点击方法回调
 _navSelect.jshSelectBlock = ^(NSInteger index) {
  
};