iOS 标签Tag列表的实现代码

前言

1、之前项目中会有一些标签列表来显示某些特性或要求，如下图（代码实现后的效果）:

2、期间也是浏览了好多其他的第三方，但是可能是没找到好的方法去寻找吧，没有找到一个合适的，况且又不是特别复杂的东西，所以就自己写了一套，但是注意因为我们项目中使用的是rac+mansory,所以想要使用的话需要引入这两个库=_=。

3、自己写的时候考虑的不是太多，中心思想是viewmodel做定制需求，view通过viewmodel来实现定制化ui，其他更多的是逻辑上的排版，所以不做更多赘述，自己体会y^o^y 。

view布局

lslabeltextview.h的实现

//
// lslabeltextview.h
// rencheren
//
// created by 王隆帅 on 15/12/30.
// copyright © 2015年 王隆帅. all rights reserved.
//

#import "ycview.h"

@interface lslabeltextview : ycview

@end

lslabeltextview.m的实现

//
// lslabeltextview.m
// rencheren
//
// created by 王隆帅 on 15/12/30.
// copyright © 2015年 王隆帅. all rights reserved.
//

#import "lslabeltextview.h"
#import "lslabeltextviewmodel.h"

@interface lslabeltextview ()

@property (nonatomic, strong) lslabeltextviewmodel *viewmodel;

@end
@implementation lslabeltextview {

  masconstraint *_toleftbtnmasconstraint;
  masconstraint *_totopbtnmasonstraint;
  masconstraint *_toleftselfmasconstraint;
  masconstraint *_totopselfmasonstraint;
}

- (instancetype)initwithviewmodel:(id<ycviewmodelprotocol>)viewmodel {

  self.viewmodel = (lslabeltextviewmodel *)viewmodel;
  return [super initwithviewmodel:viewmodel];
}

- (void)yc_bindviewmodel {

  @weakify(self);
  [[racobserve(self, viewmodel.dataarray) distinctuntilchanged] subscribenext:^(id x) {

    @strongify(self);

    [self.subviews makeobjectsperformselector:@selector(removefromsuperview)];

    if (self.viewmodel.dataarray.count <= 0) {

      __weak uiview *weaknullview;
      uiview *nullview = [[uiview alloc] init];
      weaknullview = nullview;
      [self addsubview:weaknullview];
      ws(weakself)
      [weaknullview mas_makeconstraints:^(masconstraintmaker *make) {

        make.top.right.left.bottom.equalto(weakself);
        make.height.equalto(weakself.viewmodel.nullheight);
      }];
      return;
    }

    nsinteger linenum = 1;
    cgfloat allwidth = 0;
    __weak uibutton *lastbtn;

    for (int i = 0; i < self.viewmodel.dataarray.count; i++) {

       nsstring *string = [self.viewmodel.dataarray stringwithindex:i];
      __weak uibutton *weakbtn = [self ls_getbtnwithstring:string];
      [self addsubview:weakbtn];

      cgsize size = [string widthwithheight:20 andfont:self.viewmodel.textfontnum];

      cgfloat needfloat = size.width < self.viewmodel.miniwidth ? self.viewmodel.miniwidth : size.width;

      if (lastbtn) {

        ws(weakself)
        [weakbtn mas_makeconstraints:^(masconstraintmaker *make) {

          _toleftbtnmasconstraint = make.left.equalto(lastbtn.mas_right).offset(weakself.viewmodel.labelhorizontalspace);
          [_toleftbtnmasconstraint activate];

          _totopbtnmasonstraint = make.top.equalto(lastbtn.mas_bottom).offset(weakself.viewmodel.labelverticalspace);
          [_totopbtnmasonstraint deactivate];

          _toleftselfmasconstraint = make.left.equalto(weakself.viewmodel.lefttoviewedge);
          _totopselfmasonstraint = make.top.equalto(lastbtn);

          make.size.equalto(cgsizemake(needfloat + 20, weakself.viewmodel.labelheight));
        }];

        if (allwidth + self.viewmodel.labelhorizontalspace + needfloat + 20 + self.viewmodel.righttoviewedge > self.viewmodel.allwidth) {
          [_toleftselfmasconstraint activate];
          [_toleftbtnmasconstraint deactivate];
          [_totopbtnmasonstraint activate];
          [_totopselfmasonstraint deactivate];

          linenum ++;
          allwidth = self.viewmodel.lefttoviewedge + needfloat + 20;
        } else {

          [_toleftselfmasconstraint deactivate];
          [_toleftbtnmasconstraint activate];
          [_totopbtnmasonstraint deactivate];
          [_totopselfmasonstraint activate];

          allwidth = allwidth + self.viewmodel.labelhorizontalspace + needfloat + 20;
        }
      } else {

        ws(weakself)
        [weakbtn mas_makeconstraints:^(masconstraintmaker *make) {

          make.left.equalto(weakself.viewmodel.lefttoviewedge);
          make.size.equalto(cgsizemake(needfloat + 20, weakself.viewmodel.labelheight));
          make.top.equalto(weakself.viewmodel.toptoviewedge);
        }];

        allwidth = allwidth + self.viewmodel.lefttoviewedge + needfloat + 20;
      }

      lastbtn = weakbtn;
    }

    ws(weakslef)
    [lastbtn mas_updateconstraints:^(masconstraintmaker *make) {

      make.bottom.equalto(weakslef.viewmodel.bottomtoviewedge);
    }];

  }];
}

- (uibutton *)ls_getbtnwithstring:(nsstring *)string {

  uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom];
  btn.layer.borderwidth = 0.5;
  btn.layer.bordercolor = self.viewmodel.bordercolor.cgcolor;
  [btn settitlecolor:self.viewmodel.titlecolor forstate:uicontrolstatenormal];
  btn.backgroundcolor = self.viewmodel.backgroundcolor;
  btn.layer.maskstobounds = yes;
  btn.layer.cornerradius = self.viewmodel.cornerradius;
  btn.titlelabel.font = yc_yahei_font(self.viewmodel.textfontnum);
  [btn settitle:string forstate:uicontrolstatenormal];
  btn.ls_typestring = string;

  return btn;
}

@end

viewmodel适配

lslabeltextviewmodel.h的实现

//
// lslabeltextviewmodel.h
// rencheren
//
// created by 王隆帅 on 15/12/30.
// copyright © 2015年 王隆帅. all rights reserved.
//

#import "ycviewmodel.h"

@interface lslabeltextviewmodel : ycviewmodel
/**
 * 标签数组
 */
@property (nonatomic, strong) nsmutablearray *dataarray;
/**
 * 总的宽度
 */
@property (nonatomic, assign) cgfloat allwidth;
/**
 * 没有标签时的高度
 */
@property (nonatomic, assign) cgfloat nullheight;
/**
 * 文字字体大小
 */
@property (nonatomic, assign) cgfloat textfontnum;
/**
 * 取得标签为空的时候，标签最小长度
 */
@property (nonatomic, assign) cgfloat miniwidth;
/**
 * 标签高度
 */
@property (nonatomic, assign) cgfloat labelheight;
/**
 * 最左侧标签距离view的边缘的宽度
 */
@property (nonatomic, assign) cgfloat lefttoviewedge;
/**
 * 最右侧标签距离view的边缘的宽度
 */
@property (nonatomic, assign) cgfloat righttoviewedge;
/**
 * 最上侧标签距离view的边缘的宽度
 */
@property (nonatomic, assign) cgfloat toptoviewedge;
/**
 * 最下侧标签距离view的边缘的宽度
 */
@property (nonatomic, assign) cgfloat bottomtoviewedge;
/**
 * 横向标签之间的宽度
 */
@property (nonatomic, assign) cgfloat labelhorizontalspace;
/**
 * 纵向标签之间的宽度
 */
@property (nonatomic, assign) cgfloat labelverticalspace;
/**
 * label(btn) 的相关属性
 */
@property (nonatomic, assign) cgfloat borderwidth;
@property (nonatomic, strong) uicolor *bordercolor;
@property (nonatomic, strong) uicolor *titlecolor;
@property (nonatomic, strong) uicolor *backgroundcolor;
@property (nonatomic, assign) cgfloat cornerradius;

@end

lslabeltextviewmodel.m的实现

//
// lslabeltextviewmodel.m
// rencheren
//
// created by 王隆帅 on 15/12/30.
// copyright © 2015年 王隆帅. all rights reserved.
//

#import "lslabeltextviewmodel.h"

@implementation lslabeltextviewmodel

- (nsmutablearray *)dataarray {

  if (!_dataarray) {

    _dataarray = [[nsmutablearray alloc] init];
  }
  return _dataarray;
}

@end

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。