iOS UICollectionView: The Complete Guide摘要

本文的内容来自iOS UICollectionView: The Complete Guide, Second Edition。文章对应的源码可以再http://ashfurrow.com/uicollectionview-the-complete-guide/处下载。

iOS UICollectionView: The Complete Guide摘要

基本

selected、highlighted的理解

cell有两个重要的bool属性：selected和highlighted。highlighted完全由用户的交互决定，当用户的手指按下一个cell时，它就自动的变成highlighted。如果cell支持selection，当用户抬起他的手指，cell就变成selected。cell会保持selected，直到你写的一些代码使它unselected或者用户再次点击它。UICollectionViewCell的层级关系如下所示：



backgroundView如果被设置，就会永久的显示。当cell被selected，selectedBackgroundView就会被添加到view的层级中，当cell变成unselected，它就会被移除。

下面通过例子说明。通过如下代码来允许多选：

self.collectionView.allowsMultipleSelection = YES;

通过设置selectedBackgroundView来设置selected的背景view。重写setHighlighted来设置highlighted的样式。自定义的UICollectionViewCell如下：

@interface AFCollectionViewCell : UICollectionViewCell

@property (nonatomic, strong) UIImage *image;

@end

@implementation AFCollectionViewCell
{
UIImageView *imageView;
}

- (id)initWithFrame:(CGRect)frame
{
if (!(self = [super initWithFrame:frame])) return nil;

self.backgroundColor = [UIColor whiteColor];

imageView = [[UIImageView alloc] initWithFrame:CGRectInset(self.bounds, 10, 10)];
[self.contentView addSubview:imageView];

UIView *selectedBackgroundView = [[UIView alloc] initWithFrame:CGRectZero];
selectedBackgroundView.backgroundColor = [UIColor colorWithWhite:1.0f alpha:0.8f];
self.selectedBackgroundView = selectedBackgroundView;

return self;
}

#pragma mark - Overriden UICollectionViewCell methods

-(void)prepareForReuse
{
[super prepareForReuse];

self.backgroundColor = [UIColor whiteColor];
self.image = nil; //also resets imageView’s image
}

-(void)setHighlighted:(BOOL)highlighted
{
[super setHighlighted:highlighted];

if (self.highlighted)
{
imageView.alpha = 0.8f;
}
else
{
imageView.alpha = 1.0f;
}
}

#pragma mark - Overridden Properties

-(void)setImage:(UIImage *)image
{
_image = image;

imageView.image = image;
}

运行的效果如下：

Supplementary Views

Supplementary views 是指和cell一起滚动并显示某些信息的view

Supplementary views的显示的内容由数据源提供，但由

UICollectionViewLayout

对象布局

内置的

UICollectionViewFlowLayout

提供了两种类型的Supplementary views：header和footer。

Supplementary views的行为与cell类似，collection view注册一个

Class

或者

UINib

，Supplementary views会被复用

如下，注册一个

header

：

[surveyCollectionView registerClass:[AFCollectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:HeaderIdentifier];

除此之外，还需要给Supplementary views指定一个大小

如下，通过flow layout的

headerReferenceSize

指定header大小：

surveyFlowLayout.headerReferenceSize = CGSizeMake(60, 50);

需要注意的是：当水平滚动时，使用的是

CGSize

的

width

，而header的垂直方向会被拉伸，填满整个空间。当垂直滚动时，使用的是

CGSize

的

height

，header水平方向填满整个区域，示意如下：



之后，实现

UICollectionViewDelegate

的

collectionView:viewForSupplementaryElementOfKind:

atIndexPath:

方法，即可显示Supplementary views ，如下：

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
//Provides a view for the headers in the collection view

AFCollectionHeaderView *headerView = (AFCollectionHeaderView *)[collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:HeaderIdentifier forIndexPath:indexPath];
......
}

用户交互

一些常用的代理方法：

选择cell

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

修改collection view的内容

insertSections:
deleteSections:
reloadSections:
moveSection:toSection:
insertItemsAtIndexPaths:
deleteItemsAtIndexPaths:
reloadItemsAtIndexPaths:
moveItemAtIndexPath:toIndexPath:

自定义selection行为

collectionView:shouldHighlightItemAtIndexPath:
collectionView:shouldSelectItemAtIndexPath:
collectionView:shouldDeselectItemAtIndexPath:

支持Cut/Copy/Paste

如下的例子，使

collection view

的cell支持

copy

1.使

collection view

支持menu

-(BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}

2.

collection view

会询问代理对象，支持的action的类型。目前有

cut:

copy:

和

paste:

如下，支持copy

-(BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender
{
if ([NSStringFromSelector(action) isEqualToString:@"copy:"])
{
return YES;
}

return NO;
}

3.执行action对应的操作

如下，执行copy操作

-(void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender
{
if ([NSStringFromSelector(action) isEqualToString:@"copy:"])
{
UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
[pasteboard setString:[[self photoModelForIndexPath:indexPath] name]];
}
}