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

如上，完。