iOS 사용자 정의 UICollection View FlowLayout 이미지 탐색 효과 구현

예전 에 폭포 흐름 때 UICollectionView 를 사 용 했 지만 그 때 는 시스템 자체 의 UICollectionView FlowLayout 레이아웃 을 사 용 했 습 니 다.오늘 은 글 을 보면 UICollectionView FlowLayout 사용자 정의 와 관련 된 것 을 볼 수 있 습 니 다.그래서 간단 한 그림 탐색 데 모 를 써 서 UICollectionView FlowLayout 사용자 정의 레이아웃 을 능숙 하 게 만 들 었 습 니 다.

#import <UIKit/UIKit.h>

@interface JWCollectionViewFlowLayout : UICollectionViewFlowLayout

@end

사용자 정의 UICollectionView FlowLayout,먼저 UICollectionView FlowLayout 를 계승 하여 몇 가지 방법 을 실현 합 니 다.

#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
실행 결과:

이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.