IOS動態自適應標籤實現，ios動態自適應

IOS動態自適應標籤實現，ios動態自適應
先上 

 

 

設計要求

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

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

3、預設選中第一個

4、至少選中一個標籤

實現思路

首先我們從這個效果上來看，這個標籤是有選中和不選中狀態，那我們首選的控制項肯定就是用 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

 

好了，大家如果有什麼地方看不明白的，留言給我就行～～