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

因项目需求,多处会用到一种类似ios开关的选择菜单,点击切换时背景条会滑动,这个东西以前到也见过,其实还蛮常见的,仔细思索了下,觉得不是太难,就自己实现了一个,现在把原理和成果分享一下,下面是需求图:
实现类似开关的移动选择器_第1张图片
E22E8A22-62C9-43C4-8EDD-F36D2F69535E.png
1.实现这种需求首先看其功能,既然是选择器,按钮是必不可少的,那么,按钮的背景视图也是不可少的,最后,看似是按钮背景的滑动条是怎么实现的呢,我们很多人第一眼看到肯定会想到是一个按钮来回跑来跑去的感觉,其实不然,那样的话你无法处理多个按钮的点击事件,所以,换个思路,把这个背景图单独作为一个移动的view,大小和按钮一样,在点击的时候只需依次顺序移动位置即可,这样就实现了需求,类似这种的选择器大致思路也大差不差。明白了实现原理,就可以随意自己定义了。下面上代码:
实现类似开关的移动选择器_第2张图片
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方法
实现类似开关的移动选择器_第3张图片
CF2DB255-6B44-4BF4-9491-0AD8866B556F.png
实现类似开关的移动选择器_第4张图片
8C7910C6-3225-4E90-91AC-F60777FB2F33.png
实现类似开关的移动选择器_第5张图片
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) {
  
};

你可能感兴趣的:(实现类似开关的移动选择器)