iOS学习之SKTagView的使用

Posted 2020-08-19

SKTagView是一款支持自动布局的标签tag.
特性：
-流式展示标签
-可以配置标签的颜色、事件、间隔、外边距等
-支持Auto layout
-可以在UITableViewCell中良好展示
-支持横竖屏切换
-不使用UICollectionView.

// 配置

- (void)configTagView

{

    self.label = [[UILabel alloc] initWithFrame:CGRectMake(10, 90, 100, 30)];

    self.label.textColor = [UIColor blackColor];

    self.label.font = [UIFont systemFontOfSize:13];

    self.label.text = @"历史搜索";

    [self.view addSubview:self.label];

     

    // 先移除掉所有

    [self.tagView removeAllTags];

    // 初始化

    self.tagView = [[SKTagView alloc] init];

    // 整个tagView对应其SuperView的上左下右距离

    self.tagView.padding = UIEdgeInsetsMake(10, 10, 10, 10);

    // 上下行之间的距离

    self.tagView.lineSpacing = 10;

    // item之间的距离

    self.tagView.interitemSpacing = 20;

    // 最大宽度

    self.tagView.preferredMaxLayoutWidth = 375;

//    @property (assign, nonatomic) CGFloat regularWidth; //!< 固定宽度

//    @property (nonatomic,assign ) CGFloat regularHeight; //!< 固定高度

    // 原作者没有能加固定宽度的，自己修改源码加上了固定宽度和高度,默认是0，就是标签式布局，如果实现了，那么就是固定宽度高度

//    self.tagView.regularWidth = 100;

//    self.tagView.regularHeight = 30;

    // 开始加载

    [self.dataSource enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

       // 初始化标签

        SKTag *tag = [[SKTag alloc] initWithText:self.dataSource[idx]];

        // 标签相对于自己容器的上左下右的距离

        tag.padding = UIEdgeInsetsMake(3, 15, 3, 15);

        // 弧度

        tag.cornerRadius = 3.0f;

        // 字体

        tag.font = [UIFont boldSystemFontOfSize:12];

        // 边框宽度

        tag.borderWidth = 0;

        // 背景

        tag.bgColor = [UIColor colorWithRed:244/255.0 green:244/255.0 blue:244/255.0 alpha:1];

        // 边框颜色

        tag.borderColor = [UIColor colorWithRed:191/255.0 green:191/255.0 blue:191/255.0 alpha:1];

        // 字体颜色

        tag.textColor = [UIColor colorWithRed:53/255.0 green:53/255.0 blue:53/255.0 alpha:1];

        // 是否可点击

        tag.enable = YES;

        // 加入到tagView

        [self.tagView addTag:tag];

    }];

    // 点击事件回调

    self.tagView.didTapTagAtIndex = ^(NSUInteger idx){

         

        NSLog(@"点击了第%ld个",idx);

         

    };

     

    // 获取刚才加入所有tag之后的内在高度

    CGFloat tagHeight = self.tagView.intrinsicContentSize.height;

    NSLog(@"高度%lf",tagHeight);

    // 根据已经得到的内在高度给SKTagView创建frame

    self.tagView.frame = CGRectMake(0, 120, 375, tagHeight);

    [self.tagView layoutSubviews];

    [self.view addSubview:self.tagView];

}

 

 

在UISearchBar的代理方法里面实现搜索的时候隐藏，不搜索的时候显示

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText

{

    NSLog(@"%@",searchText);

    if (searchText.length == 0) {

        // 没有文字了

        self.label.hidden = NO;

        self.tagView.hidden = NO;

    }

    else

    {

        self.label.hidden = YES;

        self.tagView.hidden = YES;

    }

}

 

 

 

下面咱们来看看如何让他在TableViewCell里面实现高度自适应的

- (void)configCell:(MKJTagViewTableViewCell *)cell indexpath:(NSIndexPath *)indexpath

{

    [cell.tagView removeAllTags];

    cell.tagView.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width;

    cell.tagView.padding = UIEdgeInsetsMake(20, 20, 20, 20);

    cell.tagView.lineSpacing = 20;

    cell.tagView.interitemSpacing = 30;

    cell.tagView.singleLine = NO;

    // 给出两个字段，如果给的是0，那么就是变化的,如果给的不是0，那么就是固定的

        cell.tagView.regularWidth = 80;

        cell.tagView.regularHeight = 30;

    NSArray *arr = [self.dataSource[indexpath.row] valueForKey:@"first"];

     

    [arr enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

         

        SKTag *tag = [[SKTag alloc] initWithText:arr[idx]];

         

        tag.font = [UIFont systemFontOfSize:12];

        tag.textColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0  blue:arc4random() % 256 / 255.0  alpha:1];

        tag.bgColor =[UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0  blue:arc4random() % 256 / 255.0  alpha:1];

        tag.cornerRadius = 5;

        tag.enable = YES;

        tag.padding = UIEdgeInsetsMake(5, 10, 5, 10);

        [cell.tagView addTag:tag];

    }];

     

    cell.tagView.didTapTagAtIndex = ^(NSUInteger index)

    {

        NSLog(@"点击了%ld",index);

    };

     

}

 

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    return [tableView fd_heightForCellWithIdentifier:identyfy configuration:^(id cell) {

        

        [self configCell:cell indexpath:indexPath];

    }];

}