开源项目-TTGTagCollectionView

jopen 9年前

前言

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

CocoaPods: pod "TTGTagCollectionView"

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

只显示文字标签 - TTGTextTagCollectionView

基本使用

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

TTGTextTagCollectionView *tagCollectionView = [[TTGTextTagCollectionView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];  [self.view addSubview:tagCollectionView];  [tagCollectionView addTags:@[@"TTG", @"Tag", @"collection", @"view"]];
</div>

接收点击事件 - 实现Delegate

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

@protocol TTGTextTagCollectionViewDelegate <NSObject>  @optional  - (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView didTapTag:(NSString *)tagText atIndex:(NSUInteger)index selected:(BOOL)selected;  @end
</div>

自定义文字标签样式

如果想对标签的样式做定制，可以设置以下属性： 

// 标签是否可以被选中  @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 tagBorderWidth;  @property (strong, nonatomic) UIColor *tagBorderColor;    // 标签宽高的扩展值，可以理解为padding  @property (assign, nonatomic) CGSize extraSpace;
</div>

增加、删除标签

// 增加一个标签  - (void)addTag:(NSString *)tag;    - (void)addTags:(NSArray <NSString *> *)tags;    /// 删除标签  - (void)removeTag:(NSString *)tag;    - (void)removeTagAtIndex:(NSUInteger)index;    - (void)removeAllTags;
</div>

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

- (void)setTagAtIndex:(NSUInteger)index selected:(BOOL)selected;
</div>

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

- (NSArray <NSString *> *)allTags;    - (NSArray <NSString *> *)allSelectedTags;    - (NSArray <NSString *> *)allNotSelectedTags;
</div>

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

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

基本要求 - 实现DataSource和Delegate

DataSource的定义如下： 

@protocol TTGTagCollectionViewDataSource <NSObject>  @required  - (NSUInteger)numberOfTagsInTagCollectionView:(TTGTagCollectionView *)tagCollectionView;    - (UIView *)tagCollectionView:(TTGTagCollectionView *)tagCollectionView tagViewForIndex:(NSUInteger)index;  @end
</div>

Delegate的定义如下: 

@protocol TTGTagCollectionViewDelegate <NSObject>  @required  - (CGSize)tagCollectionView:(TTGTagCollectionView *)tagCollectionView sizeForTagAtIndex:(NSUInteger)index;    @optional  - (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView didSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;    - (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView updateContentHeight:(CGFloat)newContentHeight;  @end
</div>

跟UITableView的思路一致~

设置标签的行距、间隔

// 水平间隔  @property (assign, nonatomic) CGFloat horizontalSpacing;  // 行距  @property (assign, nonatomic) CGFloat verticalSpacing;
</div>

重新加载 - Reload

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

End

2015最后一天~新年快乐~

</div>

来自： http://tutuge.me/2015/12/31/TTGTagCollectionView/

相关经验