1、经常有单行多按钮单选效果的设计,大多数人第一想到的就是for循环UI和frame来创建,但
是项目中又引入了 masonry框架,masonry原本就是做UI布局的,那可不可以利用起来呢?答案
是可以的;
2、下面就使用masonry来简单实现一下单行多按钮单选效果,并且默认第一个按钮为默认按钮的场景:
- // @property (nonatomic, strong) UIView *rootView;
- // @property (nonatomic, strong) UIButton *childSelectedBtn;//声明一个全局默认按钮
-
- NSMutableArray *arraychildView = [NSMutableArray new];
- NSArray *titlechildArr = @[@"班级",@"院校",@"省份"];
- for (int i = 0; i < titlechildArr.count; i++) {
- UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
- button.backgroundColor = [UIColor colorWithHexString:@"F3F4F5"];
- button.tag = 1000 + I;
- [button setTitleColor:[UIColor colorWithHexString:@"000000"] forState:UIControlStateNormal];
- [button setTitle: titlechildArr[i] forState:UIControlStateNormal];
- [button addTarget:self action:@selector(childAction:) forControlEvents:UIControlEventTouchUpInside];
- [self.rootView addSubview:button];
- [arraychildView addObject:button];
- if(button.tag == 1000) {
- self.childSelectedBtn = button;
- button.backgroundColor = [UIColor colorWithHexString:@"292A2E"];
- [button setTitleColor:[UIColor colorWithHexString:@"F1E5BF"] forState:UIControlStateNormal];
- }
- }
- [arraychildView mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:7 leadSpacing:14 tailSpacing:14];
- [arraychildView mas_makeConstraints:^(MASConstraintMaker *make) {
- make.top.equalTo(self.titleChildLabel.mas_bottom).offset(14);
- }];
-
-
- - (void)childAction:(UIButton *)sender {
- // 未选中
- if (self.childSelectedBtn) {
- self.childSelectedBtn.backgroundColor = [UIColor colorWithHexString:@"F3F4F5"];
- [self.childSelectedBtn setTitleColor:[UIColor colorWithHexString:@"000000"] forState:UIControlStateNormal];
- }
- // 选中
- self.childSelectedBtn = sender;
- self.childSelectedBtn.backgroundColor = [UIColor colorWithHexString:@"292A2E"];
- [self.childSelectedBtn setTitleColor:[UIColor colorWithHexString:@"F1E5BF"] forState:UIControlStateNormal];
-
- }
3、以上代码虽然功能实现了,但是如果比较多的标签场景下,代码量就很多了,需要复制一份以上代码,这样无意中增加了冗余代码,视觉上变得毫无观感;
那还有更好的办法吗?答案是有的;可对此优化升级(包装函数),代码如下:
引入头文件
#import
- /// 单行布局按钮 封装
- /// - Parameters:
- /// - titleArr: 按钮文字集合
- /// - btntag: 按钮标识
- /// - leadSpacing: 居左距离
- /// - fixedSpacing: 中间间隙
- /// - tailSpacing: 居右距离
- /// - superLabel: 相对顶部label对象(这里可以根据自己的场景修改类型)
- /// - topEqualToViewOffset: 相对上面的UI对象的间距
- /// - globalButton: 将第一个按钮赋值给默认选中全局按钮 参数格式为:(selectedButton)
- /// - subview: 添加到的父视图对象
- /// - actionSEL: 按钮执行事件SEL
- - (void)createLoopButtonWithTitleArr:(NSArray *)titleArr
- buttonTag:(NSInteger)btntag
- leadSpacing:(CGFloat)leadSpacing
- fixedSpacing:(CGFloat)fixedSpacing
- tailSpacing:(CGFloat)tailSpacing
- topEqualToView:(UILabel *)superLabel
- topEqualToViewOffset:(CGFloat)topEqualToViewOffset
- globalButtonName:(NSString *)globalButton
- addSubview:(UIView *)subview
- action:(SEL)actionSEL {
-
- NSMutableArray *arrayChildView = [NSMutableArray new];
- int countNum = (int)titleArr.count;
- for (int i = 0; i < countNum; i++) {
- UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
- button.backgroundColor = [UIColor colorWithHexString:@"F3F4F5"];
- [button setTitleColor:[UIColor colorWithHexString:@"000000"] forState:UIControlStateNormal];
- button.titleLabel.font = [UIFont fontWithName:kFontRegular size:12];
- button.tag = btntag + i;
- [button setTitle:titleArr[i] forState:UIControlStateNormal];
- [button addTarget:self action:actionSEL forControlEvents:UIControlEventTouchUpInside];
- [subview addSubview:button];
- [arrayChildView addObject:button];
- if(button.tag == btntag) {
- if (globalButton && globalButton.length > 0) {
- globalButton = [globalButton stringByReplacingCharactersInRange:NSMakeRange(0,1) withString:[[globalButton substringToIndex:1] capitalizedString]];
- ((void(*)(id,SEL,id))objc_msgSend)(self, NSSelectorFromString([[@"set" stringByAppendingString:globalButton] stringByAppendingString:@":"]),button);
- }
- button.backgroundColor = [UIColor colorWithHexString:@"292A2E"];
- [button setTitleColor:[UIColor colorWithHexString:@"F1E5BF"] forState:UIControlStateNormal];
- }
- }
- [arrayChildView mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:fixedSpacing leadSpacing:leadSpacing tailSpacing:tailSpacing];
- [arrayChildView mas_makeConstraints:^(MASConstraintMaker *make) {
- make.top.equalTo(superLabel.mas_bottom).offset(topEqualToViewOffset);
- }];
- }
-
一行代码实现单行单选按钮事例:
[self createLoopButtonWithTitleArr:@[@"半年内",@"一年内",@"两年内"] buttonTag:100 leadSpacing:14 fixedSpacing:7 tailSpacing:14 topEqualToView:self.titleNameLabel topEqualToViewOffset:14 globalButtonName:@"childSelectedBtn" addSubview:self.rootView action:@selector(childAction:)];