TTGTagCollectionView 2.4.2

TTGTagCollectionView 2.4.2

测试已测试
语言语言 Obj-CObjective C
许可协议 MIT
发布最新发布2023年5月

zekunyantutuge 维护。



TTGTagCollectionView

CI Status Version License Platform Apps Using Total Download

Screenshot

Alignment Type

什么是

TTGTagCollectionView 适用于在垂直或水平可滚动视图中显示不同尺寸的标签视图。如果您只想显示文本标签,可以使用 TTGTextTagCollectionView 替代,它具有更简单的 API。同时,它具有高度的定制性,可以配置文本标签的许多功能,如标签字体大小和背景颜色。

功能

  • 支持丰富的样式文本标签和自定义视图标签。
  • 高度可定制,每个文本标签都可以配置。
  • 垂直和水平可滚动。
  • 支持 NSAttributedString 丰富的文本标签。
  • 支持不同类型的对齐方式。
  • 支持指定行数。
  • 支持自动布局的 intrinsicContentSize,可以根据内容大小自动确定高度。
  • 支持下拉刷新,如 SVPullToRefresh
  • 使用 preferredMaxLayoutWidth 来设置可用宽度,就像 UIlabel 一样。
  • 支持 CocoaPodsSwift Package Manager

示例

您可以在 Example->TTGTagCollectionView.xcworkspaceExampleSwift->TTGTagSwiftExample.xcworkspace 项目中找到示例。在尝试之前,先运行 pod update

Example project

代码结构

Example project

要求

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,您必须符合并实现TTGTagCollectionViewDelegateTTGTagCollectionViewDataSource的必需方法,以使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文件。