iOS使用UICollectionView实现横向滚动照片效果

// ViewController.m

// 下面使用到的宏和全局变量
#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height
static NSString *const cellID = @"cellID";

// 创建collectionView的代码
- (void)setupCollectionView
{
 // 使用系统自带的流布局（继承自UICollectionViewLayout）
 UICollectionViewFlowLayout *layout = ({
 UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
 // 每个cell的大小
 layout.itemSize   = CGSizeMake(180, 180);
 // 横向滚动
 layout.scrollDirection  = UICollectionViewScrollDirectionHorizontal;
 // cell间的间距
 layout.minimumLineSpacing  = 40;

 //第一个cell和最后一个cell居中显示（这里我的Demo里忘记改了我用的是160，最后微调数据cell的大小是180）
 CGFloat margin = (ScreenW - 180) * 0.5;
 layout.sectionInset  = UIEdgeInsetsMake(0, margin, 0, margin);

 layout;
 });

 // 使用UICollectionView必须设置UICollectionViewLayout属性
 UICollectionView *collectionView = ({
 UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
 collectionView.center  = self.view.center;
 collectionView.bounds  = CGRectMake(0, 0, ScreenW, 200);
 collectionView.backgroundColor = [UIColor brownColor];
 // 这里千万记得在interface哪里写<UICollectionViewDataSource>！！！
 collectionView.dataSource = self;
 [collectionView setShowsHorizontalScrollIndicator:NO];

 [self.view addSubview:collectionView];

 collectionView;
 });

 // 实现注册cell，其中PhotoCell是我自定义的cell，继承自UICollectionViewCell
 UINib *collectionNib = [UINib nibWithNibName:NSStringFromClass([PhotoCell class])
      bundle:nil];
 [collectionView registerNib:collectionNib
 forCellWithReuseIdentifier:cellID];
}

// UICollectionViewCellDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView
 numberOfItemsInSection:(NSInteger)section
{
 return 10;
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
    cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
 PhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID 
    forIndexPath:indexPath];

 // 图片名是 0 ~ 9
 cell.imageName = [NSString stringWithFormat:@"%ld", (long)indexPath.row];

 return cell;
}

// 界面是一个xib文件，在cell里拖了个ImageView，约束上下左右都是10
// 图片名是数字 0 ~ 9

// PhotoCell.h
@property (nonatomic, strong) NSString *imageName;

// PhotoCell.m
@interface PhotoCell ()

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation PhotoCell

- (void)awakeFromNib {
 [super awakeFromNib];
 // Initialization code
}

- (void)setImageName:(NSString *)imageName
{
 _imageName = imageName;

 self.imageView.image = [UIImage imageNamed:imageName];
}

// MyFlowLayout.h
#import <UIKit/UIKit.h>

// 注意！继承自UICollectionViewFlowLayout，因为它继承自UICollectionViewLayout。
@interface TWLayout : UICollectionViewFlowLayout

// MyFlowLayout.m

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
 return YES;
}



- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
 // 获取collectionView的宽带
 CGFloat collectionW = self.collectionView.bounds.size.width;

 // 获取布局属性数组
 NSArray<UICollectionViewLayoutAttributes *> *attrs = [super layoutAttributesForElementsInRect:self.collectionView.bounds];
 for (int i = 0; i < attrs.count; i++) {
 UICollectionViewLayoutAttributes *attr = attrs[i];

 //每个显示的cell距离中心距离
 CGFloat margin = fabs((attr.center.x - self.collectionView.contentOffset.x) - collectionW * 0.5);

 // 缩放比例：(margin / (collectionW * 0.5))得出的结论相当于 0 ~ 1。而我们需要它的缩放比例是 1 ~ 0.65，这样就是 （1 - 0）~（1 - 0.35）
 CGFloat scale = 1 - (margin / (collectionW * 0.5)) * 0.35;

 attr.transform = CGAffineTransformMakeScale(scale, scale);
 }

 return attrs;
}



- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
 // 获取collectionView的宽度
 CGFloat collectionW = self.collectionView.bounds.size.width;
 // 获取当前的内容偏移量
 CGPoint targetP = proposedContentOffset;

 // 获取显示cell的布局属性数组，横向滚动，所以只用考虑横向的x和width，纵向不用考虑
 NSArray *attrs = [super layoutAttributesForElementsInRect:CGRectMake(targetP.x, 0, collectionW, MAXFLOAT)];

 // 距离中心点最近的cell的间距（中间那个cell距离最近，值可正可负）
 CGFloat minSpacing = MAXFLOAT;
 for (UICollectionViewLayoutAttributes *attr in attrs) {
 // 距离中心点的偏移量
 CGFloat centerOffsetX = attr.center.x - targetP.x - collectionW * 0.5;
 // fabs()：CGFloat绝对值
 if (fabs(centerOffsetX) < fabs(minSpacing)) {
  minSpacing = centerOffsetX;
 }
 }
 targetP.x += minSpacing;

 return targetP;
}