LGLTagsView

Posted 2020-08-16 ljmaque

做项目的时候经常会用到标签，比如说现在很多项目中搜索历史用标签展示 和 选择某个产品的不同属性用标签展示...。网上的有很多封装好的标签，但是作为一个上进的程序员，都希望能有一个自己写的。其实也是一种积累知识的过程。现在的这个标签是根据你的标签的搜字母来排序的。先来看下效果：

 

下面的是代码说明和代码：

（1）包括两个部分：LGLTagsFrame(计算标签的frame)  LGLTagsView（标签的展示的view）

（2）使用注意：请先把标签数组输入LGLTagsFrame计算出标签的总高度 再来利用创建LGLTagsView。

LGLTagsFrame.h

展开

//  Created by 李国良 on 2016/10/15.
//  Copyright ? 2016年 李国良. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface LGLTagsFrame : NSObject

/*
 *  @params tagsArray 标签名称数组
 */
@property (nonatomic, strong) NSArray * tagsArray;

/*
 *  @params tagsTotalHeight 标签的总高度
 */
@property (nonatomic, assign) CGFloat tagsTotalHeight;

/*
 *  @params tagsFrames 每个标签的frame数组
 */
@property (nonatomic, strong) NSMutableArray *tagsFrames;

/*
 *  @params tagsMargin 标签左右之间的间隔 默认是10  （请在给tagsArray赋值之前设置）
 */
@property (nonatomic, assign) CGFloat tagsMargin;

/*
 *  @params tagdPadding 标签上下之间的间隔 默认是10 （请在给tagsArray赋值之前设置）
 */
@property (nonatomic, assign) CGFloat tagsLineMargin;

/*
 *  @params tagdPadding 标签内部的上下左右的间隔 （默认是10） （请在给tagsArray赋值之前设置）
 */
@property (nonatomic, assign) CGFloat tagdPadding;

@end

LGLTagsFrame.m

//  Created by 李国良 on 2016/10/15.
//  Copyright ? 2016年 李国良. All rights reserved.
//

#import "LGLTagsFrame.h"
#define WIDTH  ([UIScreen mainScreen].bounds.size.width)
#define HEIGHT  ([UIScreen mainScreen].bounds.size.height)

@interface LGLTagsFrame ()

@property (nonatomic, strong) UIButton * startButton;

@end

@implementation LGLTagsFrame

- (instancetype)init {
    self = [super init];
    if (self) {
        self.tagsFrames = [NSMutableArray array];
        self.tagsMargin = 10;
        self.tagsLineMargin = 10;
        self.tagdPadding = 10;
    }
    return self;
}

- (void)setTagsArray:(NSArray *)tagsArray {
    _tagsArray = tagsArray;
    // 去掉重复的title
    NSSet * set = [NSSet setWithArray:tagsArray];
    NSArray * titleArray = [set  allObjects];
    NSArray *sortDesc = @[[[NSSortDescriptor alloc] initWithKey:nil ascending:YES]];
    NSArray *sort1Array = [titleArray sortedArrayUsingDescriptors:sortDesc];
    CGFloat tagsWidth = 0;
    CGFloat tagY = 10;
    NSMutableArray * frameA = [NSMutableArray array];
    for (NSString * title in sort1Array) {                     //计算出每个标题的Size
        CGSize titleSize = [self sizeWithText:title font:[UIFont systemFontOfSize:14] maxW:0];
        [frameA addObject:NSStringFromCGSize(titleSize)];
    }
    for (NSInteger i = 0; i < frameA.count; i ++) {
        CGSize size = CGSizeFromString(frameA[i]);
        CGFloat width = size.width + self.tagdPadding;
        CGFloat height = size.height + self.tagdPadding;
        if ((WIDTH - tagsWidth - self.tagsMargin) < (width)) {
            tagY = tagY + height + self.tagsLineMargin;
            tagsWidth = 0;
        }
        UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(self.tagsMargin + tagsWidth, tagY, width, height);
        [btn setTitle:sort1Array[i] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
        btn.titleLabel.font = [UIFont systemFontOfSize:14];
        btn.layer.masksToBounds = YES;
        btn.layer.cornerRadius = 5;
        btn.layer.borderWidth = 1;
        btn.layer.borderColor = [UIColor blackColor].CGColor;
        [self.tagsFrames addObject:btn];
        tagsWidth = CGRectGetMaxX(btn.frame);
        if (i == frameA.count - 1) {
            self.tagsTotalHeight = CGRectGetMaxY(btn.frame) + self.tagsLineMargin;
        }
    }
}

//计算文字的大小 maxW限制最大宽度 maxW 传MAXFLOAT，没有限制最大的宽度
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxW:(CGFloat)maxW
{
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSFontAttributeName] = font;
    CGSize maxSize = CGSizeMake(maxW, MAXFLOAT);
    
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}

- (void)setTagsMargin:(CGFloat)tagsMargin {
    _tagsMargin = tagsMargin;
}

- (void)setTagsLineMargin:(CGFloat)tagsLineMargin {
    _tagsLineMargin = tagsLineMargin;
}

- (void)setTagdPadding:(CGFloat)tagdPadding {
    _tagdPadding = tagdPadding;
}

@end

展开

 

LGLTagsView.h

//  Created by 李国良 on 2016/10/17.
//  Copyright ? 2016年 李国良. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef void(^TagSelectBlock)(NSString * tagName);

@interface LGLTagsView : UIView

/**
 *  @params frame 高度请传 LGLTagsFrame的  tagsTotalHeight
 *  @params tagsFrame 请传 LGLTagsFrame 的 tagsFrames
 */
- (instancetype)initWithFrame:(CGRect)frame tagsFrame:(NSMutableArray *)tagsFrame selectTagBlock:(TagSelectBlock)block;

/*
 *  @params isSelected 是是否要有选中的效果 默认有选中的效果
 */
@property (nonatomic, assign) BOOL isSelected;

/*
 *  @params tagsSelectedColor 是修改选中tag的背景色颜色（默认 orange） 在没有选中效果的时候设置无效
 */
@property (nonatomic, strong) UIColor * tagsSelectedColor;

@end

展开

 

LGLTagsView.m

//  Created by 李国良 on 2016/10/17.
//  Copyright ? 2016年 李国良. All rights reserved.
//

#import "LGLTagsView.h"
@interface LGLTagsView ()

@property (nonatomic, strong) NSMutableArray * tagsFrame;
@property (nonatomic, strong) UIButton * startButton;
@property (nonatomic, copy) TagSelectBlock block;

@end

@implementation LGLTagsView

- (instancetype)initWithFrame:(CGRect)frame tagsFrame:(NSMutableArray *)tagsFrame selectTagBlock:(TagSelectBlock)block {
    self = [super initWithFrame:frame];
    if (self) {
        self.tagsFrame = tagsFrame;
        self.isSelected = YES;
        self.tagsSelectedColor = [UIColor orangeColor];
        self.block = block;
        [self createTagsView];
    }
    return self;
}

- (void)createTagsView {
    for (UIButton * tags in self.tagsFrame) {
        [tags addTarget:self action:@selector(tagsClink:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:tags];
    }
}

- (void)tagsClink:(UIButton *)button {
    if (self.isSelected) {
        if(button !=self.startButton){
            self.startButton.selected = NO;
            [self.startButton setBackgroundColor:[UIColor whiteColor]];
            self.startButton.layer.borderColor = [UIColor blackColor].CGColor;
            self.startButton = button;
        }
        self.startButton.selected=YES;
        if (self.startButton.selected) {
            [self.startButton setBackgroundColor:self.tagsSelectedColor];
            self.startButton.layer.borderColor = [UIColor whiteColor].CGColor;
        }
    }
    self.block(button.titleLabel.text);
}

- (void)setIsSelected:(BOOL)isSelected {
    _isSelected = isSelected;
}

- (void)setTagsSelectedColor:(UIColor *)tagsSelectedColor {
    _tagsSelectedColor = tagsSelectedColor;
}


- (NSMutableArray *)tagsFrame {
    if (!_tagsFrame ) {
        _tagsFrame = [NSMutableArray array];
    }
    return _tagsFrame;
}
@end

展开

文件到此结束

下面说明一下具体使用的方法：

 LGLTagsFrame * frame = [[LGLTagsFrame alloc] init];
    frame.tagsArray = [dataSource copy];
    LGLTagsView  * tagView = [[LGLTagsView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, frame.tagsTotalHeight) tagsFrame:frame.tagsFrames selectTagBlock:^(NSString *tagName) {
        // 在这里获得标签的点击回调的值
        }
    }];
[self.view addSubview:tagView];

有修改意见的欢迎来骚扰！