近來，在專案中需要實現一個類似興趣標籤的選擇器。由於標籤的文字長度不定，所以標籤的顯示長度就不定。為了實現效果，就使用了UICollectionView來實現了每行的標籤數量不定、cell的寬度自適應的效果。先在此分享出來：

1、自適應UICollectionViewCell

這裡只是在自適應UICollectionViewCell上放一個和UICollectionViewCell保持一樣大小的按鈕，當選中和取消選中時改變按鈕的文字顏色和邊框顏色：

#pragma mark---標籤cell
@implementation YLTagsCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame
{
 if(self = [super initWithFrame:frame]){
  self.backgroundColor = [UIColor clearColor];
  _btn = [UIButton buttonWithType:UIButtonTypeCustom];
  //此處可以根據需要自己使用自動佈局程式碼實現
  _btn.frame = CGRectMake(0,frame.size.width,frame.size.height);
  _btn.backgroundColor = [UIColor whiteColor];
  _btn.titleLabel.font = [UIFont systemFontOfSize:14];
  _btn.layer.borderWidth = 1.f;
  _btn.layer.cornerRadius = frame.size.height/2.0;
  _btn.layer.masksToBounds = YES;
  [_btn setTitleColor:HEXCOLOR(0x666666) forState:UIControlStateNormal];
  _btn.layer.borderColor = HEXCOLOR(0xdddddd).CGColor;
  _btn.userInteractionEnabled = NO;
  [self.contentView addSubview:_btn];
 }
 return self;
}
 
-(void)layoutSubviews
{
 [super layoutSubviews];
 _btn.frame = CGRectMake(0,self.contentView.frame.size.width,self.contentView.frame.size.height);
}
 
-(void)setSelected:(BOOL)selected
{
 [super setSelected:selected];
 _btn.layer.borderColor = selected?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor;
 [_btn setTitleColor:selected?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];
}
 
-(void)setHighlighted:(BOOL)highlighted
{
 [super setHighlighted:highlighted];
 _btn.layer.borderColor = highlighted?HEXCOLOR(0xffb400).CGColor:HEXCOLOR(0xdddddd).CGColor;
 [_btn setTitleColor:highlighted?HEXCOLOR(0xffb400):HEXCOLOR(0x666666) forState:UIControlStateNormal];
}
 
@end

2、UICollectionViewFlowLayout子類--YLWaterFlowLayout的實現

.h標頭檔案

#import <UIKit/UIKit.h>
 
@class YLWaterFlowLayout;
@protocol YLWaterFlowLayoutDelegate <NSObject>
/**通過代理獲得每個cell的寬度*/
- (CGFloat)waterFlowLayout:(YLWaterFlowLayout *)layout 
widthAtIndexPath:(NSIndexPath *)indexPath;
 
@end
 
@interface YLWaterFlowLayout : UICollectionViewFlowLayout
@property (nonatomic,assign) id<YLWaterFlowLayoutDelegate> 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) {
  self.minimumInteritemSpacing = 5;//同一行不同cell間距
  self.minimumLineSpacing = 5;//行間距
  self.sectionInset = UIEdgeInsetsMake(10,10,10);
  self.scrollDirection = 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:array.count];
 for(UICollectionViewLayoutAttributes *attrs in array){
  UICollectionViewLayoutAttributes *theAttrs = [self layoutAttributesForItemAtIndexPath:attrs.indexPath];
  [mutArray addObject:theAttrs];
 }
 return mutArray;
}
 
#pragma mark - 處理單個的Item的layoutAttributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
 CGFloat x = self.sectionInset.left;
 CGFloat y = self.sectionInset.top;
 //判斷獲得前一個cell的x和y
 NSInteger preRow = indexPath.row - 1;
 if(preRow >= 0){
  if(_originyArray.count > preRow){
   x = [_originxArray[preRow]floatValue];
   y = [_originyArray[preRow]floatValue];
  }
  NSIndexPath *preIndexPath = [NSIndexPath indexPathForItem:preRow inSection:indexPath.section];
  CGFloat preWidth = [self.delegate waterFlowLayout:self widthAtIndexPath:preIndexPath];
  x += preWidth + self.minimumInteritemSpacing;
 }
 
 CGFloat currentWidth = [self.delegate waterFlowLayout:self widthAtIndexPath:indexPath];
 //保證一個cell不超過最大寬度
 currentWidth = MIN(currentWidth,self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right);
 if(x + currentWidth > self.collectionView.frame.size.width - self.sectionInset.right){
  //超出範圍，換行
  x = self.sectionInset.left;
  y += _rowHeight + self.minimumLineSpacing;
 }
 // 建立屬性
 UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
 attrs.frame = CGRectMake(x,y,currentWidth,_rowHeight);
 _originxArray[indexPath.row] = @(x);
 _originyArray[indexPath.row] = @(y);
 return attrs;
}
 
#pragma mark - CollectionView的滾動範圍
- (CGSize)collectionViewContentSize
{
 CGFloat width = self.collectionView.frame.size.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 + self.sectionInset.bottom);
}
 
@end

實現思路：在YLWaterFlowLayout中使用originxArray和originyArray兩個個數組記錄了每一個自定義YLTagsCollectionViewCell的位置x和y。

在 -(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath方法中通獲得與當前YLTagsCollectionViewCell臨近的“上一個YLTagsCollectionViewCell”的位置和尺寸資訊，將上一個cell的x加上上一個cell的width來得到當前cell的x。同時還要判斷當前cell的x+width是否會超越出螢幕右邊緣，如果超出，則表明需要換行顯示了，這時候就要修改y的值了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。