首页 > 代码库 > 设计可以多选的按钮ChooseManyButton

设计可以多选的按钮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

实时打印信息:

 

设计可以多选的按钮ChooseManyButton