2023年7月14日发(作者：)

iOSUICollectionView实现标签选择器近来，在项⽬中需要实现⼀个类似兴趣标签的选择器。由于标签的⽂字长度不定，所以标签的显⽰长度就不定。为了实现效果，就使⽤了UICollectionView来实现了每⾏的标签数量不定、cell的宽度⾃适应的效果。先在此分享出来：1、⾃适应UICollectionViewCell这⾥只是在⾃适应UICollectionViewCell上放⼀个和UICollectionViewCell保持⼀样⼤⼩的按钮，当选中和取消选中时改变按钮的⽂字颜⾊和边框颜⾊：#pragma mark---标签cell@implementation YLTagsCollectionViewCell-(instancetype)initWithFrame:(CGRect)frame{ if(self = [super initWithFrame:frame]){ oundColor = [UIColor clearColor]; _btn = [UIButton buttonWithType:UIButtonTypeCustom]; //此处可以根据需要⾃⼰使⽤⾃动布局代码实现 _ = CGRectMake(0, 0, , ); _oundColor = [UIColor whiteColor]; _ = [UIFont systemFontOfSize:14]; _Width = 1.f; _Radius = /2.0; _oBounds = YES; [_btn setTitleColor:HEXCOLOR(0x666666) forState:UIControlStateNormal]; _Color = HEXCOLOR(0xdddddd).CGColor; _teractionEnabled = NO; [tView addSubview:_btn]; } return self;}

-(void)layoutSubviews{ [super layoutSubviews]; _ = CGRectMake(0, 0, , );}

-(void)setSelected:(BOOL)selected{ [super setSelected:selected]; _Color = selected?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor; [_btn setTitleColor:selected?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];}

-(void)setHighlighted:(BOOL)highlighted{ [super setHighlighted:highlighted]; _Color = highlighted?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor; [_btn setTitleColor:highlighted?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];}

@end2、UICollectionViewFlowLayout⼦类--YLWaterFlowLayout的实现.h头⽂件#import

@class YLWaterFlowLayout;@protocol YLWaterFlowLayoutDelegate /**通过代理获得每个cell的宽度*/- (CGFloat)waterFlowLayout:(YLWaterFlowLayout *)layout

widthAtIndexPath:(NSIndexPath *)indexPath;

@end

@interface YLWaterFlowLayout : UICollectionViewFlowLayout@property (nonatomic,assign) id delegate;@property(nonatomic,assign)CGFloat rowHeight;///< 固定⾏⾼

@end.m⽂件#import "YLWaterFlowLayout.h"

@interface YLWaterFlowLayout()@property(nonatomic,strong)NSMutableArray *originxArray;@property(nonatomic,strong)NSMutableArray *originyArray;@end

@implementation YLWaterFlowLayout#pragma mark - 初始化属性- (instancetype)init { self = [super init]; if (self) { mInteritemSpacing = 5;//同⼀⾏不同cell间距 mLineSpacing = 5;//⾏间距 nInset = UIEdgeInsetsMake(10, 10, 10, 10); Direction = UICollectionViewScrollDirectionVertical; _originxArray = [NSMutableArray array]; _originyArray = [NSMutableArray array]; } return self;}

#pragma mark - 重写⽗类的⽅法，实现瀑布流布局#pragma mark - 当尺⼨有所变化时，重新刷新- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { return YES;}

- (void)prepareLayout { [super prepareLayout];}

#pragma mark - 处理所有的Item的layoutAttributes- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{ NSArray *array = [super layoutAttributesForElementsInRect:rect]; NSMutableArray *mutArray = [NSMutableArray arrayWithCapacity:]; for(UICollectionViewLayoutAttributes *attrs in array){ UICollectionViewLayoutAttributes *theAttrs = [self layoutAttributesForItemAtIndexPath:ath]; [mutArray addObject:theAttrs]; } return mutArray;}

#pragma mark - 处理单个的Item的layoutAttributes- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{ CGFloat x = ; CGFloat y = ; //判断获得前⼀个cell的x和y NSInteger preRow = - 1; if(preRow >= 0){ if(_ > preRow){ x = [_originxArray[preRow]floatValue]; y = [_originyArray[preRow]floatValue]; } NSIndexPath *preIndexPath = [NSIndexPath indexPathForItem:preRow inSection:n]; CGFloat preWidth = [te waterFlowLayout:self widthAtIndexPath:preIndexPath]; x += preWidth + mInteritemSpacing; }

CGFloat currentWidth = [te waterFlowLayout:self widthAtIndexPath:indexPath]; //保证⼀个cell不超过最⼤宽度 currentWidth = MIN(currentWidth, - - ); if(x + currentWidth > - ){ //超出范围，换⾏ x = ; y += _rowHeight + mLineSpacing; } // 创建属性 UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; = CGRectMake(x, y, currentWidth, _rowHeight); _originxArray[] = @(x); _originyArray[] = @(y); return attrs;}

#pragma mark - CollectionView的滚动范围- (CGSize)collectionViewContentSize{ CGFloat width = ;

__block CGFloat maxY = 0; [_originyArray enumerateObjectsUsingBlock:^(NSNumber *number, NSUInteger idx, BOOL * _Nonnull stop) { if ([number floatValue] > maxY) { maxY = [number floatValue]; } }];

return CGSizeMake(width, maxY + _rowHeight + );}

@end实现思路：在YLWaterFlowLayout中使⽤originxArray和originyArray两个个数组记录了每⼀个⾃定义YLTagsCollectionViewCell的位置x和y。在 -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath⽅法中通获得与当前YLTagsCollectionViewCell临近的“上⼀个YLTagsCollectionViewCell”的位置和尺⼨信息，将上⼀个cell的x加上上⼀个cell的width来得到当前cell的x。同时还要判断当前cell的x+width是否会超越出屏幕右边缘，如果超出，则表明需要换⾏显⽰了，这时候就要修改y的值了。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。