使用UICollectionView 实现横向滚动标签

效果图:

截屏2020-05-07 12.03.07.png

首先创建UICollectionView:

- (void)awakeFromNib {
    
    [super awakeFromNib];
    [self.contentView addSubview:self.collectionView];
}
#pragma mark ==================== collectionView ====================
-(UICollectionView *)collectionView{

    if(!_collectionView){
        
        UICollectionViewFlowLayout*layout=[[UICollectionViewFlowLayout alloc]init];
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, HeightScale(15), SCREEN_WIDTH, HeightScale(60)) collectionViewLayout:layout];
        [_collectionView registerClass:[LearningLabCollectionViewCell class] forCellWithReuseIdentifier:_learLab];
        _collectionView.showsVerticalScrollIndicator = FALSE;
        _collectionView.showsHorizontalScrollIndicator = FALSE;
        _collectionView.backgroundColor = [UIColor myColorWithString:@"F5F5F5"];
        _collectionView.delegate =self;
        _collectionView.dataSource =self;
    }
    return _collectionView;
}


-(void)setModelLab:(LearningDetailModelLabType *)modelLab{
    
    _modelLab = modelLab;
    [self.collectionView reloadData];
}
//定义展示的UICollectionViewCell的个数
-(NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section{

    return _modelLab.data.count;
}

//定义展示的Section的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView{
    
    return 1;
}
//每个UICollectionView展示的内容
-(UICollectionViewCell*)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(NSIndexPath*)indexPath{
    
    LearningLabCollectionViewCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:_learLab forIndexPath:indexPath];
    cell.model = _modelLab.data[indexPath.row];
    return cell;
}
#pragma mark --UICollectionViewDelegate

//UICollectionView被选中时调用的方法
-(void)collectionView:(UICollectionView*)collectionView didSelectItemAtIndexPath:(NSIndexPath*)indexPath{
    
    //遍历数据源 取消所有点击 isSelect全部都设置成NO
    for (LearningDetailModelLabTypeData *modelSelect in _modelLab.data) {
        modelSelect.isSelect = NO;
    }
    //改变点击标签的Select 
    LearningDetailModelLabTypeData *model = _modelLab.data[indexPath.row];
    model.isSelect = YES;
    //让你点中index 自动滚动到中间  横向水平滑动 加入动画
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
         //刷新collectionView
    [self.collectionView reloadData];
}
//返回这个UICollectionViewCell是否可以被选择
-(BOOL)collectionView:(UICollectionView*)collectionView shouldSelectItemAtIndexPath:(NSIndexPath*)indexPath{
    return YES;
}
#pragma mark --UICollectionViewDelegateFlowLayout
//定义每个UICollectionView 的大小
- (CGSize)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*)indexPath{
    
    LearningDetailModelLabTypeData *model = _modelLab.data[indexPath.row];
//这里用了 计算 字符串的长度 来获取宽度+标签两遍的宽度
    CGFloat labWith =  [NSString contentRect:model.value textFount:[UIFont systemFontOfSize:WidthScale(15)]].size.width + WidthScale(15);

    return CGSizeMake(labWith,HeightScale(30));
}

//定义每个UICollectionView 的边距
-(UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
//边距的顺序是 上左下右
  return UIEdgeInsetsMake(HeightScale(0),WidthScale(15),0,WidthScale(15));
}


- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

UICollectionViewCell.m 自定义试图:

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        [self setUI];
    }
    return self;
}
-(void)setModel:(LearningDetailModelLabTypeData *)model{
    
    self.tileLab.text = model.value;
//这里判断点中状态 改变标签的颜色
    if (model.isSelect) {
        
        [self labSelect];

    }else{
        
        [self labNoSelect];
    }
}
-(void)setUI{
//自定义标签
    [self.contentView addSubview:self.tileLab];
//约束
    [self.tileLab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(self);
        make.width.equalTo(self);
    }];
}
-(UILabel *)tileLab{
    
    if(!_tileLab){
        
        _tileLab = [[UILabel alloc]init];
        _tileLab.layer.masksToBounds = YES;
        _tileLab.layer.cornerRadius = WidthScale(3);
        _tileLab.textAlignment = NSTextAlignmentCenter;
        _tileLab.font = [UIFont systemFontOfSize:WidthScale(15)];
        _tileLab.backgroundColor = [UIColor myColorWithString:@"EEEEEE"];
        _tileLab.textColor = [UIColor myColorWithString:@"909090"];
    }
    return _tileLab;;
}
//选中改变颜色
-(void)labNoSelect{
    
    _tileLab.backgroundColor = [UIColor myColorWithString:@"EEEEEE"];
    _tileLab.textColor = [UIColor myColorWithString:@"909090"];
    
}
//选中改变颜色
-(void)labSelect{
    
    _tileLab.backgroundColor = [UIColor whiteColor];
    _tileLab.textColor = [UIColor myColorWithString:FF7];
}