您好,登錄后才能下訂單哦!
小編這次要給大家分享的是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
看完這篇關于iOS如何實現動態自適應標簽的文章,如果覺得文章內容寫得不錯的話,可以把它分享出去給更多人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。