TTGTagCollectionView
什么是
TTGTagCollectionView
适用于在垂直或水平可滚动视图中显示不同尺寸的标签视图。如果您只想显示文本标签,可以使用 TTGTextTagCollectionView
替代,它具有更简单的 API。同时,它具有高度的定制性,可以配置文本标签的许多功能,如标签字体大小和背景颜色。
功能
- 支持丰富的样式文本标签和自定义视图标签。
- 高度可定制,每个文本标签都可以配置。
- 垂直和水平可滚动。
- 支持
NSAttributedString
丰富的文本标签。 - 支持不同类型的对齐方式。
- 支持指定行数。
- 支持自动布局的
intrinsicContentSize
,可以根据内容大小自动确定高度。 - 支持下拉刷新,如
SVPullToRefresh
。 - 使用
preferredMaxLayoutWidth
来设置可用宽度,就像 UIlabel 一样。 - 支持
CocoaPods
和Swift Package Manager
。
示例
您可以在 Example->TTGTagCollectionView.xcworkspace
或 ExampleSwift->TTGTagSwiftExample.xcworkspace
项目中找到示例。在尝试之前,先运行 pod update
。
代码结构
要求
iOS 9 及以上版本。
安装
CocoaPodsObjective-C
pod "TTGTagCollectionView"
CocoaPods for Swift
use_frameworks!
pod "TTGTagCollectionView"
Swift 包管理器
添加者:[email protected]:zekunyan/TTGTagCollectionView.git
用法
TTGTextTagCollectionView
使用 TTGTextTagCollectionView
显示文本标签。
基本用法
Swift
// import
import TTGTags
// Create TTGTextTagCollectionView view
let tagView = TTGTextTagCollectionView.init(frame: CGRect(x: 20, y: 100, width: 200, height: 200))
self.view .addSubview(tagView)
// Create TTGTextTag object
let textTag = TTGTextTag(content: TTGTextTagStringContent(text: "tutuge"), style: TTGTextTagStyle())
// Add tag
tagView.addTag(textTag)
// !!! Never forget this !!!
tagView.reload()
Objective-C
// import
#import <TTGTags/TTGTextTagCollectionView.h>
// Create TTGTextTagCollectionView view
TTGTextTagCollectionView *tagCollectionView = [[TTGTextTagCollectionView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];
[self.view addSubview:tagCollectionView];
// Create TTGTextTag object
TTGTextTag *textTag = [TTGTextTag tagWithContent:[TTGTextTagStringContent contentWithText:@"Some text"] style:[TTGTextTagStyle new]];
// Add tag
[tagCollectionView addTag:textTag];
// !!! Never forget this !!!
[tagCollectionView reload];
无障碍访问
// Auto set accessibilityLabel value
tag.enableAutoDetectAccessibility = YES;
// Manual
tag.isAccessibilityElement = YES;
tag.accessibilityLabel = text;
tag.accessibilityIdentifier = [NSString stringWithFormat:@"identifier: %@", text];
tag.accessibilityHint = [NSString stringWithFormat:@"hint: %@", text];
tag.accessibilityValue = [NSString stringWithFormat:@"value: %@", text];
委托
实现 TTGTextTagCollectionViewDelegate
协议,以便在您选择标签或内容高度改变时获取回调。
@protocol TTGTextTagCollectionViewDelegate <NSObject>
@optional
- (BOOL)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView
canTapTag:(TTGTextTag *)tag
atIndex:(NSUInteger)index;
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView
didTapTag:(TTGTextTag *)tag
atIndex:(NSUInteger)index;
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView
updateContentSize:(CGSize)contentSize;
@end
自定义
每个标签都可以进行配置。
@interface TTGTextTag : NSObject <NSCopying>
/// ID
@property (nonatomic, assign, readonly) NSUInteger tagId; // Auto increase. The only identifier and main key for a tag
/// Attachment object. You can use this to bind any object you want to each tag.
@property (nonatomic, strong) id _Nullable attachment;
/// Normal state content and style
@property (nonatomic, copy) TTGTextTagContent * _Nonnull content;
@property (nonatomic, copy) TTGTextTagStyle * _Nonnull style;
/// Selected state content and style
@property (nonatomic, copy) TTGTextTagContent * _Nullable selectedContent;
@property (nonatomic, copy) TTGTextTagStyle * _Nullable selectedStyle;
/// Selection state
@property (nonatomic, assign) BOOL selected;
@property (nonatomic, copy) OnSelectStateChanged _Nullable onSelectStateChanged; // State changed callback
/// Accessibility
@property (nonatomic, assign) BOOL isAccessibilityElement; // Default = NO
@property (nonatomic, copy) NSString * _Nullable accessibilityIdentifier; // Default = nil
@property (nonatomic, copy) NSString * _Nullable accessibilityLabel; // Default = nil
@property (nonatomic, copy) NSString * _Nullable accessibilityHint; // Default = nil
@property (nonatomic, copy) NSString * _Nullable accessibilityValue; // Default = nil
@property (nonatomic, assign) UIAccessibilityTraits accessibilityTraits; // Default = UIAccessibilityTraitNone
/// Auto detect accessibility
/// When enableAutoDetectAccessibility = YES, the property below will be set automatically
/// ----------------------------
/// isAccessibilityElement = YES
/// accessibilityLabel = (selected ? selectedContent : content).getContentAttributedString.string
/// accessibilityTraits = selected ? UIAccessibilityTraitSelected : UIAccessibilityTraitButton
/// ----------------------------
/// But: accessibilityHint and accessibilityValue still keep your custom value;
@property (nonatomic, assign) BOOL enableAutoDetectAccessibility; // Default = NO
@end
TTGTextTagContent
有两个子类。
// Normal Text
@interface TTGTextTagStringContent : TTGTextTagContent
/// Text
@property (nonatomic, copy) NSString * _Nonnull text;
/// Text font
@property (nonatomic, copy) UIFont * _Nonnull textFont;
/// Text color
@property (nonatomic, copy) UIColor * _Nonnull textColor;
@end
// NSAttributedString Text
@interface TTGTextTagAttributedStringContent : TTGTextTagContent
/// Attributed text
@property (nonatomic, copy) NSAttributedString * _Nonnull attributedText;
@end
如果需要更改标签样式,请配置 TTGTextTagStyle
。
@interface TTGTextTagStyle : NSObject <NSCopying>
/// Background color
@property (nonatomic, copy) UIColor * _Nonnull backgroundColor; // Default is [UIColor lightGrayColor]
/// Text alignment
@property (nonatomic, assign) NSTextAlignment textAlignment; // Default is NSTextAlignmentCenter
/// Gradient background color
@property (nonatomic, assign) BOOL enableGradientBackground; // Default is NO
@property (nonatomic, copy) UIColor * _Nonnull gradientBackgroundStartColor;
@property (nonatomic, copy) UIColor * _Nonnull gradientBackgroundEndColor;
@property (nonatomic, assign) CGPoint gradientBackgroundStartPoint;
@property (nonatomic, assign) CGPoint gradientBackgroundEndPoint;
/// Corner radius
@property (nonatomic, assign) CGFloat cornerRadius; // Default is 4
@property (nonatomic, assign) Boolean cornerTopRight;
@property (nonatomic, assign) Boolean cornerTopLeft;
@property (nonatomic, assign) Boolean cornerBottomRight;
@property (nonatomic, assign) Boolean cornerBottomLeft;
/// Border
@property (nonatomic, assign) CGFloat borderWidth; // Default is [UIColor whiteColor]
@property (nonatomic, copy) UIColor * _Nonnull borderColor; // Default is 1
/// Shadow.
@property (nonatomic, copy) UIColor * _Nonnull shadowColor; // Default is [UIColor blackColor]
@property (nonatomic, assign) CGSize shadowOffset; // Default is (2, 2)
@property (nonatomic, assign) CGFloat shadowRadius; // Default is 2f
@property (nonatomic, assign) CGFloat shadowOpacity; // Default is 0.3f
/// Extra space in width and height, will expand each tag's size
@property (nonatomic, assign) CGSize extraSpace;
/// Max width for a text tag. 0 and below means no max width.
@property (nonatomic, assign) CGFloat maxWidth;
/// Min width for a text tag. 0 and below means no min width.
@property (nonatomic, assign) CGFloat minWidth;
/// Max height for a text tag. 0 and below means no max height.
@property (nonatomic, assign) CGFloat maxHeight;
/// Min height for a text tag. 0 and below means no min height.
@property (nonatomic, assign) CGFloat minHeight;
/// Exact width. 0 and below means no work
@property (nonatomic, assign) CGFloat exactWidth;
/// Exact height. 0 and below means no work
@property (nonatomic, assign) CGFloat exactHeight;
@end
您还可以配置滚动方向、对齐方式、行数限制、间距和内边距。
// TTGTextTagCollectionView.h
// Define if the tag can be selected.
@property (assign, nonatomic) BOOL enableTagSelection;
// Tags scroll direction, default is vertical.
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;
// Tags layout alignment, default is left.
@property (nonatomic, assign) TTGTagCollectionAlignment alignment;
// Number of lines. 0 means no limit, default is 0 for vertical and 1 for horizontal.
@property (nonatomic, assign) NSUInteger numberOfLines;
// Tag selection limit, default is 0, means no limit
@property (nonatomic, assign) NSUInteger selectionLimit;
// Horizontal and vertical space between tags, default is 4.
@property (assign, nonatomic) CGFloat horizontalSpacing;
@property (assign, nonatomic) CGFloat verticalSpacing;
// Content inset, default is UIEdgeInsetsMake(2, 2, 2, 2).
@property (nonatomic, assign) UIEdgeInsets contentInset;
// The true tags content size, readonly
@property (nonatomic, assign, readonly) CGSize contentSize;
// Manual content height
// Default = NO, set will update content
@property (nonatomic, assign) BOOL manualCalculateHeight;
// Default = 0, set will update content
@property (nonatomic, assign) CGFloat preferredMaxLayoutWidth;
// Scroll indicator
@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;
对齐类型
typedef NS_ENUM(NSInteger, TTGTagCollectionAlignment) {
TTGTagCollectionAlignmentLeft = 0, // Default
TTGTagCollectionAlignmentCenter, // Center
TTGTagCollectionAlignmentRight, // Right
TTGTagCollectionAlignmentFillByExpandingSpace, // Expand horizontal spacing and fill
TTGTagCollectionAlignmentFillByExpandingWidth, // Expand width and fill
TTGTagCollectionAlignmentFillByExpandingWidthExceptLastLine, // Expand width and fill, except last line
};
修改标签
添加标签。
// TTGTextTagCollectionView.h
/// Add
- (void)addTag:(TTGTextTag *)tag;
- (void)addTags:(NSArray <TTGTextTag *> *)tags;
插入标签。
// TTGTextTagCollectionView.h
/// Insert
- (void)insertTag:(TTGTextTag *)tag atIndex:(NSUInteger)index;
- (void)insertTags:(NSArray <TTGTextTag *> *)tags atIndex:(NSUInteger)index;
更新标签。
// TTGTextTagCollectionView.h
/// Update
- (void)updateTagAtIndex:(NSUInteger)index selected:(BOOL)selected;
- (void)updateTagAtIndex:(NSUInteger)index withNewTag:(TTGTextTag *)tag;
删除标签。
// TTGTextTagCollectionView.h
// Remove tag
- (void)removeTag:(TTGTextTag *)tag;
- (void)removeTagById:(NSUInteger)tagId;
- (void)removeTagAtIndex:(NSUInteger)index;
- (void)removeAllTags;
获取标签。
// TTGTextTagCollectionView.h
/// Get tag
- (TTGTextTag *)getTagAtIndex:(NSUInteger)index;
- (NSArray <TTGTextTag *> *)getTagsInRange:(NSRange)range;
/// Get all
- (NSArray <TTGTextTag *> *)allTags;
- (NSArray <TTGTextTag *> *)allSelectedTags;
- (NSArray <TTGTextTag *> *)allNotSelectedTags;
重新加载
可以通过程序方式重新加载标签。
// TTGTextTagCollectionView.h
- (void)reload;
在指定点索引
返回指定点标签的索引。
// TTGTextTagCollectionView.h
- (NSInteger)indexOfTagAt:(CGPoint)point;
TTGTagCollectionView
使用TTGTagCollectionView
来显示自定义的标签视图。
数据源和代理
类似于UITableView,您必须符合并实现TTGTagCollectionViewDelegate
和TTGTagCollectionViewDataSource
的必需方法,以使TTGTagCollectionView
工作。
数据源
@protocol TTGTagCollectionViewDataSource <NSObject>
@required
- (NSUInteger)numberOfTagsInTagCollectionView:(TTGTagCollectionView *)tagCollectionView;
- (UIView *)tagCollectionView:(TTGTagCollectionView *)tagCollectionView tagViewForIndex:(NSUInteger)index;
@end
代理
@protocol TTGTagCollectionViewDelegate <NSObject>
@required
- (CGSize)tagCollectionView:(TTGTagCollectionView *)tagCollectionView sizeForTagAtIndex:(NSUInteger)index;
@optional
- (BOOL)tagCollectionView:(TTGTagCollectionView *)tagCollectionView shouldSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;
- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView didSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;
- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView updateContentSize:(CGSize)contentSize;
@end
自定义
// TTGTagCollectionView.h
// Tags scroll direction, default is vertical.
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;
// Tags layout alignment, default is left.
@property (nonatomic, assign) TTGTagCollectionAlignment alignment;
// Number of lines. 0 means no limit, default is 0 for vertical and 1 for horizontal.
@property (nonatomic, assign) NSUInteger numberOfLines;
// Horizontal and vertical space between tags, default is 4.
@property (nonatomic, assign) CGFloat horizontalSpacing;
@property (nonatomic, assign) CGFloat verticalSpacing;
// Content inset, default is UIEdgeInsetsMake(2, 2, 2, 2).
@property (nonatomic, assign) UIEdgeInsets contentInset;
// The true tags content size, readonly
@property (nonatomic, assign, readonly) CGSize contentSize;
// Manual content height
// Default = NO, set will update content
@property (nonatomic, assign) BOOL manualCalculateHeight;
// Default = 0, set will update content
@property (nonatomic, assign) CGFloat preferredMaxLayoutWidth;
// Scroll indicator
@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;
重新加载
可以通过程序方式重新加载标签。
// TTGTagCollectionView.h
- (void)reload;
点上的索引
返回指定点标签的索引。
// TTGTagCollectionView.h
- (NSInteger)indexOfTagAt:(CGPoint)point;
修复
当在tableViewCell中使用tagView时,UITableViewAutomaticDimension
可能不起作用。您应该在实际显示视图后(viewDidAppear
)重新加载您的tableView。
作者
zekunyan, [email protected]
许可证
TTGTagCollectionView遵循MIT许可证。更多信息请参阅LICENSE文件。