iOS UICollectionView实现动态标签（单选、多选）

项目中我们经常会遇到标签动态展示的问题，有时我们也需要实现单选或者多选的功能

<1> 针对标签动态展示，我们解决的核心办法就是动态计算文本宽度

即：标签宽度=文本宽度+左右间距

核心代码：

#pragma mark -- UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    TaskValueModel *model = self.model.orgRelationCollection[indexPath.row];
    NSString *str = ObjErrorCheck(model.value);
   // 核心代码 动态宽度计算
   //  LL_ScreenWidth -74 （文本最大宽度）最大就是一行放置一个
    CGRect itemFrame = [str boundingRectWithSize:CGSizeMake(LL_ScreenWidth -74, 14) options: NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]} context:nil];
   //  item的宽度 文本宽度+左右间距合计24
    CGFloat width = itemFrame.size.width + 24;
    //  item的size
    return CGSizeMake(width, 32);
}

<2> 针对单选或者多选，核心就是在标签模型上的selected标记，然后根据操作改变这个值

单选核心代码

#pragma mark -- UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    //  单选功能
    TaskValueModel *model = self.model.orgRelationCollection[indexPath.row];
    //  选中再次点击取消选中
    if (model.selected) {
        model.selected = !model.selected;
    //  未选中点击选中，同时确保其它未选中
    } else {
        [self.model.orgRelationCollection enumerateObjectsUsingBlock:^(TaskValueModel * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            if (model.id == obj.id) {
                obj.selected  = YES;
            }else {
                obj.selected  = NO;
            }
        }];
    }
    [self.collectionView reloadData];
    
}

多选核心代码

#pragma mark -- UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    //    多选实现
    TaskValueModel *model = self.model.valueTypeCollection[indexPath.row];
    model.selected = !model.selected;
    [self.collectionView reloadData];
    
}

 注意点：

文本的最大宽度 ：LL_ScreenWidth -74 （文本最大宽度）最大就是一行放置一个

计算高度时的最大宽度（xOffset + 当前item的宽）：LL_ScreenWidth -50  最大宽度(collectionView的宽度)

今天我就简述下使用UICollectionView实现上述功能，

1、自定义布局 LeftAlignFlowLayout

2、自定义标签 ValueTypeCollectionViewCell

3、标签对应的模型 TaskValueModel（因为我们需要在模型中记录选中未选状态，并且会做修改，所以不建议使用NSDictionary,不然修改会比较麻烦）

4、多选功能（未选点击选中，再次点击取消选中）

5、单选功能（未选点击选中且保证其它是未选中，再次点击取消选中）ValueTypeTableViewCell

效果如图：

话不多说，直接上代码

一、自定义布局LeftAlignFlowLayout：

LeftAlignFlowLayout.h

//
//  LeftAlignFlowLayout.h
//  CollectionViewDemo
//
//  Created by LJY on 2017/8/24.
//  Copyright © 2017年 LJY. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface LeftAlignFlowLayout : UICollectionViewFlowLayout

/**
 *  可以通过UICollectionViewFlowLayout的属性，或者UICollectionViewDelegateFlowLayout的方法设置布局属性。皆不设置
 *  采用系统默认值。
 */
+ (instancetype) leftAlignLayoutWithDelegate:(id<UICollectionViewDelegateFlowLayout>) delegate;

@end

LeftAlignFlowLayout.m

//
//  LeftAlignFlowLayout.m
//  CollectionViewDemo
//
//  Created by LJY on 2017/8/24.
//  Copyright © 2017年 LJY. All rights reserved.
//

#import "LeftAlignFlowLayout.h"

@interface LeftAlignFlowLayout ()

@property (nonatomic, weak) id<UICollectionViewDelegateFlowLayout> delegate;
@property (nonatomic, strong) NSMutableArray *arrForItemAtrributes;

@end

@implementation LeftAlignFlowLayout

+ (instancetype) leftAlignLayoutWithDelegate:(id<UICollectionViewDelegateFlowLayout>) delegate
{
    LeftAlignFlowLayout* layout = [[LeftAlignFlowLayout alloc] init];
    layout.delegate = delegate;
    return layout;
}

#pragma mark Override method
- (void)prepareLayout
{
    [super prepareLayout];
    CGFloat xForItemOrigin = self.sectionInsetCustomer.left;
    CGFloat yForItemOrigin = self.sectionInsetCustomer.top;
    CGFloat itemHeight = [self itemSizeCustomer:[NSIndexPath indexPathForRow:0 inSection:0]].height;
    CGFloat xOffset = self.sectionInsetCustomer.left;
    NSUInteger numberOfItems = [self.collectionView numberOfItemsInSection:0];
    NSUInteger numberOfRows = 0;
    self.arrForItemAtrributes = [NSMutableArray arrayWithCapacity:numberOfItems];
    // 为每个item确定LayoutAttribute属性,同时将这些属性放入布局数组中 
    for(int i = 0; i <numberOfItems; i++)
    {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes *layoutArr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        CGFloat itemWidth = [self itemSizeCustomer:indexPath].width;;
        //xOffset + 当前item的宽 <= 最大宽度
        if ((xOffset + itemWidth) <= (self.collectionView.bounds.size.width - self.sectionInsetCustomer.right - self.sectionInsetCustomer.left))
        {
            //设置x
            xForItemOrigin = xOffset;
            xOffset += itemWidth + self.minimumInteritemSpacingCustomer;
        }
        else
        {
            //换行
            xForItemOrigin = self.sectionInsetCustomer.left;
            xOffset  = self.sectionInsetCustomer.left + itemWidth + self.minimumInteritemSpacingCustomer;
            numberOfRows++;
        }
        // 设置y
        yForItemOrigin = self.sectionInsetCustomer.top + (itemHeight+ self.minimumLineSpacingCustomer) * numberOfRows;
        layoutArr.frame = CGRectMake(xForItemOrigin, yForItemOrigin, itemWidth, itemHeight);
        [self.arrForItemAtrributes addObject:layoutArr];
    }
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.arrForItemAtrributes;
}

#pragma mark - Inner method
/**
 *  default 10
 */
- (CGFloat)minimumLineSpacingCustomer
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:layout:minimumLineSpacingForSectionAtIndex:)])
    {
        return [self.delegate collectionView:self.collectionView layout:self minimumLineSpacingForSectionAtIndex:0];
    }
    else
    {
        return self.minimumLineSpacing;
    }
}
/**
 *  default 10
 */
- (CGFloat)minimumInteritemSpacingCustomer
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:layout:minimumInteritemSpacingForSectionAtIndex:)])
    {
        return [self.delegate collectionView:self.collectionView layout:self minimumInteritemSpacingForSectionAtIndex:0];
    }
    else
    {
        return self.minimumInteritemSpacing;
    }
}
/**
 *  default UIEdgeInsetsZero
 */
- (UIEdgeInsets)sectionInsetCustomer
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)])
    {
        return [self.delegate collectionView:self.collectionView layout:self insetForSectionAtIndex:0];
    }
    else
    {
        return self.sectionInset;
    }

}
/**
 *  default {50, 50}
 */
- (CGSize)itemSizeCustomer:(NSIndexPath *)indexPath
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:layout:sizeForItemAtIndexPath:)])
    {
        return [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath];
    }
    else
    {
        return self.itemSize;
    }
}
/**
 *  default CGSizeZero
 */
- (CGSize)headerReferenceSizeCustomer
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:layout:referenceSizeForHeaderInSection:)])
    {
        return [self.delegate collectionView:self.collectionView layout:self referenceSizeForHeaderInSection:0];
    }
    else
    {
        return self.headerReferenceSize;
    }
}
/**
 *  default CGSizeZero
 */
- (CGSize)footerReferenceSizeCustomer
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(collectionView:layout:referenceSizeForFooterInSection:)])
    {
        return [self.delegate collectionView:self.collectionView layout:self referenceSizeForFooterInSection:0];
    }
    else
    {
        return self.footerReferenceSize;
    }
}

@end

二、自定义标签ValueTypeCollectionViewCell

ValueTypeCollectionViewCell.h

#import <UIKit/UIKit.h>
#import "iCCarrerCircleTaskDetailsNewModel.h"
NS_ASSUME_NONNULL_BEGIN
static NSString  *const ValueTypeCollectionViewCellReused     = @"ValueTypeCollectionViewCell";
@interface ValueTypeCollectionViewCell : UICollectionViewCell
- (void)configCell:(TaskValueModel *)model;
@end

ValueTypeCollectionViewCell.m

#import "ValueTypeCollectionViewCell.h"

@interface ValueTypeCollectionViewCell ()
@property (nonatomic, strong) UIView *bgView;
@property (nonatomic, strong) UILabel *tagLabel;
@property (nonatomic, strong) UIImageView *rightIcon;
@end

@implementation ValueTypeCollectionViewCell

#pragma mark - System

- (instancetype)initWithFrame:(CGRect)frame {
     
    self = [super initWithFrame:frame];
    if (self) {
        [self initData];
        [self initUI];
    }
    return self;
}

#pragma mark - Init Data

- (void)initData {
    
}

#pragma mark - Init UI

- (void)initUI {
    
    self.backgroundColor = [UIColor clearColor];
    
    [self.contentView addSubview:self.bgView];
    [self.bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.contentView);
    }];
    
    [self.bgView addSubview:self.rightIcon];
    [self.rightIcon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.bgView);
        make.top.equalTo(self.bgView);
        make.width.height.mas_equalTo(19);
    }];
    
    [self.bgView addSubview:self.tagLabel];
    [self.tagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.bgView);
    }];
    
}

- (UIView *)bgView {
    if (!_bgView) {
        _bgView = [[UIView alloc] init];
        [_bgView cornerAngel:5];
    }
    return _bgView;
}

- (UILabel *)tagLabel {
    if(!_tagLabel){
        _tagLabel = [[UILabel alloc]init];
        _tagLabel.font = FF_PFR_ICOME(14);
    }
    return _tagLabel;
}

- (UIImageView *)rightIcon {
    if(!_rightIcon){
        _rightIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"task_value_sel"]];
    }
    return _rightIcon;
}

#pragma mark - Reload View
- (void)configCell:(TaskValueModel *)model {
    self.tagLabel.text = ObjErrorCheck(model.value);
    
    if (model.allowdClick) {
        
        if (model.selected) {
//            选中样式
            self.bgView.backgroundColor = CC_ICOME(@"#3480FF1A");
            [self.bgView borderWidth:ONE_PIXEL andBorderColor:CC_ICOME(@"#3480FF33")];
            self.tagLabel.textColor = CC_ICOME(@"#3480FF");
            self.rightIcon.hidden = NO;
            
        } else {
//         未选中样式
            self.bgView.backgroundColor = XZWL_COLOR_FFFFFF;
            [self.bgView borderWidth:ONE_PIXEL andBorderColor:CC_ICOME(@"#BBBBBB")];
            self.tagLabel.textColor = CC_ICOME(@"#666666");
            self.rightIcon.hidden = YES;
        }
        
    } else {
//        不可点击样式
        self.bgView.backgroundColor = CC_ICOME(@"#3480FF1A");
        [self.bgView borderWidth:ONE_PIXEL andBorderColor:CC_ICOME(@"#3480FF33")];
        self.tagLabel.textColor = CC_ICOME(@"#3480FF");
        self.rightIcon.hidden = YES;
    }
    
}

@end

三、标签对应模型TaskValueModel

TaskValueModel.h

@protocol TaskValueModel
@end
@interface TaskValueModel : JSONModel
@property (nonatomic, copy) NSString *value;//
@property (nonatomic, assign) NSInteger id;//
@property (nonatomic, assign) BOOL selected;//
@property (nonatomic, assign) BOOL allowdClick;//
@end

四、单选功能卡片ValueTypeTableViewCell

ValueTypeTableViewCell.h

#import "BaseTableViewCell.h"
#import "iCCarrerCircleTaskDetailsNewModel.h"
NS_ASSUME_NONNULL_BEGIN

@interface ValueTypeTableViewCell : BaseTableViewCell
+ (CGFloat)getCellHeight:(iCCarrerCircleTaskDetailsNewModel *)model;

- (void)configCell:(iCCarrerCircleTaskDetailsNewModel *)model;
@end

ValueTypeTableViewCell.m

#import "ValueTypeTableViewCell.h"
#import "ValueTypeCollectionViewCell.h"
#import "LeftAlignFlowLayout.h"

@interface ValueTypeTableViewCell ()<UICollectionViewDelegateFlowLayout,UICollectionViewDelegate, UICollectionViewDataSource>
@property (nonatomic, strong) UIView *bgView;
@property (nonatomic, strong) UIImageView *LImage;
@property (nonatomic, strong) UILabel *LLab;
@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) iCCarrerCircleTaskDetailsNewModel *model;
@end

@implementation ValueTypeTableViewCell
#pragma mark - System

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        [self initUI];
    }
    return self;
}

#pragma mark - Init Data

- (void)initData {
}

#pragma mark - Init UI

- (void)initUI {
    self.accessoryType = UITableViewCellAccessoryNone;
    self.selectionStyle = UITableViewCellSelectionStyleNone;
    self.backgroundColor = [UIColor clearColor];
    
    [self.contentView addSubview:self.bgView];
    [self.bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.contentView.mas_top);
        make.left.equalTo(self.contentView.mas_left).offset(10);
        make.right.equalTo(self.contentView.mas_right).offset(-10);
        make.bottom.equalTo(self.contentView);
    }];
    
    [self.bgView addSubview:self.LImage];
    [self.LImage mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.bgView).offset(15);
        make.top.equalTo(self.bgView).offset(17);
        make.height.mas_equalTo(17);
        make.width.mas_equalTo(16);
    }];
    
    [self.bgView addSubview:self.LLab];
    [self.LLab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.bgView).offset(44);
        make.centerY.equalTo(self.LImage);
    }];
    
    [self.bgView addSubview:self.collectionView];
    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.bgView).offset(15);
        make.top.equalTo(self.bgView).offset(52);
        make.bottom.equalTo(self.bgView).offset(-20);
        make.right.equalTo(self.bgView).offset(-15);
    }];
    
}

- (UIView *)bgView {
    if (!_bgView) {
        _bgView = [[UIView alloc] init];
        _bgView.backgroundColor = XZWL_COLOR_FFFFFF;
        [_bgView cornerAngel:8];
    }
    return _bgView;
}

- (UILabel *)LLab {
    if (!_LLab) {
        _LLab = [[UILabel alloc]init];
        _LLab.font = FF_PFM_ICOME(16);
        _LLab.textColor = XZWL_COLOR_333333;
        _LLab.text = @"单选测试";
    }
    return _LLab;
}

- (UIImageView *)LImage {
    if (!_LImage) {
        _LImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"task_org"]];
    }
    return _LImage;
}

- (UICollectionView *)collectionView {
    
    if (!_collectionView) {
       //   核心代码 自定义布局LeftAlignFlowLayout
        LeftAlignFlowLayout *layout = [LeftAlignFlowLayout leftAlignLayoutWithDelegate:self];
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.showsHorizontalScrollIndicator = NO;
        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.backgroundColor = [UIColor clearColor];
        
        [_collectionView registerClass:[ValueTypeCollectionViewCell class] forCellWithReuseIdentifier:ValueTypeCollectionViewCellReused];
        
        if (@available(iOS 11.0, *)) {
            _collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        } else {
            self.viewController.automaticallyAdjustsScrollViewInsets = NO;
        }
        
    }
    return _collectionView;
}

#pragma mark - Event

#pragma mark - DataSource
#pragma mark -- UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.model.orgRelationCollection.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    ValueTypeCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ValueTypeCollectionViewCellReused forIndexPath:indexPath];
    TaskValueModel *model = self.model.orgRelationCollection[indexPath.row];
    [cell configCell:model];
    return cell;
}

#pragma mark - Delegate
#pragma mark -- UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    //  单选功能
    TaskValueModel *model = self.model.orgRelationCollection[indexPath.row];
    //  选中再次点击取消选中
    if (model.selected) {
        model.selected = !model.selected;
    //  未选中点击选中，同时确保其它未选中
    } else {
        [self.model.orgRelationCollection enumerateObjectsUsingBlock:^(TaskValueModel * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            if (model.id == obj.id) {
                obj.selected  = YES;
            }else {
                obj.selected  = NO;
            }
        }];
    }
    [self.collectionView reloadData];
    
}
#pragma mark -- UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    TaskValueModel *model = self.model.orgRelationCollection[indexPath.row];
    NSString *str = ObjErrorCheck(model.value);
   // 核心代码 动态宽度计算
   //  LL_ScreenWidth -74 （文本的最大宽度）最大就是一行放置一个
    CGRect itemFrame = [str boundingRectWithSize:CGSizeMake(LL_ScreenWidth -74, 14) options: NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]} context:nil];
   //  item的宽度 文本宽度+左右间距合计24
    CGFloat width = itemFrame.size.width + 24;
    //  item的size
    return CGSizeMake(width, 32);
}

#pragma mark - Reload View
+ (CGFloat)getCellHeight:(iCCarrerCircleTaskDetailsNewModel *)model {
    CGFloat heightmp = 0;
    // 核心代码 高度计算
    if (model.orgRelationCollection.count) {
        // itemSizes 存放itemsize的集合
        NSMutableArray *itemSizes = [NSMutableArray array];
        for (TaskValueModel *modelt in model.orgRelationCollection)
        {
            CGRect itemFrame = [ObjErrorCheck(modelt.value) boundingRectWithSize:CGSizeMake(LL_ScreenWidth -74, 14) options: NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]} context:nil];
            
            CGFloat width = itemFrame.size.width + 24;
            NSValue *itemSize =[NSValue valueWithCGSize:CGSizeMake(width, 32)];
            [itemSizes addObject:itemSize];
        }
        
        NSInteger row = 1;
        CGFloat xOffset = 0 ;
       //  单个item高度
        CGFloat height = 32;
        for(int i = 0; i <itemSizes.count; i++)
        {
            CGFloat itemWidth = [itemSizes[i] CGSizeValue].width;
            //xOffset + 当前item的宽 <= 最大宽度(collectionView的宽度)
            if ((xOffset + itemWidth) <= (LL_ScreenWidth - 50))
            {
                xOffset += itemWidth + 10;
            }
            else
            {
                //换行
                xOffset  = itemWidth + 10;
                row++;
            }
        }
        //   collectionview高度： 行数 * 行高 + （行数 - 1）*行间距
        CGFloat maxHeight = row * height + (row - 1) * 10 ;
        //  总高度： collectionview高度 + 上下间距
        heightmp = maxHeight + 72;
        
    }
    return heightmp;
    
}

- (void)configCell:(iCCarrerCircleTaskDetailsNewModel *)model{
    self.model = model;
    self.collectionView.userInteractionEnabled = NO;
    if (self.model.orgRelationCollection.count) {
        TaskValueModel *modelt=self.model.orgRelationCollection[0];
        if (modelt.allowdClick) {
            self.collectionView.userInteractionEnabled = YES;
        }
        self.hidden = NO;
        [self.collectionView reloadData];
    } else {
        self.hidden = YES;
    }
    
}

@end

五、多选功能与单选相似，只是处理选中逻辑不同

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    //    多选实现
    TaskValueModel *model = self.model.valueTypeCollection[indexPath.row];
    model.selected = !model.selected;
    [self.collectionView reloadData];
    
}