美文网首页 ios零碎记录工欲善其事必先利其器iOS菜鸟到大神
简单易用的标签列表界面(宝宝用了都不哭了 )

简单易用的标签列表界面(宝宝用了都不哭了 )

作者: 袁峥 | 来源:发表于2016-08-16 15:44 被阅读12462次

前言

很多应用都有标签列表界面,这次封装了一个,标签列表界面(YZTagListView),用法比较简单。如果喜欢我的文章,可以关注我微博:袁峥Seemygo

Demo效果1:

效果1.gif

Demo效果2:

效果2.gif

Demo效果3:

效果3.gif

Demo演示:

  • 1.使用cocoapods引入YZTagListView,或者直接拖入YZTagListView文件夹到项目中
  • 2.导入YZTagListView.h头文件
#import "YZTagList.h"
  • 3.创建YZTagListView控件
    YZTagList *tagList = [[YZTagList alloc] init];
    tagList.backgroundColor = [UIColor brownColor];
    _tagList = tagList;
  • 4.设置YZTagListView属性(可选)
    // 高度可以设置为0,会自动跟随标题计算
    tagList.frame = CGRectMake(0, 64, self.view.bounds.size.width, 0);
    // 设置标签背景色
    tagList.tagBackgroundColor = [UIColor colorWithRed:20 / 255.0 green:160 / 255.0 blue:250 / 255.0 alpha:1];
    // 设置标签颜色
    tagList.tagColor = [UIColor whiteColor];
    // 设置标签删除图片
    tagList.tagDeleteimage = [UIImage imageNamed:@"chose_tag_close_icon"];
  • 5.添加标签
/**
 *  添加标签
 *
 *  @param tagStr 标签文字
 */
- (void)addTag:(NSString *)tagStr;

  • 6.添加多个标签
/**
 *  添加多个标签
 *
 *  @param tagStrs 标签数组,数组存放(NSString *)
 */
- (void)addTags:(NSArray *)tagStrs;
  • 7.删除标签
/**
 *  删除标签
 *
 *  @param tagStr 标签文字
 */
- (void)deleteTag:(NSString *)tagStr;
  • 8.监听标签点击
/**
 *  点击标签,执行Block
 */
@property (nonatomic, strong) void(^clickTagBlock)(NSString *tag);

列如:点击标签,删除标签
  // 点击标签,就会调用
    __weak typeof(_tagList) weakTagList = _tagList;
    _tagList.clickTagBlock = ^(NSString *tag){
        [weakTagList deleteTag:tag];
    };
  • 9.排序功能
属性:
/**
 *  是否需要排序功能
 */
@property (nonatomic, assign) BOOL isSort;
/**
 *  在排序的时候,放大标签的比例,必须大于1
 */
@property (nonatomic, assign) CGFloat scaleTagInSort;
实例:
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    NSArray *tags = @[@"小码哥",@"小码哥1",@"小码哥2",@"小码哥3",@"iOS学院",@"iOS学院1",@"iOS学院2",@"iOS学院3",@"吖了个峥",@"吖了个峥1",@"吖了个峥2",@"吖了个峥3"];
    
    // 创建标签列表
    YZTagList *tagList = [[YZTagList alloc] init];
    // 高度可以设置为0,会自动跟随标题计算
    tagList.frame = CGRectMake(0, 64, self.view.bounds.size.width, self.view.bounds.size.height - 64);
    // 设置排序时,缩放比例
    tagList.scaleTagInSort = 1.3;
    // 需要排序
    tagList.isSort = YES;
    // 标签尺寸
    tagList.tagSize = CGSizeMake(80, 30);
    // 不需要自适应标签列表高度
    tagList.isFitTagListH = NO;
    [self.view addSubview:tagList];
    
    // 设置标签背景色
    tagList.tagBackgroundColor = [UIColor colorWithRed:20 / 255.0 green:160 / 255.0 blue:250 / 255.0 alpha:1];
    // 设置标签颜色
    tagList.tagColor = [UIColor whiteColor];
    
    
    /**
     *  这里一定先设置标签列表属性,然后最后去添加标签
     */
    [tagList addTags:tags];
}

更多用法,请参考Demo

源码

点击这下载源代码

相关文章

网友评论

  • Asingers:如何首位添加,而不是末尾添加
  • 酒红色T恤:峥哥,初始化tagList 后,一次addTags 数组内容有多个时候(我测得是13个左右),删除标签成功的机会很小
    酒红色T恤:@小菜鸟爱足球 对,我最后发现了
    小菜鸟爱足球:可能是你数组内容有重复的,我也遇到过,有重复内容就会删除失败
  • 2e919d99a871:老师,有 Swift 版本的吗?
  • 1剑天下:CollectionView的高度可以计算么
  • 大爷的二舅:峥哥 请问这个标签在tableviewcell中,如何进行复用创建,动态获取高度
  • VidarChoi:请问使用storyboard布局的导致调用实例对象crash怎么处理啊
  • 走近科学探索发现:这代码写的真漂亮!太NB啦!
  • 不会算卦的杨大仙:支持自动布局吗?
  • 伯牙呀:删除所有标签:
    ```
    for (NSString *string in self.tagListView.tagArray) {
    [self.tagListView deleteTag:string];
    }
    ```
    这样直接会崩溃
  • again_onceagain:老师 怎么让第一个 不可以 移动 类似 今日头条功能
  • 04a0fd07885c:支持 Masonry 布局吗?规则应该怎么写
  • 土豆卡:直接拖进去就报错,cocopods还是没更新的:sob:
  • C罗_e4bc:标签选择功能:点击第0组已经选中的标签时,不在屏幕范围内的cell 刷新是有问题的,把cell作为selectTagDict的value应该是有问题的吧 ,这些cell是复用的,你获取的时候更新应该是有问题的,我的解决办法是 保存的indexPath值,把数据源更新,点击时,直接刷新对应的indexPath ,不知道有没有更好的办法
  • 燃烬七月:cocoapods上的应该是没有更新……
    燃烬七月:另外,水平和垂直的margin最好能分开设置……
  • beyourking:腻害:smile:
  • 梁景华Joshua_:你好,想问下,怎么在选中栏添加一个输入框,可以自己输入标签,能与下面的选中标签共存呢?就是输入框输入后,自动生成一个选中标签,输入框后移。 :disappointed_relieved:
  • 喵鸢:很好的东西啊!!学习中!
    最近看App还有一种排序效果,在下面点击选择后,下面的方块消失,只出现在上面;
    若要删除已选功能点击上方,下面的方块会还原 :flushed:
  • 50ffea394677:为什么这么棒啊
  • 红星闪闪小地瓜:厉害了.我的哥
  • zedxpp:这个东西真nice, 确实很实用.
  • 邋了个遢:厉害了我的峥
  • 杨可爱灬:排序功能有小问题啊~。~峥哥~~~~~~
    袁峥:@小熊猫丶 什么问题 最好发个能调试的Demo给我
  • 生煎:峥哥,能加入标签排序的功能么,类似网易新闻的频道选择,标签的宽度自适应,最近在做这方面的功能:stuck_out_tongue_winking_eye:
    袁峥:@生煎 已经添加好排序功能
    生煎:@峥吖 峥哥求尽快啊, 22号功能要做完额
    袁峥:@生煎 好滴 有时间加上
  • 再见远洋:你好,下载了你最新修复的代码,但是发现其实没有修复我说的这个问题,可能是我没有描述清楚,我自己修复了,其实就是加了一句代码 设置tableView的cell选中样式为UITableViewCellSelectionStyleNone,不然你选中第一组的tableView的cell时 会出现灰色,代码是这样的
    if (indexPath.section == 0) {
    YZHobbyCell *cell = [tableView dequeueReusableCellWithIdentifier:hobbyCell];
    cell.tagList = self.tagList;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
    }
    袁峥:@再见远洋 昨天貌似没有上传成功 恩 你这样解决也可以
  • 再见远洋:测试了一下选择标签的demo,如果你点击整个兴趣课程这一组内容 你会发现整个兴趣课程也就是第一组变成了灰色,而且再点击其他的标签想要增加到第一组时 会出现第一组完全看不到的情况,这应该是一个bug吧 还有希望能够增加长按交换位置,这样就完美了
    袁峥:@再见远洋 排序功能添加好了
    再见远洋:嗯嗯,你的文章都看了,都是干货…赞一个
    袁峥:@再见远洋 已经修复 谢谢提供bug 交换 我有时间实现下
  • 在没老之前:为什么峥哥你不早发:sob::sob::sob:

本文标题:简单易用的标签列表界面(宝宝用了都不哭了 )

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