iOS自定義UICollectionViewFlowLayout實現(xiàn)圖片瀏覽效果
以前瀑布流的時候使用過UICollectionView,但是那時使用的是系統(tǒng)自帶的UICollectionViewFlowLayout布局,今天看文章,看到UICollectionViewFlowLayout自定義相關的東西,于是動手寫了一個簡單圖片瀏覽的demo,熟練一些UICollectionViewFlowLayout自定義布局。
#import <UIKit/UIKit.h> @interface JWCollectionViewFlowLayout : UICollectionViewFlowLayout @end
自定義UICollectionViewFlowLayout,首先繼承UICollectionViewFlowLayout,實現(xiàn)一下幾個方法
#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應用設計模式開發(fā)中職責鏈(責任鏈)模式的實現(xiàn)解析
這篇文章主要介紹了iOS應用設計模式開發(fā)中職責鏈模式的相關實現(xiàn)解析,示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03
iOS使用Target如何快速科學的區(qū)分開發(fā)環(huán)境詳解
這篇文章主要給大家介紹了關于iOS使用Target如何快速科學的區(qū)分開發(fā)環(huán)境的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
IOS 波紋進度(waveProgress)動畫實現(xiàn)
這篇文章主要介紹了IOS 紋進度(waveProgress)動畫實現(xiàn)的相關資料,需要的朋友可以參考下2016-09-09

