(2)iOS用UICollectionView实现Gallery效果

本文主要实现：

（1）用UICollectionView显示一组图片

（2）左右滑动来浏览所有图片

（3）图片自动对齐到网格（即滑动停止后中间的图片对齐到正中位置）

（4）中间图片始终放大显示。

效果如下图：





（1）先实现UICollectionView显示一组图片，方法看我的上一篇关于UICollection基本使用方法的Blog：UICollectionView的基本使用（1）

（2）使用UICollectionViewLayout来管理UICollectionView的视图。方法为新建一个继承UICollectionViewLayout的类，这里命名为LineLayout。

LineLayout.m完整代码为：

#import "LineLayout.h"

@implementation LineLayout
-(id)init{
    self = [super init];
    if (self) {
        self.scrollDirection = UICollectionViewScrollDirectionHorizontal;//设置为水平显示
        self.minimumLineSpacing = 30.0;//cell的最小间隔
    }
    return self;
}

-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
    //proposedContentOffset是没有设置对齐时本应该停下的位置（collectionView落在屏幕左上角的点坐标）
    CGFloat offsetAdjustment = MAXFLOAT;//初始化调整距离为无限大
    CGFloat horizontalCenter = proposedContentOffset.x + (CGRectGetWidth(self.collectionView.bounds) / 2.0);//collectionView落在屏幕中点的x坐标
    CGRect targetRect = CGRectMake(proposedContentOffset.x, 0.0, self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);//collectionView落在屏幕的大小
    NSArray* array = [super layoutAttributesForElementsInRect:targetRect];//获得落在屏幕的所有cell的属性
    
    //对当前屏幕中的UICollectionViewLayoutAttributes逐个与屏幕中心进行比较，找出最接近中心的一个
    for (UICollectionViewLayoutAttributes* layoutAttributes in array) {
        CGFloat itemHorizontalCenter = layoutAttributes.center.x;
        if (ABS(itemHorizontalCenter - horizontalCenter) < ABS(offsetAdjustment)) {
            offsetAdjustment = itemHorizontalCenter - horizontalCenter;
        }
    }
    //调整
    return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
}

/** 有效距离:当item的中间x距离屏幕的中间x在HMActiveDistance以内,才会开始放大, 其它情况都是缩小 */
static CGFloat const ActiveDistance = 60;
/** 缩放因素: 值越大, item就会越大 */
static CGFloat const ScaleFactor = 0.2;
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    CGRect visibleRect;
    visibleRect.origin = self.collectionView.contentOffset;
    visibleRect.size = self.collectionView.bounds.size;
    
    //遍历所有布局属性
    for (UICollectionViewLayoutAttributes* attributes in array) {
        //如果cell在屏幕上则进行缩放
        if (CGRectIntersectsRect(attributes.frame, rect)) {
            CGFloat distance = CGRectGetMidX(visibleRect) - attributes.center.x;//距离中点的距离
            CGFloat normalizedDistance = distance / ActiveDistance;
            if (ABS(distance) < ActiveDistance) {
                CGFloat zoom = 1 + ScaleFactor*(1 - ABS(normalizedDistance));
                attributes.transform3D = CATransform3DMakeScale(zoom, zoom, 1.0);
                attributes.zIndex = 1;
            }
        }
    }
    return array;
}

/**
 *  只要显示的边界发生改变就重新布局:
 内部会重新调用prepareLayout和layoutAttributesForElementsInRect方法获得所有cell的布局属性
 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

@end

（3）将步骤（2）中的LineLayout实例赋值给UICollectionView的collectionViewLayout.

ViewController.m完整代码（只是在上一篇吧blog中的viewDidLoad方法中加了两行代码）：

#import "ViewController.h"
#import "ACollectionViewCell.h"
#import "LineLayout.h"
int const cellCount = 40;
@interface ViewController ()
@property(nonatomic,strong)NSArray *imgArr;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    LineLayout *layout = [[LineLayout alloc]init];
    self.collectionView.collectionViewLayout = layout;
}

//图片懒加载
-(NSArray*)imgArr{
    if (!_imgArr) {
        NSMutableArray *muArr = [NSMutableArray array];
        for (int i = 0; i < cellCount; i++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i]];
            [muArr addObject:image];
        }
        _imgArr = muArr;
    }
    return _imgArr;
}

#pragma mark - UICollectionViewDataSource Delegate
#pragma mark cell的数量
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return cellCount;
}

#pragma mark cell的视图
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *cellIdentifier = @"CollectionViewCell";
    ACollectionViewCell *collectionViewCell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    collectionViewCell.layer.cornerRadius = 6.0f;
    
    collectionViewCell.image.image = [self.imgArr objectAtIndex:indexPath.row];
    collectionViewCell.title.text = [[NSString alloc] initWithFormat:@"图片%d",indexPath.row];
    return collectionViewCell;
}

#pragma mark cell的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(120, 140);
}

#pragma mark cell的点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"点击图片%d",indexPath.row);
}

@end

(4)运行测试，效果如下图：



本demo代码下载：http://download.csdn.net/detail/dolacmeng/8678473