kency / ttgtagcollectionview

TTGTagCollectionView is useful for showing different size tag views in a vertical or horizontal scrollable view and support Autolayout intrinsicContentSize at the same time. 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.

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
• Vertical and horizontal scrollable
• Power by UICollectionView
• Support Autolayout intrinsicContentSize to auto determine height based on content size

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
- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView didTapTag:(NSString *)tagText atIndex:(NSUInteger)index selected:(BOOL)selected;

- (void)textTagCollectionView:(TTGTextTagCollectionView *)textTagCollectionView updateContentSize:(CGSize)contentSize;
@end

Customization

// Define if the tag can be selected.
@property (assign, nonatomic) BOOL enableTagSelection;

// 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; // Default is tagCornerRadius

// Border
@property (assign, nonatomic) CGFloat tagBorderWidth;
@property (assign, nonatomic) CGFloat tagSelectedBorderWidth; // Default is tagBorderWidth
@property (strong, nonatomic) UIColor *tagBorderColor;
@property (strong, nonatomic) UIColor *tagSelectedBorderColor; // Default is tagBorderColor

// Extra space for width and height
@property (assign, nonatomic) CGSize extraSpace;

// Horizontal and veritical space between tags
@property (assign, nonatomic) CGFloat horizontalSpacing;
@property (assign, nonatomic) CGFloat verticalSpacing;

// Content size
@property (nonatomic, assign, readonly) CGSize contentSize;

// Scroll direction. Default is vertical
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;

// Number of lines for horizontal direction
@property (nonatomic, assign) NSUInteger numberOfLinesForHorizontalScrollDirection;

Config tags

// Add tags
- (void)addTag:(NSString *)tag;

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

/// Remove tags
- (void)removeTag:(NSString *)tag;

- (void)removeTagAtIndex:(NSUInteger)index;

- (void)removeAllTags;

Config tag selection

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

Get tag information

- (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
- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView didSelectTag:(UIView *)tagView atIndex:(NSUInteger)index;

- (void)tagCollectionView:(TTGTagCollectionView *)tagCollectionView updateContentSize:(CGSize)contentSize;
@end

Customization

You can config the horizontal and vertical space between tags.

/**
 * Tags scroll direction, default is veritical
 */
@property (nonatomic, assign) TTGTagCollectionScrollDirection scrollDirection;

/**
 * Number of lines for horizontal scroll direction
 */
@property (nonatomic, assign) NSUInteger numberOfLinesForHorizontalScrollDirection;

/**
 * Horizontal space between tags
 */
@property (nonatomic, assign) CGFloat horizontalSpacing;

/**
 * Vertical space between tags
 */
@property (nonatomic, assign) CGFloat verticalSpacing;

/**
 * The true tags content size
 */
@property (nonatomic, assign, readonly) CGSize contentSize;

Reload

You can reload tags programmatically.

- (void)reload;

Example

For more information, you can download the zip and run the example.

Author

zekunyan, [email protected]

License

TTGTagCollectionView is available under the MIT license. See the LICENSE file for more info.