iOS 简易型标签的实现（UICollectionView）

Posted 2021-02-13 sundays

https://blog.csdn.net/sinat_39362502/article/details/80900984

 

2018年07月03日 16:49:05 Recorder_MZou 阅读数：2079

 

接到一个需求就是要实现标签组的显示和选择，如下图所示：

一开始感觉没有什么头绪，参考网上各种demo，发现大部分的demo都是以自绘制标签为主实现标签的长度计算和自动换行，但是这样需要实现的计算量就非常大，对于一部分参考和后期维护起来就非常麻烦，稍微修改错一个参数，导致计算不准确，这就不太好实现。

但是想了一下我们常用的系统控件中，是否有相关的控件可以实现呢？第一个想法就让我想到了UICollectionView,既然UICollectionView能实现瀑布流，为什么标签这种无规则的界面不能实现呢？，于是就开始初步搭建：

首先，先了解在UICollectionView中如何能或者每一个cell的大小，想到我们常用的UITableView的操作，其实两者的用法基本也是一样的，所以在UICollectionViewDelegate中就有

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    NSString * containString = @"你想知道怎么实现宽度计算吗？";

    CGFloat width = [NSString getWidthWithText:containString height:30 font:13];

    return CGSizeMake(width + 25, 30.0f);

}

这个方法能手动设置cell的大小。

既然能手动设置cell的大小了，那这样实现起来就容易了，按照正常的流程设置UICollectionView的数据源方法和相关的代理方法即可。

接下来的就是一个封装好的类，即计算String的宽度：

/**

 根据高度度求宽度

 @param text 计算的内容

 @param height 计算的高度

 @param font 字体大小

 @return 返回宽度

 */

+ (CGFloat)getWidthWithText:(NSString *)text height:(CGFloat)height font:(CGFloat)font

{

    //加上判断，防止传nil等不符合的值，导致程序奔溃

    if (text == nil || [text isEqualToString:@""]){

        text = @"";

    }

    if (font <= 0){

        font = 13;

    }

    if (height < 0){

        height = 0;

    }

    CGRect rect = [text boundingRectWithSize:CGSizeMake(MAXFLOAT, height)

                                     options:NSStringDrawingUsesLineFragmentOrigin

                                  attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:font]}

                                     context:nil];

    return rect.size.width;

}

这样大概的设置，大概即可实现在UICollectionView中的每一个cell的大小，而最重要的一步就来了，如何设置UICollectionView的布局呢？，这个就是整个标签组最为重要的一部分。

1.如何实现cell的布局位置要靠左对齐，并实现到屏幕最右边时能自动换行；

2.如何实现每一个不同长度的cell的具体距离和到不会被UICollectionViewFlowLayout默认数据自动拉伸到屏幕平分呢；

这个时候，我们就需要重写UICollectionViewFlowLayout，首先要获取相关容器的宽度，或者每一个cell的宽度，然后通过计算每一个行cell的宽度和间隙相加的和是否大于容器的宽度，如果大于，即可更换其行数，以下就是 .m文件的直接代码展示（参考来源 @Giovanni Lodi）：

@interface UICollectionViewLayoutAttributes (LeftAligned)

- (void)leftAlignFrameWithSectionInset:(UIEdgeInsets)sectionInset;

@end

@implementation UICollectionViewLayoutAttributes (LeftAligned)

- (void)leftAlignFrameWithSectionInset:(UIEdgeInsets)sectionInset

{

    CGRect frame = self.frame;

    frame.origin.x = sectionInset.left;

    self.frame = frame;

}

@end

#pragma mark -

@implementation UICollectionViewLeftAlignedLayout

#pragma mark - UICollectionViewLayout

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

    NSArray *originalAttributes = [super layoutAttributesForElementsInRect:rect];

    NSMutableArray *updatedAttributes = [NSMutableArray arrayWithArray:originalAttributes];

    for (UICollectionViewLayoutAttributes *attributes in originalAttributes) {

        if (!attributes.representedElementKind) {

            NSUInteger index = [updatedAttributes indexOfObject:attributes];

            updatedAttributes[index] = [self layoutAttributesForItemAtIndexPath:attributes.indexPath];

        }

    }

    return updatedAttributes;

}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewLayoutAttributes* currentItemAttributes = [[super layoutAttributesForItemAtIndexPath:indexPath] copy];

    UIEdgeInsets sectionInset = [self evaluatedSectionInsetForItemAtIndex:indexPath.section];

    BOOL isFirstItemInSection = indexPath.item == 0;

    CGFloat layoutWidth = CGRectGetWidth(self.collectionView.frame) - sectionInset.left - sectionInset.right;

    if (isFirstItemInSection) {

        [currentItemAttributes leftAlignFrameWithSectionInset:sectionInset];

        return currentItemAttributes;

    }

    NSIndexPath* previousIndexPath = [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section];

    CGRect previousFrame = [self layoutAttributesForItemAtIndexPath:previousIndexPath].frame;

    CGFloat previousFrameRightPoint = previousFrame.origin.x + previousFrame.size.width;

    CGRect currentFrame = currentItemAttributes.frame;

    CGRect strecthedCurrentFrame = CGRectMake(sectionInset.left,

                                              currentFrame.origin.y,

                                              layoutWidth,

                                              currentFrame.size.height);

    // if the current frame, once left aligned to the left and stretched to the full collection view

    // width intersects the previous frame then they are on the same line

    BOOL isFirstItemInRow = !CGRectIntersectsRect(previousFrame, strecthedCurrentFrame);

    if (isFirstItemInRow) {

        // make sure the first item on a line is left aligned

        [currentItemAttributes leftAlignFrameWithSectionInset:sectionInset];

        return currentItemAttributes;

    }

    CGRect frame = currentItemAttributes.frame;

    frame.origin.x = previousFrameRightPoint + [self evaluatedMinimumInteritemSpacingForSectionAtIndex:indexPath.section];

    currentItemAttributes.frame = frame;

    return currentItemAttributes;

}

- (CGFloat)evaluatedMinimumInteritemSpacingForSectionAtIndex:(NSInteger)sectionIndex

{

    if ([self.collectionView.delegate respondsToSelector:@selector(collectionView:layout:minimumInteritemSpacingForSectionAtIndex:)]) {

        id<UICollectionViewDelegateLeftAlignedLayout> delegate = (id<UICollectionViewDelegateLeftAlignedLayout>)self.collectionView.delegate;

        return [delegate collectionView:self.collectionView layout:self minimumInteritemSpacingForSectionAtIndex:sectionIndex];

    } else {

        return self.minimumInteritemSpacing;

    }

}

- (UIEdgeInsets)evaluatedSectionInsetForItemAtIndex:(NSInteger)index

{

    if ([self.collectionView.delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)]) {

        id<UICollectionViewDelegateLeftAlignedLayout> delegate = (id<UICollectionViewDelegateLeftAlignedLayout>)self.collectionView.delegate;

        return [delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:index];

    } else {

        return self.sectionInset;

    }

}

@end

那么既然最困难的一步就是布局的问题已经解决了，那整体的页面显示已经完成了，那接下来就是数据的处理了,那要如何实现下图显示？

 

标签选择.gif

那首先要思考两个问题，如果通过对数据源的设置实现UICollectionView中每一组选中cell或者不选中cell，多选和单选的区别，此时我想到的一个方法就是给数据源一个属性，标识该cell是否选中：

/**

 是否选中

 */

@property (nonatomic, assign) BOOL isSelect;

通过数据源的属性来控制cell内部选中的控件的颜色和状态

    [_tagBtn setTitle:model.name forState: UIControlStateNormal];

    UIColor *containStringColor = model.color == 0 ? tagBlueColor : model.color == 1 ? tagRedColor : model.color == 2 ? tagGreenColor : model.color == 3 ? tagYellowColor : model.color == 4 ? tagVioletColor : tagIndigoColor;

    if (model.isSelect == YES)

    {

        [_tagBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

        _tagBtn.backgroundColor = containStringColor;

    }

    else

    {

        [_tagBtn setTitleColor:labelBlackColor forState:UIControlStateNormal];

        _tagBtn.backgroundColor = HEXCOLOR(0xeeeeee);

    }

那controller中的数据该怎么判断是否选中和未选择，然后实现给数据源的属性选中呢？具体思路就是：需要进行遍历数据源中的所有模型进行判断和赋值选中状态，实现方法如下：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    [collectionView deselectItemAtIndexPath:indexPath animated:NO];

    PBCTagGroundModel *groundModel = self.listArrM[indexPath.section];

    DLog(@"indexPath.Seciont = %zd,row = %zd",indexPath.section,indexPath.row);

    //替换成可选模式

    for (int i = 0; i < groundModel.tags.count; ++i)

    {

        PBCTagModel *model = groundModel.tags[i];

        if (indexPath.row == i)

        {

            if (model.isSelect == YES)

            {

                model.isSelect = NO;

            }

            else

            {

                model.isSelect = YES;

            }

            [groundModel.tags replaceObjectAtIndex:i withObject:model];

        }

    }

    [self.listArrM replaceObjectAtIndex:indexPath.section withObject:groundModel];

    [self.collectionView reloadData];

}

既然每一组的cell都实现了选中和未选中状态了，那如何实现判断全选和不选中的状态呢？这里就需要给UICollectionView的头部设置一个点击事件，并且也需要对数据源中的所有数据进行遍历，对数据的选中状态进行选中和未选中的属性赋值。

那么问题来了，如何这是UICollectionView的头部呢？这个和UITableView的操作其他大有雷同：

首先，要先注册UICollectionView的头部：

    //注册头视图

    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"UICollectionViewHeader"];

然后实现collectionView的头部尾部设置代理

//设置头视图的大小

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{

    return CGSizeMake([UIScreen mainScreen].bounds.size.width, 44);

}

//创建头视图

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView

           viewForSupplementaryElementOfKind:(NSString *)kind

                                 atIndexPath:(NSIndexPath *)indexPath {

    NSString *indentifierString = @"UICollectionViewHeader";

    UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader

                                                                            withReuseIdentifier:indentifierString

                                                                                   forIndexPath:indexPath];

   headView.backgroundColor = [UIColor whiteColor];

    //此处操作是为了防止头部视图重复使用（从缓存机制中取出）,导致重叠视图，如要移除此前设置的视图再进行绘制

    for (UIView *subView in headView.subviews)

    {

        [subView removeFromSuperview];

    }

   //设置相关视图

   //.....此处设置

    return headView;

}

设置完头部视图了，那具体的数据操作就是遍历数据修改数据源状态了，代码如下：

/**

 点击选择组便签

 @param btn 组标签

 */

- (void)clickSelectAllBtn:(UIButton *)btn

{

    btn.selected = !btn.selected;

    PBCTagGroundModel *groundModel = self.listArrM[btn.tag];

    //替换成可选模式

    for (int i = 0; i < groundModel.tags.count; ++i)

    {

        PBCTagModel *model = groundModel.tags[i];

        if (btn.selected == YES)

        {

            model.isSelect = YES;

        }

        else

        {

            model.isSelect = NO;

        }

        [groundModel.tags replaceObjectAtIndex:i withObject:model];

    }

    [self.listArrM replaceObjectAtIndex:btn.tag withObject:groundModel];

    [self.collectionView reloadData];

}

那么对数据源也处理完了，整体的标签组也是实现了。

其实整体设置标签组，最大的难度是在于UICollectionViewFlowLayout的重写和计算，如果这一步解决了，整体的思路很清晰，可以直接解决问题。

以上就是通过UICollectionView来实现标签组的方法，可能实现的路径和方法很多，也有更加多便捷方法和思路，上面方法如有不足之处望大家指出，或者有更优的方法，也欢迎大家来探讨。

大千世界，求同存异；相遇是缘，相识是份，相知便是“猿粪”(缘分)