ios实现动态自适应标签（ios实现动态自适应标签）

先上效果图

设计要求

1、标签的宽度是按内容自适应的

2、一行显示的标签个数是动态的，放得下就放，放不下就换行

3、默认选中第一个

4、至少选中一个标签

实现思路

首先我们从这个效果上来看，这个标签是有选中和不选中状态，那我们首选的控件肯定就是用 uibutton来实现了。

这个小程度的重点就在于标签能自动换行，还是智能的，不是固定一行多少个那种，这个我们通过计算每个按钮实际宽度与屏幕的宽度进行比较就能判断是否需要换行了。

还有一点就是处理至少选中一个标签的功能，我这里有一种方式，就是控制按钮的 userinteractionenabled 属性来实现，如果只有一个按钮的时候就把那一个按钮的这个属性给设置成 no，这样就禁止用户对它进行点击事件了，这个时候其它按钮是可以正常选中的，只要选中的按钮大于1个，那就把刚才那个按钮属性再改成yes，这样那个按钮就又能点了。

具体看代码

创建一个继承于uiview的 xgtagview 类

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 // // 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 // // 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