美文网首页
自定义标签库-FHHTagView

自定义标签库-FHHTagView

作者: 002and001 | 来源:发表于2018-10-11 16:37 被阅读30次

FHHTagView

Github

Tip:

  • 提供高度计算Api
  • 自定义标签样式
  • 可设置标签控件是否支持单选、多选、不可选三种方式
  • 标签点击选择后可执行block回调
  • 支持标签的add、insert、remove操作
  • 支持异步计算UI布局和UI控件高度

Introduction

  • 初始化一个NSMuatbleArray<FHHTag *> *类型的数组tagArray :
NSMuatbleArray<FHHTag *> *tagArray = [[NSMuatbleArray<FHHTag *> alloc] init];
FHHTag *tag = [[FHHTag alloc] initWithTitle:@"Big Hero 6"];
[tagArray addObject:tag];
  • 初始化一个FHHTagViewLayout类型的layout:
FHHTagViewLayout *layout = [[FHHTagViewLayout alloc] init];
layout.width = 300;
layout.lineSpacing = 5.0;
layout.innerItemSpacing = 4.0;
  • 初始化一个FHHTagViewLayout 类型的tagView,tagView调用 refreshWithTagArray: 即可
FHHTagView *tagView = [[FHHTagView alloc] init];
[tagView refreshWithTagArray:tagArray layout:layout];

Demo:


FHHtagViewGif.gif

Demo part code

- (void)p_configTagView {
    NSArray *titleArray = @[@"Tatchi", @"DRAGON BALL", @"火影忍者", @"我家有个狐仙大人", @"进击的巨人", @"东京食尸鬼", @"ONE PUNCH-MAN", @"我叫坂本我最屌", @"四月是你的谎言", @"Angle beats", @"Charlotte", @"Fate", @"境界的彼方", @"头脑特工队", @"从前有座灵剑山",@"一人之下", @"妖狐小红娘"];
    NSMutableArray *tagArrayM = [NSMutableArray arrayWithCapacity:titleArray.count];
    for (NSString *title in titleArray) {
        FHHTag *tag = [self p_tagWithTitle:title];
        if ([title isEqualToString:@"头脑特工队"]) {
            tag.normalStateButtonBlock = ^(FHHTagButton *button) {
                button.layer.borderColor = [[UIColor purpleColor] CGColor];
                [button setTitleColor:[UIColor purpleColor] forState:UIControlStateNormal];
            };
        }
        [tagArrayM addObject:tag];
    }
    FHHTagViewLayout *layout = [[FHHTagViewLayout alloc] init];
    _tagViewLayout = layout;
    FHHTagView *tagView = [[FHHTagView alloc] init];
    tagView.selectionStyle = FHHTagViewSelectionStyleSingle;
//    tagView.selectionStyle = FHHTagViewSelectionStyleMutiple;
//    tagView.selectionStyle = FHHTagViewSelectionStyleNone;
    
    layout.width = 300;
    layout.lineSpacing = 10.0;
    layout.innerItemSpacing = 10.0;
    //    tagView.padding = UIEdgeInsetsMake(10, 5, 20, 0);
    tagView.fhh_x = 10;
    tagView.fhh_y = 50;
    [tagView refreshWithTagArray:tagArrayM layout:layout];
    [self.view addSubview:tagView];
- (FHHTag *)p_tagWithTitle:(NSString *)title {
    FHHTag *tag = [[FHHTag alloc] initWithTitle:title];
    tag.normalStateButtonBlock = ^(FHHTagButton *button) {
        button.layer.borderColor = [[UIColor blackColor] CGColor];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    };
    __weak typeof(tag) weakTag = tag;
    tag.selectedStateButtonBlcok = ^(FHHTagButton *button) {
        button.layer.borderColor = [[UIColor orangeColor] CGColor];
        [button setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
        NSLog(@"tag.title:%@",weakTag.title);
    };
    tag.enable = true;
    tag.cornerRadius = 3;
    tag.borderWidth = 1.0;
    tag.fontSize = 12;
    tag.padding = UIEdgeInsetsMake(5, 5, 5, 5);
//    tag.buttonHeight = 25.0;  // will disable tag.padding
    return tag;
}

异步计算UI布局

// 返回各个按钮标签的CGRect(NSString表示,可以再子线程调用)
+ (NSArray <NSString *> *)tagRectArrayWithTagArray:(nonnull NSArray *)tagArray layout:(nonnull FHHTagViewLayout *)layout;

// 使用上面得到的返回值和layout进行刷新(需要在主线程刷新)
- (void)refreshWithTagArray:(nonnull NSArray *)tagArray tagRectStrArray:(nonnull NSArray<NSString *> *)tagRectStrArray layout:(nonnull FHHTagViewLayout *)layout;

// 根据标签数组和layout计算高度(可以再子线程调用)
+ (CGFloat)heightForTagViewWithTagArray:(nonnull NSArray *)tagArray layout:(nonnull FHHTagViewLayout *)layout;

示例Demo请参考Github

相关文章

  • 自定义标签库-FHHTagView

    FHHTagView Github Tip: 提供高度计算Api 自定义标签样式 可设置标签控件是否支持单选、多选...

  • 29.JSTL

    为了完全在JSP中消除Java代码,学习JAVA的标签库: Java标签库: 1:自定义标签库. 2:标准标签库(...

  • JavaWeb之Tag File

    Tag File: 用于简化自定义标签,使用Tag File可以无须定义标签处理类和标签库文件 自定义标签的使用与...

  • 17.4JSTL标签库之核心标签

    一、JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的。使用JSLT...

  • JavaWeb基础恢复之标签、EL表达式、国际化

    1.JSTL标签库 1.1 核心标签 使用 表达式控制标签 流程控制标签 URL操作标签 2.自定义标签 2.1....

  • 1 功能概述

    Polymer库提供了一套功能来创建自定义标签。这些功能设计能够简单、迅速地让自定义标签象标准DOM标签一样使用。...

  • 2022-03-26 Web基础知识(15)- JSP (七)

    JSP 标准标签库(JSTL)、JSP 自定义标签 查看内容请点击下面的链接: https://www.cnblo...

  • EL表达式与JSP标签(学习笔记)

      本文内容主要介绍EL表达式、JSP标准标签库(JSTL)、JSP自定义标签库。其中拿EL表达式和JSP技术做对...

  • git基本操作

    创建版本库 版本信息 远程仓库 分支管理 标签管理 自定义git

  • Django 进阶教程笔记(一)

    自定义标签 自定义过滤器 Jinja2 自定义 manager (封装查询语句) 自定义Form 集成已有数据库表...

网友评论

      本文标题:自定义标签库-FHHTagView

      本文链接:https://www.haomeiwen.com/subject/zfueoftx.html