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

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

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

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

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

#import 

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

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

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

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