开源项目-TTGTagCollectionView

更新

  • 2017-02-27: 增加两种Alignment布局类型;增加点击前的回调判断;增加选中Tag上限
  • 2016-12-25: 不再依赖UICollectionView,减少了位置刷新次数,提高性能;增加了alignment属性,可以靠左中右排列
  • 2016-10-29: 增加Tag的阴影和ContentInset的设置,更新了Demo
  • 2016-10-17: 增加了水平滑动;Autolayout适配;UITableViewCell例子等
  • 2016-02-18: 修复了超长标签导致排版错误的Bug

前言

这段时间做项目的时候,总是需要显示一些“标签”样式的内容,但是又找不到用的顺手的库,所以琢磨了几天,自己实现了出来,就有了这个库:TTGTagCollectionView。如果只需要显示文字标签的话,直接使用TTGTextTagCollectionView,需要自己定义标签的话,就用TTGTagCollectionView,效果如下:

ScreenShot

支持五种布局排版:

Alignment

CocoaPods: pod "TTGTagCollectionView"
Carthage: github "zekunyan/TTGTagCollectionView"

Github地址: https://github.com/zekunyan/TTGTagCollectionView

只显示文字标签 - TTGTextTagCollectionView

基本使用

只显示文字标签的话,直接用TTGTextTagCollectionView类就可以了:

1
2
3
TTGTextTagCollectionView *tagCollectionView = [[TTGTextTagCollectionView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];
[self.view addSubview:tagCollectionView];
[tagCollectionView addTags:@[@"TTG", @"Tag", @"collection", @"view"]];

接收点击事件 - 实现Delegate

如果想在标签被点击时得到通知,实现对应的Protocol即可,定义如下:

1
2
3
4
5
6
7
8
9
10
11
@protocol TTGTextTagCollectionViewDelegate <NSObject>
@optional
// 是否可以点击某个Tag
- (BOOL)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView canTapTag:(NSString *)tagText atIndex:(NSUInteger)index currentSelected:(BOOL)currentSelected;
// 点击了某个Tag
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView didTapTag:(NSString *)tagText atIndex:(NSUInteger)index selected:(BOOL)selected;
// 内容大小更新
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView updateContentSize:(CGSize)contentSize;
@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
// 标签是否可以被选中
@property (assign, nonatomic) BOOL enableTagSelection;
// 字体
@property (strong, nonatomic) UIFont *tagTextFont;
// 文字颜色
@property (strong, nonatomic) UIColor *tagTextColor;
@property (strong, nonatomic) UIColor *tagSelectedTextColor;
// 标签背景颜色
@property (strong, nonatomic) UIColor *tagBackgroundColor;
@property (strong, nonatomic) UIColor *tagSelectedBackgroundColor;
// 圆角值
@property (assign, nonatomic) CGFloat tagCornerRadius;
@property (assign, nonatomic) CGFloat tagSelectedCornerRadius;
// 边框
@property (assign, nonatomic) CGFloat tagBorderWidth;
@property (assign, nonatomic) CGFloat tagSelectedBorderWidth;
@property (strong, nonatomic) UIColor *tagBorderColor;
@property (strong, nonatomic) UIColor *tagSelectedBorderColor;
// 阴影
@property (nonatomic, copy) UIColor *tagShadowColor; // Default is [UIColor black]
@property (nonatomic, assign) CGSize tagShadowOffset; // Default is (2, 2)
@property (nonatomic, assign) CGFloat tagShadowRadius; // Default is 2f
@property (nonatomic, assign) CGFloat tagShadowOpacity; // Default is 0.3f
// 滚动方向,默认垂直方向
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;
// 布局类型,默认靠左
@property (nonatomic, assign) TTGTagCollectionAlignment alignment;
// 行数,默认0,不限制
@property (nonatomic, assign) NSUInteger numberOfLines;
// 选中的数量限制
@property (nonatomic, assign) NSUInteger selectionLimit;
// 标签宽高的扩展值,可以理解为padding
@property (assign, nonatomic) CGSize extraSpace;
// 水平间隔
@property (assign, nonatomic) CGFloat horizontalSpacing;
// 行距
@property (assign, nonatomic) CGFloat verticalSpacing;
// 整体的Inset
@property (nonatomic, assign) UIEdgeInsets contentInset;
// 所有标签大小
@property (nonatomic, assign, readonly) CGSize contentSize;
// 是否显示滚动条
@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;

增加、删除标签

1
2
3
4
5
6
7
8
9
10
11
// 增加一个标签
- (void)addTag:(NSString *)tag;
- (void)addTags:(NSArray <NSString *> *)tags;
/// 删除标签
- (void)removeTag:(NSString *)tag;
- (void)removeTagAtIndex:(NSUInteger)index;
- (void)removeAllTags;

在代码里控制标签的选中状态

1
- (void)setTagAtIndex:(NSUInteger)index selected:(BOOL)selected;

获取所有、选中、未选中标签

1
2
3
4
5
- (NSArray <NSString *> *)allTags;
- (NSArray <NSString *> *)allSelectedTags;
- (NSArray <NSString *> *)allNotSelectedTags;

重新加载 - Reload

- (void)reload方法重新加载所有标签。

显示自定义的标签控件View - TTGTagCollectionView

如果想自己定义标签View,如同时显示图像、文字、按钮,可以用TTGTagCollectionView类实现。

基本要求 - 实现DataSource和Delegate

DataSource的定义如下:

1
2
3
4
5
6
7
8
@protocol TTGTagCollectionViewDataSource <NSObject>
@required
// 返回标签数量
- (NSUInteger)numberOfTagsInTagCollectionView:(TTGTagCollectionView *)tagCollectionView;
// 返回对应标签View
- (UIView *)tagCollectionView:(TTGTagCollectionView *)tagCollectionView tagViewForIndex:(NSUInteger)index;
@end

Delegate的定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@protocol TTGTagCollectionViewDelegate <NSObject>
@required
// 必须实现:返回对应的标签Size
- (CGSize)tagCollectionView:(TTGTagCollectionView *)tagCollectionView sizeForTagAtIndex:(NSUInteger)index;
@optional
// 是否可以点击Tag
- (BOOL)tagCollectionView:(TTGTagCollectionView *)tagCollectionView shouldSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;
// 点击标签时回调
- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView didSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;
// 所有标签总体Size更新
- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView updateContentSize:(CGSize)contentSize;
@end

跟UITableView的思路一致~

设置标签的行距、间隔

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 滚动方向
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;
// 布局方式,默认靠左
@property (nonatomic, assign) TTGTagCollectionAlignment alignment;
// 行数,默认0,不限制
@property (nonatomic, assign) NSUInteger numberOfLines;
// 水平间隔
@property (assign, nonatomic) CGFloat horizontalSpacing;
// 行距
@property (assign, nonatomic) CGFloat verticalSpacing;
// 整体Inset
@property (nonatomic, assign) UIEdgeInsets contentInset;
// 所有标签总体Size
@property (nonatomic, assign, readonly) CGSize contentSize;
// 是否显示滚动条
@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;

重新加载 - Reload

- (void)reload方法重新加载所有标签。

End

2015最后一天~
新年快乐~


当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器