iOS中UICollectionView横向滑动+点击悬浮Cell

前言

UICollectionView是苹果推出的可以根据自身需求高度定制化的滑动视图，功能比UITableView更强大，为什么说是高度定制化呢？因为你可以自定义UICollectionViewLayout来实现自己想要的布局方式，而我们常用的UICollectionViewFlowLayout其实是苹果官方自定义的继承UICollectionViewLayout的，只是给开发者提供他们封装好的、常用的布局方式。如果满足不了自己的实际需要，就要考虑自定义layout了。

最近在做版本迭代，有这样一个需求，其本质就是UICollectionView横向滑动，并且可以设置指定下标cell悬浮。当时准备了两种方案，
其一：UICollectionView横向滑动，创建一个和cell长得一样的View，根据偏移量来控制View的位置来达到虚假的悬浮效果。但是感觉这样有点low。
其二：就是利用UICollectionView的高度定制化布局，重写layout，这里直接重写继承UICollectionViewFlowLayout的layout即可。

自定义layout

直接上代码吧
重写的DDHorizontalSuspendingCellLayout.h

#import 

NS_ASSUME_NONNULL_BEGIN

@interface DDHorizontalSuspendingCellLayout : UICollectionViewFlowLayout

//悬浮cell的下标，这里默认只显示一个分区，所以用了NSInteger的下标而没有用NSIndexPath类型的下标（可以自行改动）
@property (nonatomic, assign) NSInteger index;
@end

NS_ASSUME_NONNULL_END

DDHorizontalSuspendingCellLayout.m

#import "DDHorizontalSuspendingCellLayout.h"

@interface DDHorizontalSuspendingCellLayout ()
@end

@implementation DDHorizontalSuspendingCellLayout

- (instancetype)init {
    if (self = [super init]) {
        _index = 0;
    }
    return self;
}


 // 指定新的区域的时候调用，返回指定区域的cell布局对象
- (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    //获取到父类所返回的数组（里面放的是当前屏幕所能展示的item的结构信息）
    NSArray *superAttrs = [super layoutAttributesForElementsInRect:rect];
    UICollectionViewLayoutAttributes *attri = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:self.index inSection:0]];
    CGPoint offset = self.collectionView.contentOffset;
    CGRect aRect = attri.frame;
    attri.zIndex = 1;
    if (offset.x >= attri.frame.origin.x) {
        aRect.origin.x = offset.x;
    }else if (offset.x + self.collectionView.frame.size.width - aRect.size.width <= aRect.origin.x) {
        aRect.origin.x = offset.x + self.collectionView.frame.size.width - attri.frame.size.width;
    }
    attri.frame = aRect;
    
    NSMutableArray * mArr = [superAttrs mutableCopy];
    if (attri && ![mArr containsObject:attri]) {
        [mArr addObject:attri];
    }
    return mArr;
}

//return YES;表示一旦滑动就实时调用上面这个layoutAttributesForElementsInRect:方法来获取当前屏幕上显示的item的布局信息
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    return YES;
}

@end

使用

DDViewController.h

#import 

NS_ASSUME_NONNULL_BEGIN

@interface DDViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

DDViewController.m

#import "DDViewController.h"
#import "DDHorizontalSuspendingCellLayout.h"

@interface DDViewController ()
@property (nonatomic, strong) DDHorizontalSuspendingCellLayout *layout;
@property (nonatomic, strong) UICollectionView *collectionView;
@end

@implementation DDViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor = [UIColor redColor];
    
    DDHorizontalSuspendingCellLayout *layout = [[DDHorizontalSuspendingCellLayout alloc] init];
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    layout.itemSize = CGSizeMake(100, 100);
    layout.minimumLineSpacing = 20;
    layout.minimumInteritemSpacing = 0;
//    layout.index = 1;
    self.layout = layout;
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 200) collectionViewLayout:layout];
    collectionView.backgroundColor = [UIColor whiteColor];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    collectionView.contentInset = UIEdgeInsetsMake(50, 0, 50, 0);
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];
    
    [self.view addSubview:collectionView];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 10;
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];
    cell.backgroundColor = [UIColor purpleColor];
    if (indexPath.row == self.layout.index) {
        cell.backgroundColor = [UIColor blueColor];
    }
    UILabel *lab = [cell viewWithTag:9999];
    if (!lab) {
        lab = [[UILabel alloc] init];
        lab.tag = 9999;
        lab.textColor = [UIColor whiteColor];
    }
    lab.text = [NSString stringWithFormat:@"第%ld个",indexPath.row];
    [lab sizeToFit];
    lab.center = cell.contentView.center;
    [cell addSubview:lab];
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    self.layout.index = indexPath.row;
    [collectionView reloadData];
    
    [collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:YES];
}
@end

运行效果

1.jpeg

2.jpeg