iOS 标签Tag列表的实现代码

时间:2022-09-18 09:25:08

前言

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

iOS 标签Tag列表的实现代码

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

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

view布局

lslabeltextview.h的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
//
// lslabeltextview.h
// rencheren
//
// created by 王隆帅 on 15/12/30.
// copyright © 2015年 王隆帅. all rights reserved.
//
 
#import "ycview.h"
 
@interface lslabeltextview : ycview
 
@end

lslabeltextview.m的实现

?
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
//
// 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的实现

?
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
//
// 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的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//
// 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

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

原文链接:http://www.jianshu.com/p/db3ead7a8d31#