美文网首页iOS技能iOS devUICollectionView
开源一个基于UICollectionView的标签展示控件

开源一个基于UICollectionView的标签展示控件

作者: lexiaoyao20 | 来源:发表于2016-05-29 17:03 被阅读1164次

    首先,先上效果图。
    示例一,仿天猫热门搜索标签的效果:

    热门搜索.gif

    示例二,动态添加和删除标签

    动态添加和删除.gif

    源码连接:Github

    1. 特性

    • 支持AutoLayout
    • 支持自定义Tag的外观,如圆角,背景颜色,标签文字颜色...
    • 支持动态添加和删除Tag
    • 支持单选和多选模式

    2. 示例代码

    首先,添加 FMTagsView.h 和 FMTagsView.m 这两个文件到你项目中,或者使用pod来安装。

    pod 'FMTagsView'
    

    控件初始化示例:

    FMTagsView *tagsView = [[FMTagsView alloc] initWithFrame:CGRectMake(10, 120, 300, 150)];
        tagsView.contentInsets = UIEdgeInsetsZero;
        tagsView.tagInsets = UIEdgeInsetsMake(5, 15, 5, 15);
        tagsView.tagBorderWidth = 1;
        tagsView.tagcornerRadius = 2;
        tagsView.tagBorderColor = [UIColor lightGrayColor];
        tagsView.tagSelectedBorderColor = [UIColor lightGrayColor];
        tagsView.tagBackgroundColor = [UIColor whiteColor];
        tagsView.lineSpacing = 10;
        tagsView.interitemSpacing = 10;
        tagsView.tagFont = [UIFont systemFontOfSize:14];
        tagsView.tagTextColor = [UIColor grayColor];
        tagsView.delegate = self;
        [self.view addSubview:tagsView];
        
        NSArray *dataArray = @[@"麻棉连衣裙", @"面条", @"亲子装",
                           @"卫生巾", @"米", @"眉笔", @"蛋糕",
                           @"面包", @"洗洁精", @"咖啡速溶",
                           @"云南白药牙膏", @"方便面", @"空调"];
        //设置数据源
        tagsView.tagsArray = dataArray;
    

    实现代理方法:

    //点击标签处理逻辑
    - (void)tagsView:(FMTagsView *)tagsView didSelectTagAtIndex:(NSUInteger)index {
        NSString *selectedKey = self.dataArray[index];
        UIViewController *controller = [[UIViewController alloc] init];
        controller.view.backgroundColor = [UIColor whiteColor];
        controller.title = selectedKey;
        [self.navigationController pushViewController:controller animated:YES];
    }
    

    相关文章

      网友评论

      • 春暖花已开:实现类似的功能,我竟然都是用button写的😄
        lexiaoyao20:@繁华乱世沧桑了谁的容颜 可以不用给高度啊,你看我第三个例子ScollView Demo里面,高度都是Auto Layout自动算出来的
        繁华乱世沧桑了谁的容颜:只能用预估高度吗? 标签不确定 高度不确定 我怎么给高度?
        lexiaoyao20:@人民重重 :joy:

      本文标题: 开源一个基于UICollectionView的标签展示控件

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