iOS自定义UICollectionViewFlowLayout实现图片浏览效果

 更新时间:2016年03月22日 11:47:45   作者:jiangamh  
这篇文章主要介绍了iOS自定义UICollectionViewFlowLayout实现图片浏览效果的相关资料,需要的朋友可以参考下

以前瀑布流的时候使用过UICollectionView,但是那时使用的是系统自带的UICollectionViewFlowLayout布局,今天看文章,看到UICollectionViewFlowLayout自定义相关的东西,于是动手写了一个简单图片浏览的demo,熟练一些UICollectionViewFlowLayout自定义布局。

#import <UIKit/UIKit.h>

@interface JWCollectionViewFlowLayout : UICollectionViewFlowLayout

@end

自定义UICollectionViewFlowLayout,首先继承UICollectionViewFlowLayout,实现一下几个方法

#define screenWidth [UIScreen mainScreen].bounds.size.width

#define MaxChangeRange 100

#import "JWCollectionViewFlowLayout.h"

@implementation JWCollectionViewFlowLayout

-(void)prepareLayout
{
 self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
 self.itemSize = CGSizeMake(300, 500);
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
 return YES;
}

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
 NSArray *array = [super layoutAttributesForElementsInRect:rect];

 CGRect visibleRect = CGRectMake(self.collectionView.contentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);
 for (UICollectionViewLayoutAttributes *attr in array)
 {
  if (CGRectIntersectsRect(attr.frame, rect)) {

   BOOL isAtRight = YES;
   CGFloat distance = (attr.center.x - CGRectGetMidX(visibleRect));
   if (distance<0) {
    distance = -distance;
    isAtRight = NO;
   }
   CGFloat precent ;
   if (distance < 180)
   {
    precent = 1.0;
   }
   else
   {
    precent = ((screenWidth / 2) - distance) / (screenWidth / 2);
   }
   CATransform3D transform = CATransform3DIdentity;
   transform.m34 = 1.0 / 600;

   if (precent < 0.5) {
    precent = 0.5;
   }
   transform = CATransform3DScale(transform, 1, precent, 1);
   CGFloat p = isAtRight?M_PI_4:-M_PI_4;
   transform = CATransform3DRotate(transform, p * (1 - precent), 0, 1, 0);
   attr.transform3D = transform;
   attr.zIndex = 1;
   attr.alpha = precent; 
  }
 }

 return array;
}

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
 CGFloat offset = MAXFLOAT;

 CGFloat hCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);

 CGRect currentRect = CGRectMake(proposedContentOffset.x, 0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);

 NSArray* array = [super layoutAttributesForElementsInRect:currentRect];
 for (UICollectionViewLayoutAttributes* layoutAttributes in array)
 {
  CGFloat itemHorizontalCenter = layoutAttributes.center.x;
  if (ABS(itemHorizontalCenter - hCenter) < ABS(offset))
  {

   offset = itemHorizontalCenter - hCenter;
  }
 }

 return CGPointMake(proposedContentOffset.x + offset, proposedContentOffset.y);
}

使用

-(void)setupUI
{

 JWCollectionViewFlowLayout *flowLayout = [[JWCollectionViewFlowLayout alloc] init];
 UICollectionView *imgBrowseView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
 imgBrowseView.dataSource = self;
 imgBrowseView.delegate = self;
 imgBrowseView.backgroundColor = [UIColor whiteColor];
 [self.view addSubview:imgBrowseView];
 _imgBrowseView = imgBrowseView;

 [self.imgBrowseView registerNib:[UINib nibWithNibName:@"CustumCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"cell"];
}

demo:https://github.com/jiangtaidi/JWImageBrowseDemo.git

运行结果:

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

相关文章

  • iOS仿网易简单头部滚动效果

    iOS仿网易简单头部滚动效果

    这篇文章主要为大家详细介绍了iOS仿网易简单头部滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • iOS动画之向右拉的抽屉3D效果

    iOS动画之向右拉的抽屉3D效果

    首先说下,其实一切的动画都是假象,3D效果也是这样.本篇我们来做一个这样的特效.来跟着小编一起学习学习。
    2016-08-08
  • iOS图片放大的方式(transform和frame)

    iOS图片放大的方式(transform和frame)

    这篇文章主要介绍了iOS图片放大的两种方式,transform方式放大图片,从中心开始放大,另一种用frame改变宽高,详细内容请参考下文
    2016-04-04
  • iOS应用设计模式开发中职责链(责任链)模式的实现解析

    iOS应用设计模式开发中职责链(责任链)模式的实现解析

    这篇文章主要介绍了iOS应用设计模式开发中职责链模式的相关实现解析,示例代码为传统的Objective-C,需要的朋友可以参考下
    2016-03-03
  • iOS给密码进行加密的方法

    iOS给密码进行加密的方法

    这篇文章主要介绍了iOS给密码进行加密的方法,需要的朋友可以参考下
    2017-06-06
  • IOS之UIWebView的使用(基本知识)

    IOS之UIWebView的使用(基本知识)

    在Android开发中有WebView作为混合模式开发的桥梁,当然在IOS中也同样有一个 UIWebView 组件来作为混合模式开发的桥梁,那么下面就对UIWebView的一些基本知识详解一下
    2016-02-02
  • iOS实现无感知上拉加载更多功能的思路与方法

    iOS实现无感知上拉加载更多功能的思路与方法

    下拉刷新和上拉加载更多功能是一个应用非常广泛的一个效果,最新项目中就遇到这个功能,这篇文章主要给大家介绍了关于iOS实现无感知上拉加载更多功能的思路与方法,需要的朋友可以参考下
    2021-07-07
  • iOS使用Target如何快速科学的区分开发环境详解

    iOS使用Target如何快速科学的区分开发环境详解

    这篇文章主要给大家介绍了关于iOS使用Target如何快速科学的区分开发环境的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • IOS 波纹进度(waveProgress)动画实现

    IOS 波纹进度(waveProgress)动画实现

    这篇文章主要介绍了IOS 纹进度(waveProgress)动画实现的相关资料,需要的朋友可以参考下
    2016-09-09
  • iOS实现3D卡片式轮播效果

    iOS实现3D卡片式轮播效果

    这篇文章主要为大家详细介绍了iOS实现3D卡片式轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论