iOS UICollectionView实现标签选择器

    近来,在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定,所以标签的显示长度就不定。为了实现效果,就使用了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, 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, 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, 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的值了。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持lingkb。