IOS動態自適應標籤實現

先上效果圖 

 

 

設計要求

一、標籤的寬度是按內容自適應的

二、一行顯示的標籤個數是動態的，放得下就放，放不下就換行

三、默認選中第一個

四、至少選中一個標籤

實現思路

首先咱們從這個效果上來看，這個標籤是有選中和不選中狀態，那咱們首選的控件確定就是用 UIButton來實現了。

這個小程度的重點就在於標籤能自動換行，仍是智能的，不是固定一行多少個那種，這個咱們經過計算每一個按鈕實際寬度與屏幕的寬度進行比較就能判斷是否須要換行了。

還有一點就是處理 至少選中一個標籤的功能，我這裏有一種方式，就是控制按鈕的 userInteractionEnabled 屬性來實現，若是隻有一個按鈕的時候就把那一個按鈕的這個屬性給設置成 NO，這樣就禁止用戶對它進行點擊事件了，這個時候其它按鈕是能夠正常選中的，只要選中的按鈕大於1個，那就把剛纔那個按鈕屬性再改爲YES，這樣那個按鈕就又能點了。

具體看代碼

建立一個繼承於UIView的 XGTagView 類

//
//  XGTagView.h
//  動態標籤
//
//  Created by xgao on 17/3/22.
//  Copyright © 2017年 xgao. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XGTagView : UIView

/**
 *  初始化
 *
 *  @param frame    frame
 *  @param tagArray 標籤數組
 *
 *  @return
 */
- (instancetype)initWithFrame:(CGRect)frame tagArray:(NSMutableArray*)tagArray;

// 標籤數組
@property (nonatomic,retain) NSArray* tagArray;

// 選中標籤文字顏色
@property (nonatomic,retain) UIColor* textColorSelected;
// 默認標籤文字顏色
@property (nonatomic,retain) UIColor* textColorNormal;

// 選中標籤背景顏色
@property (nonatomic,retain) UIColor* backgroundColorSelected;
// 默認標籤背景顏色
@property (nonatomic,retain) UIColor* backgroundColorNormal;


@end

 

 

//
//  XGTagView.m
//  動態標籤
//
//  Created by xgao on 17/3/22.
//  Copyright © 2017年 xgao. All rights reserved.
//

#import "XGTagView.h"

@interface XGTagView()

@end

@implementation XGTagView

/**
 *  初始化
 *
 *  @param frame    frame
 *  @param tagArray 標籤數組
 *
 *  @return
 */
- (instancetype)initWithFrame:(CGRect)frame tagArray:(NSArray*)tagArray{
    
    self = [super initWithFrame:frame];
    if (self) {
        _tagArray = tagArray;
        [self setUp];
    }
    return self;
}

// 初始化
- (void)setUp{
    
    // 默認顏色
    _textColorNormal = [UIColor darkGrayColor];
    _textColorSelected = [UIColor whiteColor];
    _backgroundColorSelected = [UIColor redColor];
    _backgroundColorNormal = [UIColor whiteColor];
    
    // 建立標籤按鈕
    [self createTagButton];
}

// 重寫set屬性
- (void)setTagArray:(NSMutableArray *)tagArray{
    
    _tagArray = tagArray;
    
    // 從新建立標籤
    [self resetTagButton];
}

- (void)setTextColorSelected:(UIColor *)textColorSelected{

    _textColorSelected = textColorSelected;
    // 從新建立標籤
    [self resetTagButton];
}

- (void)setTextColorNormal:(UIColor *)textColorNormal{
    
    _textColorNormal = textColorNormal;
    // 從新建立標籤
    [self resetTagButton];
}

- (void)setBackgroundColorSelected:(UIColor *)backgroundColorSelected{
    
    _backgroundColorSelected = backgroundColorSelected;
    // 從新建立標籤
    [self resetTagButton];
}

- (void)setBackgroundColorNormal:(UIColor *)backgroundColorNormal{
    
    _backgroundColorNormal = backgroundColorNormal;
    // 從新建立標籤
    [self resetTagButton];
}

#pragma mark - Private

// 從新建立標籤
- (void)resetTagButton{
    
    // 移除以前的標籤
    for (UIButton* btn  in self.subviews) {
        [btn removeFromSuperview];
    }
    // 從新建立標籤
    [self createTagButton];
}

// 建立標籤按鈕
- (void)createTagButton{
    
    // 按鈕高度
    CGFloat btnH = 28;
    // 距離左邊距
    CGFloat leftX = 6;
    // 距離上邊距
    CGFloat topY = 10;
    // 按鈕左右間隙
    CGFloat marginX = 10;
    // 按鈕上下間隙
    CGFloat marginY = 10;
    // 文字左右間隙
    CGFloat fontMargin = 10;
    
    for (int i = 0; i < _tagArray.count; i++) {
        
        UIButton* btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(marginX + leftX, topY, 100, btnH);
        btn.tag = 100+i;
        // 默認選中第一個
        if (i == 0) {
            btn.selected = YES;
        }
        
        // 按鈕文字
        [btn setTitle:_tagArray[i] forState:UIControlStateNormal];
        
        //------ 默認樣式
        //按鈕文字默認樣式
        NSMutableAttributedString* btnDefaultAttr = [[NSMutableAttributedString alloc]initWithString:btn.titleLabel.text];
        // 文字大小
        [btnDefaultAttr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:13] range:NSMakeRange(0, btn.titleLabel.text.length)];
        // 默認顏色
        [btnDefaultAttr addAttribute:NSForegroundColorAttributeName value:self.textColorNormal range:NSMakeRange(0, btn.titleLabel.text.length)];
        [btn setAttributedTitle:btnDefaultAttr forState:UIControlStateNormal];
        
        // 默認背景顏色
        [btn setBackgroundImage:[self imageWithColor:self.backgroundColorNormal] forState:UIControlStateNormal];
        
        //-----  選中樣式
        // 選中字體顏色
        NSMutableAttributedString* btnSelectedAttr = [[NSMutableAttributedString alloc]initWithString:btn.titleLabel.text];
        // 選中顏色
        [btnSelectedAttr addAttribute:NSForegroundColorAttributeName value:self.textColorSelected range:NSMakeRange(0, btn.titleLabel.text.length)];
        // 選中文字大小
        [btnSelectedAttr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:13] range:NSMakeRange(0, btn.titleLabel.text.length)];
        [btn setAttributedTitle:btnSelectedAttr forState:UIControlStateSelected];
        
        // 選中背景顏色
        [btn setBackgroundImage:[self imageWithColor:self.backgroundColorSelected] forState:UIControlStateSelected];
        
        // 圓角
        btn.layer.cornerRadius = btn.frame.size.height / 2.f;
        btn.layer.masksToBounds = YES;
        // 邊框
        btn.layer.borderColor = [UIColor lightGrayColor].CGColor;
        btn.layer.borderWidth = 0.5;
        
        // 設置按鈕的邊距、間隙
        [self setTagButtonMargin:btn fontMargin:fontMargin];
        
        // 處理換行
        if (btn.frame.origin.x + btn.frame.size.width + marginX > self.frame.size.width) {
            // 換行
            topY += btnH + marginY;
            
            // 重置
            leftX = 6;
            btn.frame = CGRectMake(marginX + leftX, topY, 100, btnH);
            
            // 設置按鈕的邊距、間隙
            [self setTagButtonMargin:btn fontMargin:fontMargin];
        }
        
        // 重置高度
        CGRect frame = btn.frame;
        frame.size.height = btnH;
        btn.frame = frame;
        
        //----- 選中事件
        [btn addTarget:self action:@selector(selectdButton:) forControlEvents:UIControlEventTouchUpInside];
        
        [self addSubview:btn];
        
        leftX += btn.frame.size.width + marginX;
    }
    
    // 檢測按鈕狀態，最少選中一個
    [self checkButtonState];
}

// 設置按鈕的邊距、間隙
- (void)setTagButtonMargin:(UIButton*)btn fontMargin:(CGFloat)fontMargin{
    
    // 按鈕自適應
    [btn sizeToFit];
    
    // 從新計算按鈕文字左右間隙
    CGRect frame = btn.frame;
    frame.size.width += fontMargin*2;
    btn.frame = frame;
}

// 檢測按鈕狀態，最少選中一個
- (void)checkButtonState{
    
    int selectCount = 0;
    UIButton* selectedBtn = nil;
    for(int i=0;i < _tagArray.count; i++){
        UIButton* btn = (UIButton*)[self viewWithTag:100+i];
        if(btn.selected){
            selectCount++;
            selectedBtn = btn;
        }
    }
    if (selectCount == 1) {
        // 只有一個就把這一個給禁用手勢
        selectedBtn.userInteractionEnabled = NO;
    }else{
        // 解除禁用手勢
        for(int i=0;i < _tagArray.count; i++){
            UIButton* btn = (UIButton*)[self viewWithTag:100+i];
            if(!btn.userInteractionEnabled){
                btn.userInteractionEnabled = YES;
            }
        }
    }
}

// 根據顏色生成UIImage
- (UIImage*)imageWithColor:(UIColor*)color{
    
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    // 開始畫圖的上下文
    UIGraphicsBeginImageContext(rect.size);
    
    // 設置背景顏色
    [color set];
    // 設置填充區域
    UIRectFill(CGRectMake(0, 0, rect.size.width, rect.size.height));
    
    // 返回UIImage
    UIImage* image = UIGraphicsGetImageFromCurrentImageContext();
    // 結束上下文
    UIGraphicsEndImageContext();
    return image;
}

#pragma mark - Event

// 標籤按鈕點擊事件
- (void)selectdButton:(UIButton*)btn{
    
    btn.selected = !btn.selected;
    
    // 檢測按鈕狀態，最少選中一個
    [self checkButtonState];
}


@end

 

好了，你們若是有什麼地方看不明白的，留言給我就行～～