欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-11-12 09:48:40
以前瀑布流的时候使用过uicollectionview,但是那时使用的是系统自带的uicollectionviewflowlayout布局,今天看文章,看到uicollec...

以前瀑布流的时候使用过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自定义UICollectionViewFlowLayout实现图片浏览效果

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