开发中常遇到根据服务器返回的数据去创建很多可点击的小标签。如下面这种样式的
image.png
一般这种样式的数据格式都是数组中放模型，模型类中的一个属性还是个数组，数组中存放的是另一个模型类对象。
遇到这种样式，因为外层数组个数不固定，所以分区数也不固定，一般思路是用tableView的group样式去创建，但也可以用UIScrollView去遍历两层数组创建，我这里是用for循环遍历数组创建标签到UIScrollView上。
先在创建页面控件的方法里创建UIScrollView对象mainScr，设置好相关属性和frame，等服务器返回的数据解析成模型类以后，再调用下面的子视图创建的方法，遍历两层模型数组，创建标签，添加到mainScr上面
我这里用自己模拟的一些数据创建的视图，模拟数据格式如下，写的不怎么规范，凑合看吧：
image.png
int View_Top = 10; //分区视图的y顶点
int View_Gap = 15; // 每个分区视图之间的间距
int left_gap = 10; //分区视图左侧距离父视图mainScr的距离
for(int i=0;i<dicArr.count;i++) {
NSDictionary *Dic = dicArr[i];
//========== 创建分区的背景视图=====================
UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(left_gap, View_Top, ScreenWith-2*left_gap, 10)];
[mainScr addSubview:backView];
//分区的标题中的图片
UIImageView *imgV = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
imgV.backgroundColor = [UIColor redColor];
[backView addSubview:imgV];
//分区标题中的文字
UILabel *titleL = [[UILabel alloc] initWithFrame:CGRectMake(imgV.right+5, imgV.top, backView.width-45, 20)];
titleL.text = Dic[@"title"];
titleL.font = [UIFont systemFontOfSize:15];
[backView addSubview:titleL];
//分区中的小标签所在的视图
UIView *subView = [[UIView alloc] initWithFrame:CGRectMake(left_gap, titleL.bottom+10, backView.width-2*left_gap, 10)];
[backView addSubview:subView];
///============创建分区的标签视图===============
int btn_left = 10; //标签按钮的x顶点
int btn_top = 10; //标签按钮的y顶点
int btn_height = 25; //标签按钮的高度
int btn_gap = 10; //标签按钮上下和左右的间距
NSArray *detailArr = Dic[@"tagArr"];
NSMutableArray *btnArr = [NSMutableArray array];
for(int j=0;j<detailArr.count;j++) {
NSDictionary *dic = detailArr[j];
///按标签文字的长度计算出标签的宽度
int w = [CommonTools stringwidthfor:dic[@"tagStr"] font:[UIFont systemFontOfSize:13]]+30;
//如果即将要创建的标签的左顶点超出父视图，则换行
if(btn_left + w + btn_gap > subView.width) {
btn_left = 10;
btn_top = btn_top + btn_gap + btn_height;
}
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(btn_left, btn_top, w, btn_height)];
[btn setTitle:dic[@"tagStr"] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
btn.layer.borderColor = [UIColor blueColor].CGColor;
btn.layer.borderWidth = 1;
btn.clipsToBounds = YES;
btn.selected = NO;
btn.layer.cornerRadius = btn_height/2;
btn.titleLabel.font = [UIFont systemFontOfSize:13];
[btn addTarget:self action:@selector(clickTag:) forControlEvents:UIControlEventTouchUpInside];
[subView addSubview:btn];
//改变标签的左顶点位置
btn_left = btn_left + btn_gap + w;
//改变标签视图的高度
subView.height = btn_top + btn_height + btn_gap;
[btnArr addObject:btn];
}
//根据分类项目的id将标签存储到对应的数组，以便后续处理标签的单选多选逻辑
if([Dic[@"cate_id"] isEqualToString:@"0"]) {
sexArray = btnArr;
}else if([Dic[@"cate_id"] isEqualToString:@"1"]) {
ageArray = btnArr;
}else if([Dic[@"cate_id"] isEqualToString:@"2"]) {
drugArray = btnArr;
}else if([Dic[@"cate_id"] isEqualToString:@"3"]) {
getArray = btnArr;
}
//分区视图的顶部放titleL和imageV的间距
int subView_top = 10+20+10;
//根据标签视图的高度，计算分区背景视图的高度
backView.height = subView_top + subView.height + View_Gap;
//改变一下分区视图的y顶点值
View_Top = backView.bottom+10;
}
//当所有子视图都创建完成，改变mainScr的contentSize
mainScr.contentSize = CGSizeMake(ScreenWith, View_Top);
UIScrollView创建标签视图的好处是代码简洁，不用处理很多代理方法，记性不好，常用功能记录一下。
代码如有处理不当之处，烦请看这篇文章的小可爱们指正一下~
网友评论