ios UICollectionView怎么实现图片浏览效果

本篇内容主要讲解“iosUICollectionView怎么实现图片浏览效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“iosUICollectionView怎么实现图

本篇内容主要讲解“ios UICollectionView怎么实现图片浏览效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ios UICollectionView怎么实现图片浏览效果”吧!

    一、效果展示

    ios UICollectionView怎么实现图片浏览效果

    二、实现思路

    1.封装 UICollectionViewLayout ,实现内部 UICollectionViewCell 的布局。

    UICollectionViewLayout 在封装瀑布流的时候会用到,而且担负着核心功能的实现。其实从另一个角度也可以把 UICollectionViewLayout 理解成“数据源”,这个数据不是 UI 的展示项,而是 UI 的尺寸项。在内部进行预计算 UICollectionViewCell 的 frame。

    UICollectionView 是 UIScrollView的子类,只不过,它里面子控件通过“重用”机制实现了优化,一些复用的复杂逻辑还是扔给了系统处理。开发过程中只负责对 UICollectionViewLayout 什么时候需要干什么进行自定义即可。

    2.获取 UICollectionView 目前可见的 cells,通过进行缩放、旋转变换实现一些简单的效果。

    3、自定义 cell ,修改锚点属性。

    三、代码整理

    1、PhotoBrowseViewLayout

    这里有一点需要注意的,在 UICollectionViewLayout 内部会进行计算每一个 cell 的 frame,在计算过程中,为了更好的展示旋转变换,cell 的锚点会修改到 (0.5,1),那么,为了保证 UI 展示不变,那么,就需要将 y 增加 cell 高度的一半。

    #import "PhotoBrowseViewLayout.h"
    @interface PhotoBrowseViewLayout()
    @property(nonatomic,strong) NSMutableArray * attributeArray;
    @property(nonatomic,assign) CGFloat cellWidth;
    @property(nonatomic,assign) CGFloat cellHeight;
    @property(nonatomic,assign) CGFloat sep;
    @property(nonatomic,assign) int showCellNum;
    @end
    @implementation PhotoBrowseViewLayout
    - (instancetype)init
    {
        if (self = [super init]) {
            self.sep = 20;
            self.showCellNum = 2;
        }
        return self;
    }
    //计算cell的frame
    - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        if (self.cellWidth == 0) {
            self.cellWidth = **self**.collectionView.frame.size.width * 2 / 3.0;
        }
        if (self.cellHeight == 0) {
            self.cellHeight = self.collectionView.frame.size.height;
        }
        CGFloat x = (self.cellWidth + self.sep) * indexPath.item;
        //这里y值需要进行如此设置,以抵抗cell修改锚点导致的UI错乱
        CGFloat y = self.collectionView.frame.size.height / 2.0;
        UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        attrs.frame = CGRectMake(x, y, self.cellWidth, self.cellHeight);
        return attrs;
    }
    //准备布局
    - (void)prepareLayout
    {
        [super prepareLayout];
        NSInteger count = [self.collectionView numberOfItemsInSection:0];
        for (int i = 0; i <count; i++) {
            UICollectionViewLayoutAttributes *attris = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
            [self.attributeArray addObject:attris];
        }
    }
    //返回全部cell的布局集合
    - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
    {
        return self.attributeArray;
    }
    //一次性提供UICollectionView 的 contentSize
    - (CGSize)collectionViewContentSize
    {
        NSInteger count = [self.collectionView numberOfItemsInSection:0];
        CGFloat maxWidth = count * self.cellWidth + (count - 1) * self.sep;
        return CGSizeMake(maxWidth, 0);
    }
    - (NSMutableArray *)attributeArray
    {
        if (!_attributeArray) {
            _attributeArray = [[NSMutableArray alloc] init];
        }
        return _attributeArray;
    }
    @end

    2、PhotoBrowseCollectionViewCell

    这里主要是进行了锚点修改(0.5,1),代码很简单。

    #import "PhotoBrowseCollectionViewCell.h"
    @interface PhotoBrowseCollectionViewCell()
    @property(nonatomic,strong) UIImageView * imageView;
    @end
    @implementation PhotoBrowseCollectionViewCell
    - (instancetype)initWithFrame:(CGRect)frame
    {
        if (self = [super initWithFrame:frame]) {
            //设置(0.5,1)锚点,以底部中点为轴旋转
            self.layer.anchorPoint = CGPointMake(0.5, 1);
            self.layer.masksToBounds = YES;
            self.layer.cornerRadius = 8;
        }
        return self;
    }
    - (void)setImage:(UIImage *)image
    {
        self.imageView.image = image;
    }
    - (UIImageView *)imageView
    {
        if (!_imageView) {
            _imageView = [[UIImageView alloc] init];
            _imageView.contentMode = UIViewContentModeScaleAspectFill;
            _imageView.backgroundColor = [UIColor groupTableViewBackgroundColor];
            [self.contentView addSubview:_imageView];
        }
        return _imageView;
    }
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        self.imageView.frame = **self**.contentView.bounds;
    }
    @end

    3、CollectPhotoBrowseView

    CollectPhotoBrowseView 负责进行一些 cell 的图形变换。

    #import "CollectPhotoBrowseView.h"
    #import "PhotoBrowseCollectionViewCell.h"
    #import "PhotoBrowseViewLayout.h"
    @interface CollectPhotoBrowseView()<UICollectionViewDelegate,UICollectionViewDataSource>
    @property(nonatomic,strong) UICollectionView * photoCollectView;
    @end
    @implementation CollectPhotoBrowseView
    - (instancetype)initWithFrame:(CGRect)frame
    {
        if (self = [super initWithFrame:frame]) {
            [self makeUI];
        }
        return self;
    }
    - (void)makeUI{
        //设置自定义 UICollectionViewLayout
        PhotoBrowseViewLayout * photoBrowseViewLayout = [[PhotoBrowseViewLayout alloc] init];
        self.photoCollectView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:photoBrowseViewLayout];
        self.photoCollectView.delegate = self;
        self.photoCollectView.dataSource = self;
        [self.photoCollectView registerClass:[PhotoBrowseCollectionViewCell class] forCellWithReuseIdentifier:@"CELL"];
        self.photoCollectView.showsHorizontalScrollIndicator = NO;
        [self addSubview:self.photoCollectView];
        //执行一次可见cell的图形变换
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self visibleCellTransform];
        });
    }
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
    {
        return 20;
    }
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
        PhotoBrowseCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL" forIndexPath:indexPath];
        [cell setImage: [UIImage imageNamed:[NSString stringWithFormat:@"fd%ld",indexPath.item % 3 + 1]]];
        return cell;
    }
    #pragma mark - 滚动进行图形变换
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        //滑动的时候,动态进行cell图形变换
        [self visibleCellTransform];
    }
    #pragma mark - 图形变化
    - (void)visibleCellTransform
    {
        //获取当前可见cell的indexPath集合
        NSArray * visibleItems =  [self.photoCollectView indexPathsForVisibleItems];
        //遍历动态进行图形变换
        for (NSIndexPath * visibleIndexPath in visibleItems) {
            UICollectionViewCell * visibleCell = [self.photoCollectView cellForItemAtIndexPath:visibleIndexPath];
            [self transformRotateWithView:visibleCell];
        }
    }
    //进行图形转换
    - (void)transformRotateWithView:(UICollectionViewCell *)cell
    {
        //获取cell在当前视图的位置
        CGRect rect = [cell convertRect:cell.bounds toView:self];
        //计算当前cell中轴线与中轴线的距离的比值
        float present = ((CGRectGetMidX(rect) - self.center.x) / (self.frame.size.width / 2.0));
        //根据位置设置选择角度
        CGFloat radian = (M_PI_2 / 15) * present;
        //图形角度变换
        CGAffineTransform transformRotate = CGAffineTransformIdentity;
        transformRotate = CGAffineTransformRotate(transformRotate, radian);
        //图形缩放变换
        CGAffineTransform transformScale = CGAffineTransformIdentity
        transformScale = CGAffineTransformScale(transformScale,1 -  0.2 *  fabs(present),1 - 0.2 * fabsf(present));
        //合并变换
        cell.transform = CGAffineTransformConcat(transformRotate,transformScale);
    }
    @end

    到此,相信大家对“ios UICollectionView怎么实现图片浏览效果”有了更深的了解,不妨来实际操作一番吧!这里是恰卡网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
    开发者

    Android Studio怎么实现简单补间动画

    2022-8-3 21:08:31

    开发者

    Go语言实现超时的方法有哪些

    2022-8-3 21:09:12

    搜索