[控件] 多选一的标签-阿里云开发者社区

多选一的标签

效果:

特点:

1. 自动根据文本长度计算按钮宽度

2. 良好的设计

缺点(靠你来修改了):

1. 没有解禁更多的参数设置(懒)

2. 动态计算没有做彻底(懒)

3. 没有做动画设置(懒)

源码:

ClassesScrollView.h 与 ClassesScrollView.m

//
//  ClassesScrollView.h
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol ClassesScrollViewDelegate <NSObject>
@optional
- (void)classesScrollViewChooseTag:(int)tag title:(NSString *)title;
@end

@interface ClassesScrollView : UIView


@property (nonatomic, weak)   id<ClassesScrollViewDelegate>  delegate;
@property (nonatomic, strong) NSArray                       *classesTitleArray; // 班级标题数组

// 创建出view
- (void)buildViews;

// 设置一开始高亮显示的班级
- (void)firstTag:(int)tag;

@end

//
//  ClassesScrollView.m
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ClassesScrollView.h"
#import "ClassButtonView.h"

#define  BASE_TAG 0x1122

@interface ClassesScrollView ()<ClassButtonViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;

@end

@implementation ClassesScrollView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
        [self addSubview:self.scrollView];
        self.scrollView.showsHorizontalScrollIndicator = NO;
        self.scrollView.showsVerticalScrollIndicator   = NO;
        
        self.scrollView.backgroundColor = [UIColor colorWithRed:0.749 green:0.906 blue:0.969 alpha:1];
    }
    return self;
}

- (void)buildViews {
    
    UIFont *font = [UIFont systemFontOfSize:14.f];
    
    CGFloat currentX = 5;
    
    for (int i = 0; i < self.classesTitleArray.count; i++) {
        NSString *string = self.classesTitleArray[i];
        
        // 按钮宽度
        CGFloat width = [string widthWithLabelFont:font] + BUTTON_GAP + BUTTON_INER_GAP;
        
        
        // 创建出View
        ClassButtonView *buttonView = [[ClassButtonView alloc] initWithFrame:CGRectMake(currentX, 0, 200, 30)];
        buttonView.title            = string;
        buttonView.font             = font;
        [buttonView makeToUse];
        
        if (i == 0) {
            [buttonView changeToHighlight];
        } else {
            [buttonView changeToNormal];
        }
        
        
        buttonView.tag              = i + BASE_TAG;
        buttonView.delegate         = self;
        
        [self.scrollView addSubview:buttonView];

        currentX += width;
    }
    
    self.scrollView.contentSize = CGSizeMake(currentX + 5, self.height);
}

- (void)classButtonViewButtonEventWithTitle:(NSString *)title buttonView:(ClassButtonView *)buttonView {

    
    if (_delegate && [_delegate respondsToSelector:@selector(classesScrollViewChooseTag:title:)]) {
        [_delegate classesScrollViewChooseTag:(int)(buttonView.tag - BASE_TAG) title:title];
    }
    
    
    for (int i = 0; i < self.classesTitleArray.count; i++) {
        ClassButtonView *tmpButtonView = (ClassButtonView *)[self.scrollView viewWithTag:i + BASE_TAG];
        
        if (buttonView.tag == tmpButtonView.tag) {
            [tmpButtonView changeToHighlight];
        } else {
            [tmpButtonView changeToNormal];
        }
    }
}

- (void)firstTag:(int)tag {
    for (int i = 0; i < self.classesTitleArray.count; i++) {
        ClassButtonView *tmpButtonView = (ClassButtonView *)[self.scrollView viewWithTag:i + BASE_TAG];
        
        if (tmpButtonView.tag == tag + BASE_TAG) {
            [tmpButtonView changeToHighlight];
        } else {
            [tmpButtonView changeToNormal];
        }
    }
}

@end

ClassButtonView.h 与 ClassButtonView.m

//
//  ClassButtonView.h
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "UIView+SetRect.h"
#import "NSString+StringHeight.h"


#define BUTTON_INER_GAP  25
#define BUTTON_GAP       10

@class ClassButtonView;

@protocol ClassButtonViewDelegate <NSObject>
@optional
- (void)classButtonViewButtonEventWithTitle:(NSString *)title buttonView:(ClassButtonView *)buttonView;
@end

@interface ClassButtonView : UIView

@property (nonatomic, weak)     id<ClassButtonViewDelegate> delegate;

@property (nonatomic, strong)   NSString   *title;  // 标题
@property (nonatomic, strong)   UIFont     *font;   // 字体
@property (nonatomic, strong)   UIButton   *button; // 按钮

@property (nonatomic, readonly) CGFloat     buttonWidth; // 按钮宽度

// 让参数开始生效(重新计算尺寸)
- (void)makeToUse;

// 改变到普通状态
- (void)changeToNormal;

// 改变到高亮状态
- (void)changeToHighlight;

@end

//
//  ClassButtonView.m
//  Study
//
//  Created by YouXianMing on 15/4/20.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ClassButtonView.h"

@interface ClassButtonView ()

@property (nonatomic) CGFloat buttonWidth;

@end

@implementation ClassButtonView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 初始化按钮
        self.button                    = [[UIButton alloc] initWithFrame:self.bounds];
        self.button.height             = 23.f;
        self.button.layer.cornerRadius = 23.f / 2.f;
        [self addSubview:self.button];
        
        
        [self.button addTarget:self
                        action:@selector(buttonEvent)
              forControlEvents:UIControlEventTouchUpInside];
    }
    
    return self;
}

- (void)buttonEvent {    
    if (_delegate && [_delegate respondsToSelector:@selector(classButtonViewButtonEventWithTitle:buttonView:)]) {
        [_delegate classButtonViewButtonEventWithTitle:self.title buttonView:self];
    }
}

- (void)makeToUse {
    // 获取宽度
    _buttonWidth = [self.title widthWithLabelFont:self.button.titleLabel.font];
    
    
    self.width = _buttonWidth + BUTTON_INER_GAP + BUTTON_GAP;

    
    self.button.width  = _buttonWidth + BUTTON_INER_GAP;
    self.button.center = self.middlePoint;
}

- (void)changeToNormal {
    [self.button setTitleColor:[UIColor colorWithRed:0.788 green:0.788 blue:0.788 alpha:1] forState:UIControlStateNormal];
    [self.button setBackgroundColor:[UIColor colorWithRed:1.000 green:1.000 blue:1.000 alpha:1]];
}

- (void)changeToHighlight {
    [self.button setTitleColor:[UIColor colorWithRed:0.996 green:0.996 blue:0.988 alpha:1] forState:UIControlStateNormal];
    [self.button setBackgroundColor:[UIColor colorWithRed:0.192 green:0.682 blue:0.902 alpha:1]];
}

// 重写setter，getter方法
@synthesize title = _title;
- (void)setTitle:(NSString *)title {
    _title = title;
    [self.button setTitle:title forState:UIControlStateNormal];
}

- (NSString *)title {
    return _title;
}

@synthesize font = _font;
- (void)setFont:(UIFont *)font {
    _font = font;
    self.button.titleLabel.font = font;
}
- (UIFont *)font {
    return _font;
}

@end

工具类:

UIView+SetRect.h 与 UIView+SetRect.m

//
//  UIView+SetRect.h
//  TestPch
//
//  Created by YouXianMing on 14-9-26.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface UIView (SetRect)

// Frame
@property (nonatomic) CGPoint viewOrigin;
@property (nonatomic) CGSize  viewSize;

// Frame Origin
@property (nonatomic) CGFloat x;
@property (nonatomic) CGFloat y;

// Frame Size
@property (nonatomic) CGFloat width;
@property (nonatomic) CGFloat height;

// Frame Borders
@property (nonatomic) CGFloat top;
@property (nonatomic) CGFloat left;
@property (nonatomic) CGFloat bottom;
@property (nonatomic) CGFloat right;

// Center Point
#if !IS_IOS_DEVICE
@property (nonatomic) CGPoint center;
#endif
@property (nonatomic) CGFloat centerX;
@property (nonatomic) CGFloat centerY;

// Middle Point
@property (nonatomic, readonly) CGPoint middlePoint;
@property (nonatomic, readonly) CGFloat middleX;
@property (nonatomic, readonly) CGFloat middleY;
@property (nonatomic, assign) CGFloat cornerRadius;
@property (nonatomic ,assign) BOOL round;
@end

//
//  UIView+SetRect.m
//  TestPch
//
//  Created by YouXianMing on 14-9-26.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "UIView+SetRect.h"

@implementation UIView (SetRect)

#pragma mark Frame

- (CGPoint)viewOrigin
{
    return self.frame.origin;
}

- (void)setViewOrigin:(CGPoint)newOrigin
{
    CGRect newFrame = self.frame;
    newFrame.origin = newOrigin;
    self.frame = newFrame;
}

- (CGSize)viewSize
{
    return self.frame.size;
}

- (void)setViewSize:(CGSize)newSize
{
    CGRect newFrame = self.frame;
    newFrame.size = newSize;
    self.frame = newFrame;
}


#pragma mark Frame Origin

- (CGFloat)x
{
    return self.frame.origin.x;
}

- (void)setX:(CGFloat)newX
{
    CGRect newFrame = self.frame;
    newFrame.origin.x = newX;
    self.frame = newFrame;
}

- (CGFloat)y
{
    return self.frame.origin.y;
}

- (void)setY:(CGFloat)newY
{
    CGRect newFrame = self.frame;
    newFrame.origin.y = newY;
    self.frame = newFrame;
}


#pragma mark Frame Size

- (CGFloat)height
{
    return self.frame.size.height;
}

- (void)setHeight:(CGFloat)newHeight
{
    CGRect newFrame = self.frame;
    newFrame.size.height = newHeight;
    self.frame = newFrame;
}

- (CGFloat)width
{
    return self.frame.size.width;
}

- (void)setWidth:(CGFloat)newWidth
{
    CGRect newFrame = self.frame;
    newFrame.size.width = newWidth;
    self.frame = newFrame;
}


#pragma mark Frame Borders

- (CGFloat)left
{
    return self.x;
}

- (void)setLeft:(CGFloat)left
{
    self.x = left;
}

- (CGFloat)right
{
    return self.frame.origin.x + self.frame.size.width;
}

- (void)setRight:(CGFloat)right
{
    self.x = right - self.width;
}

- (CGFloat)top
{
    return self.y;
}

- (void)setTop:(CGFloat)top
{
    self.y = top;
}

- (CGFloat)bottom
{
    return self.frame.origin.y + self.frame.size.height;
}

- (void)setBottom:(CGFloat)bottom
{
    self.y = bottom - self.height;
}


#pragma mark Center Point

#if !IS_IOS_DEVICE
- (CGPoint)center
{
    return CGPointMake(self.left + self.middleX, self.top + self.middleY);
}

- (void)setCenter:(CGPoint)newCenter
{
    self.left = newCenter.x - self.middleX;
    self.top = newCenter.y - self.middleY;
}
#endif

- (CGFloat)centerX
{
    return self.center.x;
}

- (void)setCenterX:(CGFloat)newCenterX
{
    self.center = CGPointMake(newCenterX, self.center.y);
}

- (CGFloat)centerY
{
    return self.center.y;
}

- (void)setCenterY:(CGFloat)newCenterY
{
    self.center = CGPointMake(self.center.x, newCenterY);
}


#pragma mark Middle Point

- (CGPoint)middlePoint
{
    return CGPointMake(self.middleX, self.middleY);
}

- (CGFloat)middleX
{
    return self.width / 2;
}

- (CGFloat)middleY
{
    return self.height / 2;
}

- (void)setCornerRadius:(CGFloat)cornerRadius
{
    self.layer.masksToBounds = YES;
    self.layer.cornerRadius  = cornerRadius;
}

- (void)setRound:(BOOL)round
{
    [self setCornerRadius:self.height/2];
}

- (CGFloat)cornerRadius
{
    return  self.layer.cornerRadius ;
}

- (BOOL)round
{
    return NO;
}

@end

NSString+StringHeight.h 与 NSString+StringHeight.m

//
//  NSString+StringHeight.h
//  USA
//
//  Created by YouXianMing on 14/12/10.
//  Copyright (c) 2014年 fuhuaqi. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface NSString (StringHeight)

/**
 *  计算文本高度
 *
 *  @param font   字体
 *
 *  @return 宽度
 */
- (CGFloat)heightWithLabelFont:(UIFont *)font withLabelWidth:(CGFloat)width;

/**
 *  计算文本宽度
 *
 *  @param font   字体
 *
 *  @return 宽度
 */
- (CGFloat)widthWithLabelFont:(UIFont *)font;

@end

//
//  NSString+StringHeight.m
//  USA
//
//  Created by YouXianMing on 14/12/10.
//  Copyright (c) 2014年 fuhuaqi. All rights reserved.
//

#import "NSString+StringHeight.h"

@implementation NSString (StringHeight)

- (CGFloat)heightWithLabelFont:(UIFont *)font withLabelWidth:(CGFloat)width {
    CGFloat height = 0;
    
    if (self.length == 0) {
        height = 0;
    } else {

        // 字体
        NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:18.f]};
        if (font) {
            attribute = @{NSFontAttributeName: font};
        }
        
        // 尺寸
        CGSize retSize = [self boundingRectWithSize:CGSizeMake(width, MAXFLOAT)
                                            options:
                          NSStringDrawingTruncatesLastVisibleLine |
                          NSStringDrawingUsesLineFragmentOrigin |
                          NSStringDrawingUsesFontLeading
                                         attributes:attribute
                                            context:nil].size;
        
        height = retSize.height;
    }
    
    return height;
}

/**
 *  计算
 *
 *  @param string 文本
 *  @param font   字体
 *
 *  @return 宽度
 */
- (CGFloat)widthWithLabelFont:(UIFont *)font {
    CGFloat retHeight = 0;
    
    if (self.length == 0) {
        retHeight = 0;
    } else {
        
        // 字体
        NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:18.f]};
        if (font) {
            attribute = @{NSFontAttributeName: font};
        }
        
        // 尺寸
        CGSize retSize = [self boundingRectWithSize:CGSizeMake(MAXFLOAT, 0)
                                              options:
                          NSStringDrawingTruncatesLastVisibleLine |
                          NSStringDrawingUsesLineFragmentOrigin |
                          NSStringDrawingUsesFontLeading
                                           attributes:attribute
                                              context:nil].size;
        
        retHeight = retSize.width;
    }
    
    return retHeight;
}

@end

使用:

// 高度设置成30，不要变化
    ClassesScrollView *scrollView = [[ClassesScrollView alloc] initWithFrame:CGRectMake(0, 65, 320, 30)];
    scrollView.classesTitleArray  = @[@"NoZuoNoDie", @"YouXianMing", @"iOS Developer", @"UI Designer"];
    scrollView.delegate           = self;
    [scrollView buildViews];
    
    [self.view addSubview:scrollView];

[控件] 多选一的标签

热门文章

最新文章

相关电子书