设计可以多选的按钮ChooseManyButton

设计可以多选的按钮ChooseManyButton

效果:

源码:

ChooseManyButton.h 与 ChooseManyButton.m

//
//  ChooseManyButton.h
//  ChooseOnlyButton
//
//  Created by YouXianMing on 14/11/5.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol ChooseManyButtonDelegate <NSObject>
@optional
- (void)chooseButtons:(NSArray *)buttons;
@end

@interface ChooseManyButton : UIButton
/**
 *  代理
 */
@property (nonatomic, assign) id<ChooseManyButtonDelegate>  delegate;

/**
 *  选择的标题(存储的是NSNumber的BOOL值,与给定的标题值一一对应)
 */
@property (nonatomic, strong, readonly)  NSMutableArray  *chooseTitles;

/**
 *  标题的数组
 */
@property (nonatomic, strong) NSArray  *titles;

/**
 *  按钮离左侧的距离
 */
@property (nonatomic, assign) CGFloat   gapFromLeft;

/**
 *  两个按钮之间的水平距离
 */
@property (nonatomic, assign) CGFloat   gapFromHorizontalButton;

/**
 *  两个按钮之间的垂直间距
 */
@property (nonatomic, assign) CGFloat   gapFromVerticalButton;

/**
 *  按钮高度
 */
@property (nonatomic, assign) CGFloat   buttonHeight;

/**
 *  按钮标题字体
 */
@property (nonatomic, strong) UIFont   *buttonTitleFont;

/**
 *  没有选中状态下的按钮的背景颜色以及按钮字体的颜色
 */
@property (nonatomic, strong) UIColor  *normalButtonBackgroundColor;
@property (nonatomic, strong) UIColor  *normalButtonTitleColor;

/**
 *  选中状态下的按钮的背景颜色以及按钮字体的颜色
 */
@property (nonatomic, strong) UIColor  *selectedButtonBackgroundColor;
@property (nonatomic, strong) UIColor  *selectedButtonTitleColor;



/**
 *  重设view的尺寸并且创建出新的按钮
 */
- (void)resetSizeAndCreateButtons;

/**
 *  重新计算frame
 *
 *  @return frame值
 */
- (CGRect)calculateFrame;

@end

//
//  ChooseManyButton.m
//  ChooseOnlyButton
//
//  Created by YouXianMing on 14/11/5.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ChooseManyButton.h"

typedef enum : NSUInteger {
    FLAG_BUTTON = 0x2244,
} ENUM_FLAG;

@interface ChooseManyButton ()

/**
 *  标签数组
 */
@property (nonatomic, strong)  NSMutableArray  *chooseTitles;

@end

@implementation ChooseManyButton

- (void)resetSizeAndCreateButtons {
    
    // 没有元素则退出
    if (_titles.count == 0) {
        return;
    }
    
    // 初始化标签数组(与标题一一对应)
    _chooseTitles = [NSMutableArray new];
    for (int i = 0; i < _titles.count; i++) {
        [_chooseTitles addObject:[NSNumber numberWithBool:NO]];
    }
    
    // 没有设置左边距则默认值为5.f
    if (_gapFromLeft == 0) {
        _gapFromLeft = 5.f;
    }
    
    // 没有设置水平按钮间距则默认值为5.f
    if (_gapFromHorizontalButton == 0) {
        _gapFromHorizontalButton = 5.f;
    }
    
    // 没有设置垂直按钮间距则默认值为5.f
    if (_gapFromVerticalButton == 0) {
        _gapFromVerticalButton = 5.f;
    }
    
    // 没有设置按钮高度则按钮默认高度为20.f
    if (_buttonHeight == 0) {
        _buttonHeight = 20.f;
    }
    
    // 获取frame宽度
    CGFloat frameWidth  = self.bounds.size.width;
    
    // 计算出按钮宽度
    CGFloat buttonWidth = (frameWidth - _gapFromLeft*2 - _gapFromHorizontalButton)/2.f;
    
    // 动态创建出按钮
    for (int i = 0; i < _titles.count; i++) {
        UIButton *button = [[UIButton alloc] initWithFrame:
                            CGRectMake(_gapFromLeft + (buttonWidth + _gapFromHorizontalButton)*(i%2),
                                       (i/2)*(_buttonHeight + _gapFromVerticalButton),
                                       buttonWidth,
                                       _buttonHeight)];
        button.tag = FLAG_BUTTON + i;
        
        // 设置按钮圆角
        button.layer.cornerRadius = _buttonHeight/2.f;
        [button addTarget:self
                   action:@selector(buttonsEvent:)
         forControlEvents:UIControlEventTouchUpInside];
        
        // 设置按钮标题 + 默认的标题颜色
        [button setTitle:_titles[i] forState:UIControlStateNormal];
        [self normalButtonStyle:button];
        
        // 设置字体
        if (_buttonTitleFont) {
            button.titleLabel.font = _buttonTitleFont;
        }
        
        [self addSubview:button];
    }
    
    // 重设自身view高度
    CGFloat selfViewHeight = _buttonHeight*((_titles.count - 1)/2 + 1) + _gapFromVerticalButton*((_titles.count - 1)/2);
    CGRect rect            = self.frame;
    rect.size.height       = selfViewHeight;
    self.frame             = rect;
}

- (CGRect)calculateFrame {
    
    // 没有元素则退出
    if (_titles.count == 0) {
        return CGRectZero;
    }
    
    // 没有设置左边距则默认值为5.f
    if (_gapFromLeft == 0) {
        _gapFromLeft = 5.f;
    }
    
    // 没有设置水平按钮间距则默认值为5.f
    if (_gapFromHorizontalButton == 0) {
        _gapFromHorizontalButton = 5.f;
    }
    
    // 没有设置垂直按钮间距则默认值为5.f
    if (_gapFromVerticalButton == 0) {
        _gapFromVerticalButton = 5.f;
    }
    
    // 没有设置按钮高度则按钮默认高度为20.f
    if (_buttonHeight == 0) {
        _buttonHeight = 20.f;
    }
    
    // 根据控件的一些参数计算出高度
    CGFloat selfViewHeight = _buttonHeight*((_titles.count - 1)/2 + 1) + _gapFromVerticalButton*((_titles.count - 1)/2);
    CGRect rect            = self.frame;
    rect.size.height       = selfViewHeight;
    
    // 返回控件
    return rect;
}

- (void)buttonsEvent:(UIButton *)button {
    
    // 获取到点击按钮的index值
    NSInteger index = button.tag - FLAG_BUTTON;
    
    // 根据值来确定设置样式
    if ([_chooseTitles[index]  isEqual: @NO]) {
        _chooseTitles[index] = @YES;
        [self selectButtonStyle:button];
    } else {
        _chooseTitles[index] = @NO;
        [self normalButtonStyle:button];
    }
    
    // 通过代理获取点击了哪些按钮
    if (_delegate && [_delegate respondsToSelector:@selector(chooseButtons:)]) {
        [_delegate chooseButtons:_chooseTitles];
    }
}

#pragma mark - 私有方法
/**
 *  普通按钮的样式
 *
 *  @param button 要改变样式的按钮
 */
- (void)normalButtonStyle:(UIButton *)button {
    
    if (_normalButtonTitleColor) {
        [button setTitleColor:_normalButtonTitleColor
                     forState:UIControlStateNormal];
    } else {
        [button setTitleColor:[UIColor colorWithRed:0.000 green:0.361 blue:0.671 alpha:1]
                     forState:UIControlStateNormal];
    }
    
    if (_normalButtonBackgroundColor) {
        button.backgroundColor = _normalButtonBackgroundColor;
    } else {
        button.backgroundColor = [UIColor clearColor];
    }
    
    button.layer.borderColor = [UIColor colorWithRed:0.843 green:0.843 blue:0.843 alpha:1].CGColor;
    button.layer.borderWidth = 1.f;
}

/**
 *  选中按钮时的样式
 *
 *  @param button 要改变样式的按钮
 */
- (void)selectButtonStyle:(UIButton *)button {
    
    if (_selectedButtonTitleColor) {
        [button setTitleColor:_selectedButtonTitleColor
                     forState:UIControlStateNormal];
    } else {
        [button setTitleColor:[UIColor colorWithRed:0.973 green:0.984 blue:0.988 alpha:1]
                     forState:UIControlStateNormal];
    }
    
    if (_selectedButtonBackgroundColor) {
        button.backgroundColor = _selectedButtonBackgroundColor;
    } else {
        button.backgroundColor = [UIColor colorWithRed:0.055 green:0.365 blue:0.663 alpha:1];
    }
    
    button.layer.borderColor = [UIColor colorWithRed:0.055 green:0.365 blue:0.663 alpha:1].CGColor;
    button.layer.borderWidth = 1.f;
}


@end

使用时的代码:

//
//  ViewController.m
//  ChooseOnlyButton
//
//  Created by YouXianMing on 14/11/4.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "ChooseManyButton.h"

@interface ViewController ()<ChooseManyButtonDelegate>

{
    ChooseManyButton *button;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UILabel *label      = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 320, 30)];
    label.textAlignment = NSTextAlignmentCenter;
    label.text          = @"“近代中国睁眼看世界的第一人”的是___";
    label.textColor     = [UIColor grayColor];
    [self.view addSubview:label];
    
    button                         = [[ChooseManyButton alloc] initWithFrame:CGRectMake(0, 100, 320, 400)];
    button.buttonHeight            = 25.f;
    button.gapFromLeft             = 10.f;
    button.gapFromVerticalButton   = 20.f;
    button.gapFromHorizontalButton = 10.f;
    button.buttonTitleFont         = [UIFont systemFontOfSize:16.f];
    button.titles                  = @[@"A. 梁启超",
                                       @"B. 龚自珍",
                                       @"C. 林则徐",
                                       @"D. 李鸿章"];
    button.delegate                = self;
    [self.view addSubview:button];
    
    // 设置完所有参数后创建出控件
    [button resetSizeAndCreateButtons];
}

- (void)chooseButtons:(NSArray *)buttons {
    NSLog(@"%@", buttons);
}

@end

实时打印信息: