iOS UILabel 创建标签

UILabel 创建标签一般用于搜索界面的热门搜索标签快速搜索，个人信息中个人标签的展示。在有多个地方需要使用标签的时候可以使用库PYSearch PYSearch 提供了多种标签展示方式。

热门搜索标签

但有时项目中只有少数界面需要用到标签，不想集成整个库。并且库中标签Label的创建对外暴露的属性可能不能满足我们项目需要 ，所以我们需要找出库中关键代码来即可。

通过查看源码后发现实现标签显示几个重要的步骤是

1. 创建标签，设置标签自定义样式。
2. 添加标签Label 到父视图调整Frame
3. 添加手势事件到标签

下面我们来看具体代码:

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

参考项目: https://github.com/ko1o/PYSearch