iOS开发-实现热门话题标签tag显示控件

iOS开发-实现热门话题标签tag显示控件

话题标签tag显示非常常见，如选择你的兴趣，选择关注的群，超话，话题等等。

一、效果图

二、实现代码

由于显示的是在列表中，这里整体控件是放在UITableViewCell中的。

2.1 标签tag按钮实现

自定义标签tag按钮INRmdTopicButton
INRmdTopicButton.h

@interface INRmdTopicButton : UIControl@property (nonatomic, strong) NSString *topicName;
@property (nonatomic, assign) CGFloat showTopicWidth;+ (CGFloat)topicWidth:(NSString *)name;@end

INRmdTopicButton.m

@interface INRmdTopicButton ()@property (nonatomic, strong) UIImageView *backImageView;       //图片控件
@property (nonatomic, strong) UIImageView *tbkImageView;       //图片控件
@property (nonatomic, strong) UILabel *titleLabel;@end@implementation INRmdTopicButton- (instancetype)initWithFrame:(CGRect)frame
{self = [super initWithFrame:frame];if (self) {[self addSubview:self.backImageView];[self.backImageView addSubview:self.tbkImageView];[self.backImageView addSubview:self.titleLabel];}return self;
}- (void)layoutSubviews {[super layoutSubviews];self.backImageView.frame = self.bounds;self.tbkImageView.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.backImageView.frame), CGRectGetHeight(self.backImageView.frame) - kSmallPadding);self.titleLabel.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.backImageView.frame), kTopicNameHeight);
}- (void)setTopicName:(NSString *)topicName {_topicName = (topicName?topicName:@"");self.titleLabel.text = _topicName;[self setNeedsLayout];
}+ (CGFloat)topicWidth:(NSString *)name {CGSize topicSize = [name sizeWithFont:[UIFont systemFontOfSize:12] forMaxSize:CGSizeMake(MAXFLOAT, kTopicHeight)];return topicSize.width + 2*kSmallPadding;
}#pragma mark - SETTER/GETTER
- (UIImageView *)backImageView {if (!_backImageView) {_backImageView = [[UIImageView alloc] initWithFrame:CGRectZero];_backImageView.userInteractionEnabled = YES;_backImageView.backgroundColor = [UIColor clearColor];}return _backImageView;
}- (UIImageView *)tbkImageView {if (!_tbkImageView) {_tbkImageView = [[UIImageView alloc] initWithFrame:CGRectZero];_tbkImageView.userInteractionEnabled = YES;_tbkImageView.backgroundColor = [UIColor clearColor];UIImage *image = [UIImage imageNamed:@"bk_topic_r"];image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width * 0.5) topCapHeight:floorf(image.size.height * 0.5)];_tbkImageView.image = image;}return _tbkImageView;
}- (UILabel *)titleLabel {if (!_titleLabel) {_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];_titleLabel.font = [UIFont systemFontOfSize:12];_titleLabel.textAlignment = NSTextAlignmentCenter;_titleLabel.textColor = [UIColor colorWithHexString:@"555555"];_titleLabel.backgroundColor = [UIColor clearColor];}return _titleLabel;
}@end

2.2 显示排列标签tag

显示标题tag时候，需要排列按钮

INRmdTopicButton *lastButton = nil;for (UIView *subView in self.topicBKImageView.subviews) {if ([subView isKindOfClass:[INRmdTopicButton class]]) {INRmdTopicButton *button = (INRmdTopicButton *)subView;button.hidden = NO;if (lastButton) {if (CGRectGetMaxX(lastButton.frame) + button.showTopicWidth + kSmallPadding > maxWidth) {button.frame = CGRectMake(0.0, CGRectGetMaxY(lastButton.frame), button.showTopicWidth, kTopicHeight);} else {button.frame = CGRectMake(CGRectGetMaxX(lastButton.frame) + kSmallPadding, CGRectGetMinY(lastButton.frame), button.showTopicWidth, kTopicHeight);}} else {button.frame = CGRectMake(originX, originY, button.showTopicWidth, kTopicHeight);}if (CGRectGetMaxY(button.frame) > maxHeight) {button.hidden = YES;} else {button.hidden = NO;}lastButton = button;}}

这里还加了拖动手势UIPanGestureRecognizer，当往左拖动的时候会显示松开换一换的功能。调用接口实现。

#pragma mark - panGestureHandle
- (void)panGestureHandle:(UIPanGestureRecognizer *)pan{if (pan.state == UIGestureRecognizerStateBegan) {NSLog(@"UIGestureRecognizerStateBegan");self.startPoint = [pan translationInView:self];} if (pan.state == UIGestureRecognizerStateChanged) {NSLog(@"UIGestureRecognizerStateChanged");CGPoint point = [pan translationInView:self];CGFloat xDistance = point.x - self.startPoint.x;// 左右滑动NSLog(@"左右滑动");if (xDistance > 0) {NSLog(@"向右滑动");CGRect backFrame = self.topicBKImageView.frame;backFrame.origin.x = kMidPadding;self.topicBKImageView.frame = backFrame;} else {NSLog(@"向左滑动");CGRect backFrame = self.topicBKImageView.frame;backFrame.origin.x = kMidPadding + xDistance*0.5;self.topicBKImageView.frame = backFrame;}} else {// if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled || pan.state == UIGestureRecognizerStateFailed)NSLog(@"UIGestureRecognizerStateEnded");CGRect backFrame = self.topicBKImageView.frame;backFrame.origin.x = kMidPadding;[UIView animateWithDuration:0.55 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:7.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{self.topicBKImageView.frame = backFrame;} completion:^(BOOL finished) {}];}
}-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {return YES;
}

2.3 完整代码如下

INRecommentTopicCell.h

#import <UIKit/UIKit.h>@interface INRmdTopicButton : UIControl@property (nonatomic, strong) NSString *topicName;
@property (nonatomic, assign) CGFloat showTopicWidth;+ (CGFloat)topicWidth:(NSString *)name;@end/**推荐的话题*/
@interface INRecommentTopicCell : UITableViewCell+ (CGFloat)cellHeight;@end

INRecommentTopicCell.m

#import "INRecommentTopicCell.h"
#import "UIColor+Addition.h"
#import "NSString+Size.h"static CGFloat kCellHeight = 260.0;static CGFloat kCellHorBGPadding = 10.0f;
static CGFloat kCellVerBGPadding = 5.0f;static CGFloat kTitleHeight = 44.0f;
static CGFloat kMidPadding = 10.0f;static CGFloat kSmallPadding = 5.0f;
static CGFloat kTopicHeight = 40.0f;
static CGFloat kTopicNameHeight = 30.0f;static CGFloat kExchangeBtnSize = 40.0f;
static CGFloat kTisWidth = 20.0f;@interface INRmdTopicButton ()@property (nonatomic, strong) UIImageView *backImageView;       //图片控件
@property (nonatomic, strong) UIImageView *tbkImageView;       //图片控件
@property (nonatomic, strong) UILabel *titleLabel;@end@implementation INRmdTopicButton- (instancetype)initWithFrame:(CGRect)frame
{self = [super initWithFrame:frame];if (self) {[self addSubview:self.backImageView];[self.backImageView addSubview:self.tbkImageView];[self.backImageView addSubview:self.titleLabel];}return self;
}- (void)layoutSubviews {[super layoutSubviews];self.backImageView.frame = self.bounds;self.tbkImageView.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.backImageView.frame), CGRectGetHeight(self.backImageView.frame) - kSmallPadding);self.titleLabel.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.backImageView.frame), kTopicNameHeight);
}- (void)setTopicName:(NSString *)topicName {_topicName = (topicName?topicName:@"");self.titleLabel.text = _topicName;[self setNeedsLayout];
}+ (CGFloat)topicWidth:(NSString *)name {CGSize topicSize = [name sizeWithFont:[UIFont systemFontOfSize:12] forMaxSize:CGSizeMake(MAXFLOAT, kTopicHeight)];return topicSize.width + 2*kSmallPadding;
}#pragma mark - SETTER/GETTER
- (UIImageView *)backImageView {if (!_backImageView) {_backImageView = [[UIImageView alloc] initWithFrame:CGRectZero];_backImageView.userInteractionEnabled = YES;_backImageView.backgroundColor = [UIColor clearColor];}return _backImageView;
}- (UIImageView *)tbkImageView {if (!_tbkImageView) {_tbkImageView = [[UIImageView alloc] initWithFrame:CGRectZero];_tbkImageView.userInteractionEnabled = YES;_tbkImageView.backgroundColor = [UIColor clearColor];UIImage *image = [UIImage imageNamed:@"bk_topic_r"];image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width * 0.5) topCapHeight:floorf(image.size.height * 0.5)];_tbkImageView.image = image;}return _tbkImageView;
}- (UILabel *)titleLabel {if (!_titleLabel) {_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];_titleLabel.font = [UIFont systemFontOfSize:12];_titleLabel.textAlignment = NSTextAlignmentCenter;_titleLabel.textColor = [UIColor colorWithHexString:@"555555"];_titleLabel.backgroundColor = [UIColor clearColor];}return _titleLabel;
}@end/**推荐的话题*/
@interface INRecommentTopicCell ()@property (nonatomic, strong) UIImageView *backImageView;       //图片控件
@property (nonatomic, strong) UIImageView *contentBGImageView;       //图片控件
@property (nonatomic, strong) UIImageView *topicBKImageView;       //图片控件
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIButton *exchangeButton;     // 更多@property (nonatomic, strong) UILabel *tipsLabel;@property (nonatomic) CGPoint startPoint;     // 开始点@end@implementation INRecommentTopicCell- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];if (self) {// Initialization codeself.backgroundColor = [UIColor clearColor];self.contentView.backgroundColor = [UIColor clearColor];[self.contentView addSubview:self.backImageView];[self.contentView addSubview:self.contentBGImageView];[self.contentBGImageView addSubview:self.titleLabel];[self.contentBGImageView addSubview:self.exchangeButton];[self.contentBGImageView addSubview:self.tipsLabel];[self.contentBGImageView addSubview:self.topicBKImageView];[self setupRmdTopicViews];UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGestureHandle:)];panGesture.minimumNumberOfTouches = 1;panGesture.maximumNumberOfTouches = 1;panGesture.delegate = self;[self.contentBGImageView addGestureRecognizer:panGesture];}return self;
}- (void)layoutSubviews {[super layoutSubviews];self.backImageView.frame = CGRectMake(kCellHorBGPadding, kCellVerBGPadding, CGRectGetWidth(self.bounds) - 2*kCellHorBGPadding, CGRectGetHeight(self.bounds) - 2*kCellVerBGPadding);self.contentBGImageView.frame = CGRectMake(kCellHorBGPadding, kCellVerBGPadding, CGRectGetWidth(self.bounds) - 2*kCellHorBGPadding, CGRectGetHeight(self.bounds) - 2*kCellVerBGPadding);self.titleLabel.frame = CGRectMake(kMidPadding, 0.0, CGRectGetWidth(self.backImageView.frame) - 3*kMidPadding - kExchangeBtnSize, kTitleHeight);self.exchangeButton.frame = CGRectMake(CGRectGetWidth(self.backImageView.frame) - kMidPadding - kExchangeBtnSize, (kTitleHeight - kExchangeBtnSize)/2, kExchangeBtnSize, kExchangeBtnSize);CGFloat height = CGRectGetHeight(self.backImageView.frame) - CGRectGetMaxY(self.titleLabel.frame);self.tipsLabel.frame = CGRectMake(CGRectGetWidth(self.backImageView.frame) - kMidPadding - kTisWidth, 0.0, kTisWidth, height);self.topicBKImageView.frame = CGRectMake(kMidPadding, CGRectGetMaxY(self.titleLabel.frame), CGRectGetWidth(self.backImageView.frame) - 2*kMidPadding, height);CGFloat maxWidth = CGRectGetWidth(self.topicBKImageView.frame);CGFloat maxHeight = CGRectGetHeight(self.topicBKImageView.frame);CGFloat originX = 0.0;CGFloat originY = 0.0;INRmdTopicButton *lastButton = nil;for (UIView *subView in self.topicBKImageView.subviews) {if ([subView isKindOfClass:[INRmdTopicButton class]]) {INRmdTopicButton *button = (INRmdTopicButton *)subView;button.hidden = NO;if (lastButton) {if (CGRectGetMaxX(lastButton.frame) + button.showTopicWidth + kSmallPadding > maxWidth) {button.frame = CGRectMake(0.0, CGRectGetMaxY(lastButton.frame), button.showTopicWidth, kTopicHeight);} else {button.frame = CGRectMake(CGRectGetMaxX(lastButton.frame) + kSmallPadding, CGRectGetMinY(lastButton.frame), button.showTopicWidth, kTopicHeight);}} else {button.frame = CGRectMake(originX, originY, button.showTopicWidth, kTopicHeight);}if (CGRectGetMaxY(button.frame) > maxHeight) {button.hidden = YES;} else {button.hidden = NO;}lastButton = button;}}
}- (void)setupRmdTopicViews {for (UIView *subView in self.topicBKImageView.subviews) {if ([subView isKindOfClass:[INRmdTopicButton class]]) {[subView removeFromSuperview];}}for (NSInteger index = 0; index < 15; index ++) {INRmdTopicButton *button = [[INRmdTopicButton alloc] initWithFrame:CGRectZero];button.tag = index;[self.topicBKImageView addSubview:button];if (index % 5 == 0) {button.topicName = @"#读书交流";} else if (index % 5 == 1) {button.topicName = @"#爱手工生活";} else if (index % 5 == 2) {button.topicName = @"#精致的佛系生活";} else if (index % 5 == 3) {button.topicName = @"#数码发烧友";} else if (index % 5 == 4) {button.topicName = @"#晒晒你的心情";} else {button.topicName = @"#说说身边事";}button.showTopicWidth = [INRmdTopicButton topicWidth:button.topicName];}[self setNeedsLayout];
}- (void)setSelected:(BOOL)selected animated:(BOOL)animated {[super setSelected:selected animated:animated];// Configure the view for the selected state
}+ (CGFloat)cellHeight {return kCellHeight;
}#pragma mark - Actions
- (void)exchangeButtonAction {}#pragma mark - SETTER/GETTER
- (UIImageView *)backImageView {if (!_backImageView) {_backImageView = [[UIImageView alloc] initWithFrame:CGRectZero];_backImageView.userInteractionEnabled = YES;_backImageView.backgroundColor = [UIColor whiteColor];_backImageView.layer.cornerRadius = 2.0;_backImageView.layer.shadowColor = [UIColor colorWithHexString:@"9bb9ef"].CGColor;_backImageView.layer.shadowOffset = CGSizeMake(0, 3);_backImageView.layer.shadowOpacity = 0.3;_backImageView.layer.shadowRadius = 3.0;}return _backImageView;
}- (UIImageView *)contentBGImageView {if (!_contentBGImageView) {_contentBGImageView = [[UIImageView alloc] initWithFrame:CGRectZero];_contentBGImageView.userInteractionEnabled = YES;_contentBGImageView.backgroundColor = [UIColor whiteColor];_contentBGImageView.layer.cornerRadius = 2.0;_contentBGImageView.layer.masksToBounds = YES;_contentBGImageView.clipsToBounds = YES;}return _contentBGImageView;
}- (UIImageView *)topicBKImageView {if (!_topicBKImageView) {_topicBKImageView = [[UIImageView alloc] initWithFrame:CGRectZero];_topicBKImageView.userInteractionEnabled = YES;_topicBKImageView.backgroundColor = [UIColor whiteColor];_topicBKImageView.clipsToBounds = YES;}return _topicBKImageView;
}- (UILabel *)titleLabel {if (!_titleLabel) {_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];_titleLabel.font = [UIFont systemFontOfSize:18];_titleLabel.textColor = [UIColor colorWithHexString:@"131619"];_titleLabel.backgroundColor = [UIColor clearColor];_titleLabel.text = @"热门话题";}return _titleLabel;
}- (UILabel *)tipsLabel {if (!_tipsLabel) {_tipsLabel = [[UILabel alloc] initWithFrame:CGRectZero];_tipsLabel.font = [UIFont systemFontOfSize:12];_tipsLabel.textColor = [UIColor colorWithHexString:@"9a9b9c"];_tipsLabel.backgroundColor = [UIColor clearColor];_tipsLabel.numberOfLines = 0;_tipsLabel.textAlignment = NSTextAlignmentCenter;_tipsLabel.text = @"松\n开\n换\n一\n换";}return _tipsLabel;
}- (UIButton *)exchangeButton {if (!_exchangeButton) {_exchangeButton = [UIButton buttonWithType:UIButtonTypeCustom];[_exchangeButton setImage:[UIImage imageNamed:@"ic_topic_exchange"] forState:UIControlStateNormal];[_exchangeButton addTarget:self action:@selector(exchangeButtonAction) forControlEvents:UIControlEventTouchUpInside];}return _exchangeButton;
}#pragma mark - panGestureHandle
- (void)panGestureHandle:(UIPanGestureRecognizer *)pan{if (pan.state == UIGestureRecognizerStateBegan) {NSLog(@"UIGestureRecognizerStateBegan");self.startPoint = [pan translationInView:self];} if (pan.state == UIGestureRecognizerStateChanged) {NSLog(@"UIGestureRecognizerStateChanged");CGPoint point = [pan translationInView:self];CGFloat xDistance = point.x - self.startPoint.x;// 左右滑动NSLog(@"左右滑动");if (xDistance > 0) {NSLog(@"向右滑动");CGRect backFrame = self.topicBKImageView.frame;backFrame.origin.x = kMidPadding;self.topicBKImageView.frame = backFrame;} else {NSLog(@"向左滑动");CGRect backFrame = self.topicBKImageView.frame;backFrame.origin.x = kMidPadding + xDistance*0.5;self.topicBKImageView.frame = backFrame;}} else {// if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled || pan.state == UIGestureRecognizerStateFailed)NSLog(@"UIGestureRecognizerStateEnded");CGRect backFrame = self.topicBKImageView.frame;backFrame.origin.x = kMidPadding;[UIView animateWithDuration:0.55 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:7.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{self.topicBKImageView.frame = backFrame;} completion:^(BOOL finished) {}];}
}-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {return YES;
}@end

三、小结

iOS开发-实现热门话题标签tag显示控件
话题标签tag显示非常常见，如选择你的兴趣，选择关注的群，超话，话题等等。

学习记录，每天不停进步。