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

时间:2021-6-12 作者:qvyue

前言

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 *)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 

使用

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

运行效果

iOS中UICollectionView横向滑动+点击悬浮Cell
1.jpeg
iOS中UICollectionView横向滑动+点击悬浮Cell
2.jpeg
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。