開源項目-TTGTagCollectionView

jopen 9年前發布 | 13K 次閱讀開源 iOS開發移動開發

前言

這段時間做項目的時候，總是需要顯示一些“標簽”樣式的內容，但是又找不到用的順手的庫，所以琢磨了幾天，自己實現了出來，就有了這個庫：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"]];

接收點擊事件 - 實現Delegate

如果想在標簽被點擊時得到通知，實現對應的Protocol即可，定義如下:

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

自定義文字標簽樣式

如果想對標簽的樣式做定制，可以設置以下屬性：

// 標簽是否可以被選中
@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;

增加、刪除標簽

// 增加一個標簽
- (void)addTag:(NSString *)tag;

- (void)addTags:(NSArray <NSString *> *)tags;

/// 刪除標簽
- (void)removeTag:(NSString *)tag;

- (void)removeTagAtIndex:(NSUInteger)index;

- (void)removeAllTags;

在代碼里控制標簽的選中狀態

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

獲取所有、選中、未選中標簽

- (NSArray <NSString *> *)allTags;

- (NSArray <NSString *> *)allSelectedTags;

- (NSArray <NSString *> *)allNotSelectedTags;

顯示自定義的標簽控件View - TTGTagCollectionView

如果想自己定義標簽View，如同時顯示圖像、文字、按鈕，可以用 TTGTagCollectionView 類實現。

基本要求 - 實現DataSource和Delegate

DataSource的定義如下：

@protocol TTGTagCollectionViewDataSource <NSObject>
@required
- (NSUInteger)numberOfTagsInTagCollectionView:(TTGTagCollectionView *)tagCollectionView;

- (UIView *)tagCollectionView:(TTGTagCollectionView *)tagCollectionView tagViewForIndex:(NSUInteger)index;
@end

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

跟UITableView的思路一致~

設置標簽的行距、間隔

// 水平間隔
@property (assign, nonatomic) CGFloat horizontalSpacing;
// 行距
@property (assign, nonatomic) CGFloat verticalSpacing;

重新加載 - Reload

用 - (void)reload 方法重新加載所有標簽。

End

2015最后一天~新年快樂~

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

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1451735904980.html

開源 iOS開發移動開發