iOS单选和多选的实现

前言

创建一个View作为选项框的载体，循环创建按钮视图，设定宽高，行间距和每行按钮数量都可根据具体情况灵活设置，具体实现如下：

单选效果

//单选星座
#import <UIKit/UIKit.h>
typedef void (^ConstellationBlock)(BOOL isBool);
@interface ConstellationView : UIView
@property (nonatomic, strong) NSString *constellation;//已选星座，回显数据
@property(nonatomic,copy)ConstellationBlock inputBlock;
@end
#import "ConstellationView.h"
@interface ConstellationView ()
// 标签数组
@property (nonatomic, strong) NSArray *markArray;
@property (nonatomic, strong) NSArray *iconArray;
@property (nonatomic, strong) NSArray *iconSelectArray;
// 按钮数组
@property (nonatomic, strong) NSMutableArray *btnArray;
@end

@implementation ConstellationView
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupMultiselectView];
    }
    return self;

}
#pragma mark - 懒加载

- (NSArray *)markArray {
    if (!_markArray) {
        NSArray *array = [NSArray array];
        array = @[@"白羊座", @"金牛座", @"双子座", @"巨蟹座", @"狮子座",@"天秤座", @"处女座", @"天蝎座", @"射手座", @"摩羯座",@"水瓶座", @"双鱼座"];
        _markArray = array;
    }
    return _markArray;
}
- (NSArray *)iconArray{
    if (!_iconArray) {
        NSArray * arr = [NSArray array];
        arr = @[@"白羊座", @"金牛座", @"双子座", @"巨蟹座", @"狮子座",@"天秤座", @"处女座", @"天蝎座", @"射手座", @"摩羯座",@"水瓶座", @"双鱼座"];
        _iconArray = arr;
    }
    return _iconArray;
}
- (NSArray *)iconSelectArray{
    if (!_iconSelectArray) {
        NSArray * arr = [NSArray array];
        arr = @[@"白羊座Select", @"金牛座Select", @"双子座Select", @"巨蟹座Select", @"狮子座Select",@"天秤座Select", @"处女座Select", @"天蝎座Select", @"射手座Select", @"摩羯座Select",@"水瓶座Select", @"双鱼座Select"];
        _iconSelectArray = arr;
    }
    return _iconSelectArray;
}
- (NSMutableArray *)btnArray {
    if (!_btnArray) {
        NSMutableArray *array = [NSMutableArray array];
        _btnArray = array;

    }
    return _btnArray;
}
-(void)setConstellation:(NSString *)constellation{
    _constellation = constellation;
    // 数据回显
    for (UIButton *btn in self.btnArray) {
        if ([constellation isEqualToString:btn.titleLabel.text]) {
            btn.selected = YES;
            btn.titleLabel.textColor =  C1;
            btn.imageView.layer.shadowColor = C8_shadowPink.CGColor; // 阴影的颜色
            btn.imageView.layer.borderColor = C8_shadowPink.CGColor;
            break;
        }
    }

}

- (void)setupMultiselectView {
    CGFloat top = 19;
    CGFloat btnH = 86;
    CGFloat width = 56;
    CGFloat distance = 10;//行间距
    CGFloat marginX = (ScreenWidth-30-width*3)/4;
    // 按钮背景
    UIView *btnsBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, 560)];
    [self addSubview:btnsBgView];
    // 循环创建按钮视图
    NSInteger maxCol = 3;
    for (NSInteger i = 0; i < self.markArray.count; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.layer.cornerRadius = 3.0; // 按钮的边框弧度
        btn.clipsToBounds = YES;
        btn.titleLabel.font = [UIFont boldSystemFontOfSize:12];
        btn.titleLabel.textAlignment = NSTextAlignmentCenter;        [btn setTitleColor:C5_51 forState:UIControlStateNormal];
        [btn setTitleColor:C1 forState:UIControlStateSelected];
        [btn addTarget:self action:@selector(chooseMark:) forControlEvents:UIControlEventTouchUpInside];
        NSInteger col = i % maxCol; //列
        btn.left = marginX + col * (width + marginX);
        NSInteger row = i / maxCol; //行
        btn.top = top + row * (btnH + distance);
        btn.width = width;
        btn.height = btnH;
        UIImage * image = [UIImage imageNamed:self.iconSelectArray[i]];
        [btn setImage:image forState:UIControlStateSelected];
        UIImage * image2 = [UIImage imageNamed:self.iconArray[i]];
        [btn setImage:image2 forState:UIControlStateNormal];
        btn.imageEdgeInsets = UIEdgeInsetsMake(0,0,27,btn.titleLabel.bounds.size.width -2 );//设置image在button上的位置（上top，左left，下bottom，右right）这里可以写负值，对上写－5，那么image就象上移动5个像素
        [btn setTitle:self.markArray[i] forState:UIControlStateNormal];
        btn.titleEdgeInsets = UIEdgeInsetsMake(width, -btn.titleLabel.bounds.size.width-width, 0, 0);
        btn.titleLabel.textAlignment = NSTextAlignmentCenter;
        [btnsBgView addSubview:btn];
        btn.tag = i;
        [self.btnArray addObject:btn];
    }
 }
- (void)chooseMark:(UIButton *)sender {
    for (NSInteger j = 0; j < [self.btnArray count]; j++) {
        UIButton *btn = self.btnArray[j] ;
        if (sender.tag == j) {
            btn.selected = YES;
            self.constellation = self.markArray[sender.tag];
            btn.imageView.layer.shadowColor = C8_shadowPink.CGColor; // 阴影的颜色
            btn.imageView.layer.borderColor = C8_shadowPink.CGColor;
        } else {
            btn.selected = NO;
            btn.imageView.layer.shadowColor = [UIColor clearColor].CGColor; // 阴影的颜色
            btn.imageView.layer.borderColor = [UIColor clearColor].CGColor;
        }
    }
    if (self.inputBlock) {
        if (self.constellation.length >0) {
            self.inputBlock(YES);
        }else{
            self.inputBlock(NO);
        }
    }
}

@end

多选效果

//兴趣爱好，多选
#import <UIKit/UIKit.h>
typedef void (^HobbyBlock)(BOOL isBool);
@interface HobbyView : UIView
// 选中标签数组(文字字符串)
@property (nonatomic, strong) NSMutableArray *selectedMarkStrArray;//回显标签数组，网络解析回来赋值即可
@property(nonatomic,copy)HobbyBlock inputBlock;//item高亮
@end
#import "HobbyView.h"
@interface HobbyView ()
   // 全部标签数组
   @property (nonatomic, strong)NSArray *markArray;
   @property (nonatomic,strong)NSMutableArray * btnArray;
@end
@implementation HobbyView
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupMultiselectView];
    }
    return self;
}
#pragma mark - 懒加载
- (NSArray *)markArray {
    if (!_markArray) {
        NSArray *array = [NSArray array];
        array = @[@"运动", @"健身", @"户外", @"桌游", @"电竞",@"聚会", @"二次元", @"宠物", @"旅行", @"外语",@"读书", @"美食", @"音乐", @"茶艺", @"电影",@"手作"];
        _markArray = array;
    }
    return _markArray;
}
//数据回显时传入已选的标签数组即可
-(void)setSelectedMarkStrArray:(NSMutableArray *)selectedMarkStrArray{
    _selectedMarkStrArray = selectedMarkStrArray;
    // 数据回显
    for (UIButton *btn in self.btnArray) {
        for (NSString * title in selectedMarkStrArray) {
            if ([title isEqualToString:btn.titleLabel.text]) {
                btn.selected = YES;
                btn.layer.borderColor = C1.CGColor;
                break;
            }
        }
    }
}

- (void)setupMultiselectView {
    CGFloat top = 19;//距上
    CGFloat btnH = 34;//按钮高
    CGFloat width = 76;//按钮宽
    CGFloat marginX = (ScreenWidth-30-width*3)/4;//按钮之间的横向距离
    CGFloat distance = 20;//行间距
    // 按钮背景
    UIView *btnsBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, 500)];
    [self addSubview:btnsBgView];
    self.btnArray = [NSMutableArray array];
    // 循环创建按钮
    NSInteger maxCol = 3;//每行显示几个按钮
    for (NSInteger i = 0; i < self.markArray.count; i++) {
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.layer.cornerRadius = btnH/2;
        btn.clipsToBounds = YES;
        btn.titleLabel.font = [UIFont boldSystemFontOfSize:14];
        [btn setTitleColor:C5_51 forState:UIControlStateNormal];
        [btn setTitleColor:C1 forState:UIControlStateSelected];
        [btn addTarget:self action:@selector(chooseMark:) forControlEvents:UIControlEventTouchUpInside];
        btn.layer.borderWidth = 1;
        btn.layer.borderColor = C2_SportLiine.CGColor;
        NSInteger col = i % maxCol; //列
        btn.left= marginX + col * (width + marginX);
        NSInteger row = i / maxCol; //行
        btn.top = top + row * (btnH + distance);
        btn.width = width;
        btn.height = btnH;
        [self.btnArray addObject:btn];
        [btn setTitle:self.markArray[i] forState:UIControlStateNormal];
        [btnsBgView addSubview:btn];
    }
}
 // 按钮多选处理
- (void)chooseMark:(UIButton *)btn {
    btn.selected = !btn.selected;
    if (btn.isSelected) {
        btn.layer.borderColor = C1.CGColor;
        [self.selectedMarkStrArray addObject:btn.titleLabel.text];
    } else {
        btn.layer.borderColor = C2_SportLiine.CGColor;
        [self.selectedMarkStrArray removeObject:btn.titleLabel.text];
    }
    if (self.inputBlock) {
        if (self.selectedMarkStrArray.count>0) {
            self.inputBlock(YES);
        }else{
            self.inputBlock(NO);
        }
    }
}
@end

如上，完。