1.程序运行效果
2.项目结构
3.代码
//
// YFViewController.m
// 02-相册
//
// Created by YF on 16/3/7.
// Copyright © 2016年 YF. All rights reserved.
//
#import "YFViewController.h"
#import "YFPhotoFlowLayout.h"
#import "YFPhotoCell.h"
@interface YFViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property(nonatomic,strong)NSMutableArray *dataArray;
@end
static NSString *photoCellID = @"photoID";
@implementation YFViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self setupUI];
}
//初始化界面
-(void)setupUI
{
//1.创建自定义的流水布局
YFPhotoFlowLayout *photoFlowLayout = [[YFPhotoFlowLayout alloc]init];
//2.创建 视图
CGRect frame = CGRectMake(0,200, self.view.frame.size.width, 300);
UICollectionView *contentView = [[UICollectionView alloc]initWithFrame:frame collectionViewLayout:photoFlowLayout];
contentView.delegate = self;
contentView.dataSource = self;
[self.view addSubview:contentView];
//3.注册才 cell;
[contentView registerNib:[UINib nibWithNibName:NSStringFromClass([YFPhotoCell class]) bundle:nil] forCellWithReuseIdentifier:photoCellID];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
#pragma 代理方法
//多少组
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
//每组多少行
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.dataArray.count;
}
//cell 的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
YFPhotoCell *photocell = [collectionView dequeueReusableCellWithReuseIdentifier:photoCellID forIndexPath:indexPath];
photocell.image = self.dataArray[indexPath.row];
return photocell;
}
-(NSMutableArray *)dataArray
{
if (_dataArray == nil) {
_dataArray = [NSMutableArray array];
for (int i = 0; i<9; i++) {
UIImage *image = [UIImage imageNamed:@"zilong"];
[_dataArray addObject:image];
}
}
return _dataArray;
}
@end
//
// YFPhotoFlowLayout.m
// 02-相册
//
// Created by YF on 16/3/7.
// Copyright © 2016年 YF. All rights reserved.
//
#import "YFPhotoFlowLayout.h"
@implementation YFPhotoFlowLayout
-(instancetype)init
{
if (self = [super init]) {
}
return self;
}
//返回每个 item 的布局样式
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray<UICollectionViewLayoutAttributes *> *superAttrubutes = [super layoutAttributesForElementsInRect:rect];
//获取屏幕的中心的 x
CGFloat screenCenterX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
for (UICollectionViewLayoutAttributes *attribute in superAttrubutes) {
//计算每个 item 距离 屏幕中心的 间距
CGFloat deltaX = ABS(screenCenterX - attribute.center.x);
//修改每个 item 的属性
CGFloat scaleDelta = 1.2 - deltaX / ((self.collectionView.frame.size.width + attribute.size.width) /2)*0.5;
attribute.transform = CGAffineTransformMakeScale(scaleDelta, scaleDelta);
}
return superAttrubutes;
}
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
CGRect visibleRect = CGRectZero;
visibleRect.origin = proposedContentOffset;
visibleRect.size = self.collectionView.frame.size;
NSArray<UICollectionViewLayoutAttributes *> *superAttrubutes = [super layoutAttributesForElementsInRect:visibleRect];
//获取屏幕的中心的 x
CGFloat screenCenterX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrobute in superAttrubutes) {
CGFloat deltax = attrobute.center.x - screenCenterX;
if (ABS(minDelta) > ABS(deltax)) {
minDelta = deltax;
}
}
return CGPointMake(proposedContentOffset.x + minDelta, proposedContentOffset.y);
}
//当可视区域改变的时候,刷新布局
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
//页面即将刷新时候调用
-(void)prepareLayout
{
[super prepareLayout];
/**
* 设置item 的大小
*/
CGFloat itemHeight = self.collectionView.frame.size.height * 0.8;
CGFloat itemWidth = self.collectionView.frame.size.height * 0.6;
self.itemSize = CGSizeMake(itemWidth, itemHeight);
//设置滚动方向
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
//设置内边距
CGFloat margin = (self.collectionView.frame.size.width - itemWidth)/2;
self.sectionInset = UIEdgeInsetsMake(0, margin, 0, margin);
}
@end
//
// YFPhotoCell.m
// 02-相册
//
// Created by YF on 16/3/7.
// Copyright © 2016年 YF. All rights reserved.
//
#import "YFPhotoCell.h"
@interface YFPhotoCell()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@end
@implementation YFPhotoCell
-(void)setImage:(UIImage *)image
{
_image = image;
self.imageView.image = image;
}
@end