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

运行结果：

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