iOS 常见分组标签视图

开发中常遇到根据服务器返回的数据去创建很多可点击的小标签。如下面这种样式的

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创建标签视图的好处是代码简洁，不用处理很多代理方法，记性不好，常用功能记录一下。
代码如有处理不当之处，烦请看这篇文章的小可爱们指正一下~