UILabel 创建标签一般用于搜索界面的热门搜索标签快速搜索，个人信息中个人标签的展示。在有多个地方需要使用标签的时候可以使用库PYSearch PYSearch 提供了多种标签展示方式。
热门搜索标签
但有时项目中只有少数界面需要用到标签，不想集成整个库。并且库中标签Label的创建对外暴露的属性可能不能满足我们项目需要 ，所以我们需要找出库中关键代码来即可。
通过查看源码后发现实现标签显示几个重要的步骤是
- 创建标签，设置标签自定义样式。
- 添加标签Label 到父视图调整Frame
- 添加手势事件到标签
下面我们来看具体代码:
1. 创建UILabel
py_height 等属性为 库中为View 增加的Category 方便更改view 的frame 具体代码可查看文章最后
- (UILabel *)labelWithTitle:(NSString *)title
{
UILabel *label = [[UILabel alloc] init];
label.userInteractionEnabled = YES;
label.font = [UIFont fontWithName:@"PingFangSC-Regular" size:14];
label.text = title;
label.textColor = [UIColor blackColor];
label.backgroundColor = [UIColor orangeColor];
label.layer.cornerRadius = 16;
label.clipsToBounds = YES;
label.textAlignment = NSTextAlignmentCenter;
[label sizeToFit];
label.py_width += 24;
// label.py_height += 14; //
label.py_height = 32; // 可根据项目需求设置为固定高度 或者动态改变高度
return label;
}
2. 添加Label 到标签容器视图中 并设置 lable frame
- (void)addAndLayoutTagsWithTagsContentView:(UIView *)contentView tagTexts:(NSArray<NSString *> *)tagTexts {
[contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
NSMutableArray *tagsM = [NSMutableArray array];
for (int i = 0; i < tagTexts.count; i++) {
UILabel *label = [self labelWithTitle:tagTexts[i]];
[label addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tagDidCLick:)]];
[contentView addSubview:label];
[tagsM addObject:label];
}
CGFloat currentX = 0;
CGFloat currentY = 0;
CGFloat countRow = 0;
CGFloat countCol = 0;
for (int i = 0; i < contentView.subviews.count; i++) {
UILabel *subView = contentView.subviews[i];
// When the number of search words is too large, the width is width of the contentView
if (subView.py_width > contentView.py_width) subView.py_width = contentView.py_width;
if (currentX + subView.py_width + PYSEARCH_MARGIN * countRow > contentView.py_width) {
subView.py_x = 0;
subView.py_y = (currentY += subView.py_height) + PYSEARCH_MARGIN * ++countCol;
currentX = subView.py_width;
countRow = 1;
} else {
subView.py_x = (currentX += subView.py_width) - subView.py_width + PYSEARCH_MARGIN * countRow;
subView.py_y = currentY + PYSEARCH_MARGIN * countCol;
countRow ++;
}
}
// 修改容器视图高度约束
_tagContainerHeightConstraint.constant = CGRectGetMaxY(contentView.subviews.lastObject.frame);
[self.view layoutIfNeeded];
}
3. 处理手势事件
- (void)tagDidCLick:(UITapGestureRecognizer *)gr {
UILabel *label = (UILabel *)gr.view;
NSLog(@"%@", label.text);
// 处理点击事件
}
4 项目中其他IBOutlet 以及数据源设置
#import "TagsLabelViewController.h"
#import "UIView+PYExtension.h"
#define PYSEARCH_MARGIN 12 // Label 间距
@interface TagsLabelViewController ()
@property (weak, nonatomic) IBOutlet UIView *tagsContainerView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *tagContainerHeightConstraint;
@end
@implementation TagsLabelViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSArray<NSString *> *tagArray = @[@"Java", @"Python", @"Objective-C", @"Swift", @"C", @"C++", @"PHP", @"C#", @"Perl", @"Go", @"JavaScript", @"R", @"Ruby", @"MATLAB",];
[self addAndLayoutTagsWithTagsContentView:_tagsContainerView tagTexts:tagArray];
}
StoryBoard 中视图设置与运行效果:
运行效果
StoryBoard 中视图设置
PYSearch 库为了方便设置view 的 frame 建立了一个 category 来 快捷设置视图的Frame 属性
UIView+PYExtension.h
// 代码地址: https://github.com/iphone5solo/PYPhotosView
// 代码地址: http://code4app.com/thread-8612-1-1.html
// Created by CoderKo1o.
// Copyright © 2016年 iphone5solo. All rights reserved.
// UIView的分类
#import <UIKit/UIKit.h>
@interface UIView (PYExtension)
@property (nonatomic, assign) CGFloat py_x;
@property (nonatomic, assign) CGFloat py_y;
@property (nonatomic, assign) CGFloat py_centerX;
@property (nonatomic, assign) CGFloat py_centerY;
@property (nonatomic, assign) CGFloat py_width;
@property (nonatomic, assign) CGFloat py_height;
@property (nonatomic, assign) CGSize py_size;
@property (nonatomic, assign) CGPoint py_origin;
@end
UIView+PYExtension.m
// 代码地址: https://github.com/iphone5solo/PYPhotosView
// 代码地址: http://code4app.com/thread-8612-1-1.html
// Created by CoderKo1o.
// Copyright © 2016年 iphone5solo. All rights reserved.
//
#import "UIView+PYExtension.h"
@implementation UIView (PYExtension)
- (void)setPy_x:(CGFloat)py_x
{
CGRect frame = self.frame;
frame.origin.x = py_x;
self.frame = frame;
}
- (CGFloat)py_x
{
return self.py_origin.x;
}
- (void)setPy_centerX:(CGFloat)py_centerX
{
CGPoint center = self.center;
center.x = py_centerX;
self.center = center;
}
- (CGFloat)py_centerX
{
return self.center.x;
}
-(void)setPy_centerY:(CGFloat)py_centerY
{
CGPoint center = self.center;
center.y = py_centerY;
self.center = center;
}
- (CGFloat)py_centerY
{
return self.center.y;
}
- (void)setPy_y:(CGFloat)py_y
{
CGRect frame = self.frame;
frame.origin.y = py_y;
self.frame = frame;
}
- (CGFloat)py_y
{
return self.frame.origin.y;
}
- (void)setPy_size:(CGSize)py_size
{
CGRect frame = self.frame;
frame.size = py_size;
self.frame = frame;
}
- (CGSize)py_size
{
return self.frame.size;
}
- (void)setPy_height:(CGFloat)py_height
{
CGRect frame = self.frame;
frame.size.height = py_height;
self.frame = frame;
}
- (CGFloat)py_height
{
return self.frame.size.height;
}
- (void)setPy_width:(CGFloat)py_width
{
CGRect frame = self.frame;
frame.size.width = py_width;
self.frame = frame;
}
- (CGFloat)py_width
{
return self.frame.size.width;
}
- (void)setPy_origin:(CGPoint)py_origin
{
CGRect frame = self.frame;
frame.origin = py_origin;
self.frame = frame;
}
- (CGPoint)py_origin
{
return self.frame.origin;
}
@end
