本文主要实现:
(1)用UICollectionView显示一组图片
(2)左右滑动来浏览所有图片
(3)图片自动对齐到网格(即滑动停止后中间的图片对齐到正中位置)
(4)中间图片始终放大显示。
效果如下图:
(1)先实现UICollectionView显示一组图片,方法看我的上一篇关于UICollection基本使用方法的Blog:UICollectionView的基本使用(1)
(2)使用UICollectionViewLayout来管理UICollectionView的视图。方法为新建一个继承UICollectionViewFlowLayout的类,这里命名为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