正文
设计多选按钮ListChooseView
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
设计多选按钮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 == ) {
NSLog(@"没有一个元素可供选择");
return;
} // 存储所有按钮中文本的宽度
for (int i = ; 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 = ; i < _titleArray.count; i++) {
[self.allButtonsState addObject:@(NO)];
} // 选择按钮列表
if (self.chosenTitleArray) {
for (int i = ; i < self.chosenTitleArray.count; i++) {
// 获取标题
NSString *title = self.chosenTitleArray[i]; // 找到匹配的就替换
for (int j = ; j < _titleArray.count; j++) {
if ([_titleArray[j] isEqualToString:title]) {
[self.allButtonsState replaceObjectAtIndex:j withObject:@(YES)];
break;
}
}
}
} // 创建出控件
CGFloat tmpXpositon = ;
for (int i = ; i < _titleArray.count; i++) { CGFloat viewGap = (self.gap == ? : self.gap); if (i == ) {
tmpXpositon += ;
} else {
tmpXpositon += [_buttonWidthArray[i - ] floatValue] + self.buttonOffset;
} // 临时的view，用于存储button
UIView *tmpView = [[UIView alloc] initWithFrame:CGRectMake( + i*viewGap + tmpXpositon,
,
[_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 = ; // 显示图片
} else {
imageView.alpha = ; // 隐藏图片
} [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 <= ? : self.lineWidth); // 设置按钮边缘粗细
if (self.lineColor) {
tmpButton.layer.borderColor = self.lineColor.CGColor; // 设定线条颜色
}
if (self.cornerRadius > ) {
tmpButton.layer.cornerRadius = self.cornerRadius; // 设定圆角
} [tmpButton addTarget:self
action:@selector(buttonsEvent:)
forControlEvents:UIControlEventTouchUpInside]; // 计算总长度（最后一次循环）
if (_titleArray.count - == 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 = .f;
}];
} else {
UIImageView *tmpView = (UIImageView *)[[button superview] viewWithTag:UIIMAGEVIEW + index];
[UIView animateWithDuration:0.15 animations:^{
tmpView.alpha = .f;
}];
}
} /**
* 计算
*
* @param string 文本
* @param font 字体
*
* @return 宽度
*/
- (CGFloat)string:(NSString *)string widthWithLabelFont:(UIFont *)font {
CGFloat retHeight = ; if (string.length == ) {
retHeight = ;
} else { // 字体
NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:.f]};
if (font) {
attribute = @{NSFontAttributeName: font};
} // 尺寸
CGSize retSize = [string boundingRectWithSize:CGSizeMake(MAXFLOAT, )
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(, , , )];
chooseView.center = self.view.center;
chooseView.buttonOffset = ;
chooseView.gap = .f;
chooseView.cornerRadius = .f;
chooseView.buttonFont = [UIFont systemFontOfSize:.f];
chooseView.normalStateButtonTitleColor = [UIColor grayColor];
chooseView.highlightedStateButtonTitleColor = [UIColor cyanColor];
chooseView.lineColor = [UIColor grayColor];
chooseView.selectedImage = [UIImage imageNamed:@"selected"];
chooseView.offsetY = -;
chooseView.offsetX = .f;
chooseView.titleArray = @[@"女武神", @"瓦尔基里", @"YouXianMing", @"小苹果", @"梦醒时分"];
chooseView.chosenTitleArray = @[@"YouXianMing"];
[chooseView createListChooseView]; [self.view addSubview:chooseView];
} @end
需要注意的地方：
