设计多选按钮ListChooseView
答应某位女屌丝而写的控件，效果还不错，开源给大家^_^!
效果图：
源码：
// // ListChooseView.h // ScrollChooseButton // // http://www.jikexueyuan.com/course/397.html // http://www.cnblogs.com/YouXianMing/ // // Created by YouXianMing on 14/12/23. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @interface ListChooseView : UIView #pragma mark - /** * 按钮之间的间隙，不设置的话默认值为5 */ @property (nonatomic, assign) CGFloat gap; /** * 按钮值偏移量 */ @property (nonatomic, assign) CGFloat buttonOffset; #pragma mark - /** * 标题数组 */ @property (nonatomic, strong) NSArray *titleArray; /** * 已经选择的标题的数组 */ @property (nonatomic, strong) NSArray *chosenTitleArray; #pragma mark - /** * 按钮的字体 * 正常状态下的按钮色值（不设定则为白色） * 高亮状态下的按钮色值（不设定则没有值） * 按钮线条粗细（不设定默认值为1） * 按钮线条颜色（不设定默认值为黑色） * 按钮圆角 */ @property (nonatomic, strong) UIFont *buttonFont; @property (nonatomic, strong) UIColor *normalStateButtonTitleColor; @property (nonatomic, strong) UIColor *highlightedStateButtonTitleColor; @property (nonatomic, assign) CGFloat lineWidth; @property (nonatomic, strong) UIColor *lineColor; @property (nonatomic, assign) CGFloat cornerRadius; #pragma mark - /** * 选中状态下显示的图片 * 图片横线偏移量 * 图片纵向偏移量 */ @property (nonatomic, strong) UIImage *selectedImage; @property (nonatomic, assign) CGFloat offsetX; @property (nonatomic, assign) CGFloat offsetY; #pragma mark - /** * 选中的标题 */ @property (nonatomic, strong, readonly) NSMutableArray *selectedIndex; /** * 配置好所有参数后就创建出控件 */ - (void)createListChooseView; @end
// // ListChooseView.m // ScrollChooseButton // // Created by YouXianMing on 14/12/23. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import "ListChooseView.h" typedef enum : NSUInteger { UIBUTTON = 0x19871220, // [YouXingMing birthDay] UIIMAGEVIEW = 0x88888888, } EnumListChooseView; @interface ListChooseView () @property (nonatomic, assign) CGFloat buttonHeight; // 按钮的高度 @property (nonatomic, assign) CGFloat totalLength; // 总长度 @property (nonatomic, strong) UIScrollView *scrollView; // 用于滑动的scrollView @property (nonatomic, strong) NSMutableArray *buttonWidthArray; // 存储所有按钮的宽度 @property (nonatomic, strong) NSMutableArray *allButtonsState; // 存储所有按钮点击状态 @property (nonatomic, strong) NSMutableArray *selectedIndex; @end @implementation ListChooseView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // 添加scrollView _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds]; _scrollView.layer.masksToBounds = NO; _scrollView.showsHorizontalScrollIndicator = NO; [self addSubview:_scrollView]; // 按钮高度 _buttonHeight = frame.size.height; // 存储所有按钮宽度 _buttonWidthArray = [NSMutableArray array]; } return self; } - (void)createListChooseView { // 没有一个元素则直接返回 if (_titleArray.count == 0) { NSLog(@"没有一个元素可供选择"); return; } // 存储所有按钮中文本的宽度 for (int i = 0; i < _titleArray.count; i++) { // 必须是字符串 if ([_titleArray[i] isKindOfClass:[NSString class]]) { CGFloat buttonWidth = [self string:_titleArray[i] widthWithLabelFont:self.buttonFont]; [_buttonWidthArray addObject:@(buttonWidth)]; } else { NSLog(@"有非字符串的东西混入"); return; } } // 所有按钮点击状态初始化（默认为NO，没有勾选） self.allButtonsState = [NSMutableArray array]; for (int i = 0; i < _titleArray.count; i++) { [self.allButtonsState addObject:@(NO)]; } // 选择按钮列表 if (self.chosenTitleArray) { for (int i = 0; i < self.chosenTitleArray.count; i++) { // 获取标题 NSString *title = self.chosenTitleArray[i]; // 找到匹配的就替换 for (int j = 0; j < _titleArray.count; j++) { if ([_titleArray[j] isEqualToString:title]) { [self.allButtonsState replaceObjectAtIndex:j withObject:@(YES)]; break; } } } } // 创建出控件 CGFloat tmpXpositon = 0; for (int i = 0; i < _titleArray.count; i++) { CGFloat viewGap = (self.gap == 0 ? 5 : self.gap); if (i == 0) { tmpXpositon += 0; } else { tmpXpositon += [_buttonWidthArray[i - 1] floatValue] + self.buttonOffset; } // 临时的view，用于存储button UIView *tmpView = [[UIView alloc] initWithFrame:CGRectMake(0 + i*viewGap + tmpXpositon, 0, [_buttonWidthArray[i] floatValue] + self.buttonOffset, _buttonHeight)]; // 配置button UIButton *tmpButton = [[UIButton alloc] initWithFrame:tmpView.bounds]; [tmpView addSubview:tmpButton]; // 按钮tag值 tmpButton.tag = UIBUTTON + i; if (self.selectedImage) { // 添加选中的图片 UIImageView *imageView = [[UIImageView alloc] initWithImage:self.selectedImage]; CGRect rect = imageView.frame; rect.origin.x = [_buttonWidthArray[i] floatValue] + self.offsetX; rect.origin.y = self.offsetY; imageView.frame = rect; imageView.tag = UIIMAGEVIEW + i; if ([self.allButtonsState[i] boolValue] == YES) { imageView.alpha = 1; // 显示图片 } else { imageView.alpha = 0; // 隐藏图片 } [tmpView addSubview:imageView]; } [tmpButton setTitle:_titleArray[i] forState:UIControlStateNormal]; // 设置标题 if (self.buttonFont) { tmpButton.titleLabel.font = self.buttonFont; // 设置按钮字体 } if (self.normalStateButtonTitleColor) { [tmpButton setTitleColor:self.normalStateButtonTitleColor forState:UIControlStateNormal]; // 设置按钮正常标题颜色 } if (self.highlightedStateButtonTitleColor) { [tmpButton setTitleColor:self.highlightedStateButtonTitleColor forState:UIControlStateHighlighted]; // 高亮标题颜色 } tmpButton.layer.borderWidth = (self.lineWidth <= 0 ? 1 : self.lineWidth); // 设置按钮边缘粗细 if (self.lineColor) { tmpButton.layer.borderColor = self.lineColor.CGColor; // 设定线条颜色 } if (self.cornerRadius > 0) { tmpButton.layer.cornerRadius = self.cornerRadius; // 设定圆角 } [tmpButton addTarget:self action:@selector(buttonsEvent:) forControlEvents:UIControlEventTouchUpInside]; // 计算总长度（最后一次循环） if (_titleArray.count - 1 == i) { _totalLength = tmpView.frame.origin.x + [_buttonWidthArray[i] floatValue] + self.buttonOffset; } [self.scrollView addSubview:tmpView]; } self.scrollView.contentSize = CGSizeMake(_totalLength, _buttonHeight); } - (void)buttonsEvent:(UIButton *)button { // 第几个按钮 NSInteger index = button.tag - UIBUTTON; BOOL selectedButtonState = [_allButtonsState[index] boolValue]; [_allButtonsState replaceObjectAtIndex:index withObject:@(!selectedButtonState)]; // 选择了几个按钮 self.selectedIndex = [NSMutableArray arrayWithArray:_allButtonsState]; // 更新按钮上面的图标 [self updateButtonImage:button index:index]; } - (void)updateButtonImage:(UIButton *)button index:(NSInteger)index{ if ([_allButtonsState[index] boolValue] == NO) { UIImageView *tmpView = (UIImageView *)[[button superview] viewWithTag:UIIMAGEVIEW + index]; [UIView animateWithDuration:0.15 animations:^{ tmpView.alpha = 0.f; }]; } else { UIImageView *tmpView = (UIImageView *)[[button superview] viewWithTag:UIIMAGEVIEW + index]; [UIView animateWithDuration:0.15 animations:^{ tmpView.alpha = 1.f; }]; } } /** * 计算 * * @param string 文本 * @param font 字体 * * @return 宽度 */ - (CGFloat)string:(NSString *)string widthWithLabelFont:(UIFont *)font { CGFloat retHeight = 0; if (string.length == 0) { retHeight = 0; } else { // 字体 NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:18.f]}; if (font) { attribute = @{NSFontAttributeName: font}; } // 尺寸 CGSize retSize = [string boundingRectWithSize:CGSizeMake(MAXFLOAT, 0) options: NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:attribute context:nil].size; retHeight = retSize.width; } return retHeight; } @end
使用时候的源码：
// // ViewController.m // ScrollChooseButton // // Created by YouXianMing on 14/12/23. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import "ViewController.h" #import "ListChooseView.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor blackColor]; [self createListChooseView]; } - (void)createListChooseView { ListChooseView *chooseView = [[ListChooseView alloc] initWithFrame:CGRectMake(10, 0, 300, 25)]; chooseView.center = self.view.center; chooseView.buttonOffset = 20; chooseView.gap = 7.f; chooseView.cornerRadius = 3.f; chooseView.buttonFont = [UIFont systemFontOfSize:14.f]; chooseView.normalStateButtonTitleColor = [UIColor grayColor]; chooseView.highlightedStateButtonTitleColor = [UIColor cyanColor]; chooseView.lineColor = [UIColor grayColor]; chooseView.selectedImage = [UIImage imageNamed:@"selected"]; chooseView.offsetY = -5; chooseView.offsetX = 10.f; chooseView.titleArray = @[@"女武神", @"瓦尔基里", @"YouXianMing", @"小苹果", @"梦醒时分"]; chooseView.chosenTitleArray = @[@"YouXianMing"]; [chooseView createListChooseView]; [self.view addSubview:chooseView]; } @end
需要注意的地方：
