首页 > 代码库 > 设计多选按钮ListChooseView

设计多选按钮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 == 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

需要注意的地方:

技术分享

技术分享

设计多选按钮ListChooseView