前言
需求:商户交易汇总表使用tab滑块进行切换/筛选不同级别的代理商数据
应用场景:商户交易汇总表使用tab滑块进行切换/筛选不同级别的代理商数据
视频地址:https://live.csdn.net/v/156406
下载Demo:https://download.csdn.net/download/u011018979/19790950
I、自定义tab滑块的用法
下载Demo:https://download.csdn.net/download/u011018979/19790950视频地址:https://live.csdn.net/v/156406
需求:商户交易汇总表使用tab滑块进行切换/筛选不同级别的代理商数据
应用场景:商户交易汇总表使用tab滑块进行切换/筛选不同级别的代理商数据
接口设计:如果数据比较大,就把统计和列表数据分开请求,这样可先展示列表数据,再展示统计数据
1.2 用法
- 初始化控件
/** 本级代理商数据 下级代理商数据 */ - (CRMMultipleSwitch *)MultipleSwitch{ if (nil == _MultipleSwitch) { CRMMultipleSwitch *switch1 = [[CRMMultipleSwitch alloc]init]; _MultipleSwitch = switch1; [self addSubview:_MultipleSwitch]; __weak __typeof__(self) weakSelf = self; [[switch1 rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(__kindof CRMMultipleSwitch * multipleSwitch) { NSLog(@"点击了第%zd个",multipleSwitch.selectedSegmentIndex); }]; [switch1 mas_makeConstraints:^(MASConstraintMaker *make) { // switch1.frame = CGRectMake(0, 0, 180, 30); make.height.mas_equalTo(kAdjustRatio(33)); make.top.offset(kAdjustRatio(18)); make.bottom.offset(kAdjustRatio(-18)); make.left.offset(kAdjustRatio(74)); make.right.offset(kAdjustRatio(-74)); }]; } //>推荐MultipleSwitch初始化的时候进行数据模型的赋值 return _MultipleSwitch; }
- 设置模型数据
推荐MultipleSwitch初始化的时候进行数据模型的赋值
- (void)setModels:(CRMMultipleSwitchCellTableViewCellModel *)models{ _models = models; if(models.items.count>0){ self.MultipleSwitch.items= models.items; [self setupswitchStyle]; } }
- (CRMMerchantTransactionByPageMiddleViewModel *)viewModel{ if (_viewModel == nil) { _viewModel = [CRMMerchantTransactionByPageMiddleViewModel new]; self.viewModel.multipleSwitchCellTableViewCellModel = [CRMMultipleSwitchCellTableViewCellModel new]; // @[@" 1",@"2 "]; self.viewModel.multipleSwitchCellTableViewCellModel.items = @[@"本级代理商数据",@"下级代理商数据"]; } return _viewModel; }
- 设置更新滑块样式
- (void)layoutSubviews { [super layoutSubviews]; [self setupswitchStyle]; } - (void)setupswitchStyle{ [[self MultipleSwitch] layoutIfNeeded]; CRMMultipleSwitch *switch1 = self.MultipleSwitch; // switch1.layer.borderWidth = 1 / [UIScreen mainScreen].scale; // switch1.layer.borderColor = [UIColor whiteColor].CGColor; switch1.layer.backgroundColor = [[UIColor colorWithRed:255.0f/255.0f green:122.0f/255.0f blue:144.0f/255.0f alpha:1.0f] CGColor]; switch1.selectedTitleColor = [UIColor redColor]; // @property (nonatomic, copy) UIColor *trackerColor; // 滑块的颜色 // @property (nonatomic, copy) UIImage *trackerImage; // 滑块的图片 switch1.titleColor = [UIColor whiteColor]; switch1.titleFont = kPingFangFont(14); switch1.trackerColor = [UIColor whiteColor]; }
II、代码实现
CRMMultipleSwitch.h
NS_ASSUME_NONNULL_BEGIN /** 类似segment功能,label混合显示 */ @interface CRMMultipleSwitch : UIControl - (instancetype)initWithItems:(NSArray *)items; @property(nonatomic) NSInteger selectedSegmentIndex; @property (nonatomic, strong) UIColor *titleColor; @property (nonatomic, strong) UIColor *selectedTitleColor; @property (nonatomic, strong) UIFont *titleFont; @property (nonatomic, assign) CGFloat spacing; // label之间的间距 @property (nonatomic, assign) CGFloat contentInset; // 内容内宿边距 @property (nonatomic, copy) UIColor *trackerColor; // 滑块的颜色 @property (nonatomic, copy) UIImage *trackerImage; // 滑块的图片 @property (nonatomic, strong) NSArray *items; // *) @end