TTGTagCollectionView
What
TTGTagCollectionView is useful for showing different size tag views in a vertical or horizontal scrollable view. And if you only want to show text tags, you can use TTGTextTagCollectionView instead, which has more simple api. At the same time, It is highly customizable that many features of the text tag can be configured, like the tag font size and the background color.
Features
- Both text tag and custom view tag supported.
- Highly customizable, each text tag can be configured.
- Vertical and horizontal scrollable.
- Support different kinds of aligment types.
- Support specifying number of lines.
- Support Autolayout
intrinsicContentSize
to auto determine height based on content size. - Support pull to refresh, like
SVPullToRefresh
.
Demo
You can find demos in the Example->TTGTagCollectionView.xcworkspace
project.
Requirements
iOS 7 and later.
Installation
CocoaPods
TTGTagCollectionView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "TTGTagCollectionView"
Carthage
You can use Carthage to install TTGTagCollectionView
by adding it to your Cartfile
:
github "zekunyan/TTGTagCollectionView"
Usage
TTGTextTagCollectionView
Use TTGTextTagCollectionView to show text tags.
Basic usage
TTGTextTagCollectionView *tagCollectionView = [[TTGTextTagCollectionView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];
[self.view addSubview:tagCollectionView];
[tagCollectionView addTags:@[@"TTG", @"Tag", @"collection", @"view"]];
Delegate
Conform the TTGTextTagCollectionViewDelegate
protocol to get callback when you select the tag or content height changes.
@protocol TTGTextTagCollectionViewDelegate <NSObject>
@optional
- (BOOL)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView canTapTag:(NSString *)tagText atIndex:(NSUInteger)index currentSelected:(BOOL)currentSelected;
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView didTapTag:(NSString *)tagText atIndex:(NSUInteger)index selected:(BOOL)selected;
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView updateContentSize:(CGSize)contentSize;
@end
Customization
Each tag can be configured.
@interface TTGTextTagConfig : NSObject
// Text font
@property (strong, nonatomic) UIFont *tagTextFont;
// Text color
@property (strong, nonatomic) UIColor *tagTextColor;
@property (strong, nonatomic) UIColor *tagSelectedTextColor;
// Background color
@property (strong, nonatomic) UIColor *tagBackgroundColor;
@property (strong, nonatomic) UIColor *tagSelectedBackgroundColor;
// Corner radius
@property (assign, nonatomic) CGFloat tagCornerRadius;
@property (assign, nonatomic) CGFloat tagSelectedCornerRadius;
// Border
@property (assign, nonatomic) CGFloat tagBorderWidth;
@property (assign, nonatomic) CGFloat tagSelectedBorderWidth;
@property (strong, nonatomic) UIColor *tagBorderColor;
@property (strong, nonatomic) UIColor *tagSelectedBorderColor;
// Tag shadow.
@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
// Tag extra space in width and height, will expand each tag's size
@property (assign, nonatomic) CGSize tagExtraSpace;
@end
You can also configure scroll direction, alignment, lines limit, spacing and inset.
// 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;
Alignment types:
typedef NS_ENUM(NSInteger, TTGTagCollectionAlignment) {
TTGTagCollectionAlignmentLeft = 0, // Default
TTGTagCollectionAlignmentCenter, // Center
TTGTagCollectionAlignmentRight, // Right
TTGTagCollectionAlignmentFillByExpandingSpace, // Expand horizontal spacing and fill
TTGTagCollectionAlignmentFillByExpandingWidth // Expand width and fill
};
Config tags
Add tag.
// Add tag with detalt config
- (void)addTag:(NSString *)tag;
- (void)addTags:(NSArray <NSString *> *)tags;
// Add tag with custom config
- (void)addTag:(NSString *)tag withConfig:(TTGTextTagConfig *)config;
- (void)addTags:(NSArray <NSString *> *)tags withConfig:(TTGTextTagConfig *)config;
Insert tag.
// Insert tag with default config
- (void)insertTag:(NSString *)tag atIndex:(NSUInteger)index;
- (void)insertTags:(NSArray <NSString *> *)tags atIndex:(NSUInteger)index;
// Insert tag with custom config
- (void)insertTag:(NSString *)tag atIndex:(NSUInteger)index withConfig:(TTGTextTagConfig *)config;
- (void)insertTags:(NSArray <NSString *> *)tags atIndex:(NSUInteger)index withConfig:(TTGTextTagConfig *)config;
Remove tag.
// Remove tag
- (void)removeTag:(NSString *)tag;
- (void)removeTagAtIndex:(NSUInteger)index;
- (void)removeAllTags;
Config tag selection
- (void)setTagAtIndex:(NSUInteger)index selected:(BOOL)selected;
Update tag style config
// Update tag config
- (void)setTagAtIndex:(NSUInteger)index withConfig:(TTGTextTagConfig *)config;
- (void)setTagsInRange:(NSRange)range withConfig:(TTGTextTagConfig *)config;
Get tag information
// Get tag
- (NSString *)getTagAtIndex:(NSUInteger)index;
- (NSArray <NSString *> *)getTagsInRange:(NSRange)range;
// Get tag config
- (TTGTextTagConfig *)getConfigAtIndex:(NSUInteger)index;
- (NSArray <TTGTextTagConfig *> *)getConfigsInRange:(NSRange)range;
// Get all
- (NSArray <NSString *> *)allTags;
- (NSArray <NSString *> *)allSelectedTags;
- (NSArray <NSString *> *)allNotSelectedTags;
Reload
You can reload tags programmatically.
- (void)reload;
TTGTagCollectionView
Use TTGTagCollectionView
to show custom tag views.
DataSource and Delegate
Just like the UITableView, you must conform and implement the required methods of TTGTagCollectionViewDelegate
and TTGTagCollectionViewDataSource
to get TTGTagCollectionView
work.
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
- (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
Customization
// 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;
// Scroll indicator
@property (nonatomic, assign) BOOL showsHorizontalScrollIndicator;
@property (nonatomic, assign) BOOL showsVerticalScrollIndicator;
Reload
You can reload tags programmatically.
- (void)reload;
Fix
UITableViewAutomaticDimension
may not work when using tagView in tableViewCell. You should reload your tableView in the viewDidAppear
.
Author
zekunyan, [email protected]
License
TTGTagCollectionView is available under the MIT license. See the LICENSE file for more info.