由于UICollectionView功能比较强大,上一篇中对UICollectionView进行了讲解,并给出了一个简单的例子,但是还不足以体现出UICollectionView的强大,在此,继续深入学习了一下UICollectionView的高级功能,顺与大家分享一下心得。
本示例参考了苹果的WWDC2012,小弟在此模仿了一下,仅起抛砖引玉的作用,UICollectionView更强悍的Layout还等待你的探索
【苹果把PSCollectionView剽窃了一回。那我也抄袭苹果的Demo一回】
下面再看看Demo运行的效果图,通过这样的一个Demo,我们可以看出,使用UICollectionView可以很方便的制作出照片浏览等应用。并且需要开发者写的代码也不多。
程序刚刚启动时,已经默认加载了20个cell
当点击程序的非cell位置,程序会自动的添加图片到UICollectionView中
当点击UICollectionView中的某个cell,则该cell从UICollectionView中移除
下面我也把相关的代码贴出来,代码文件的目录如下图所示
从上图,可以看到这个Demo有8个关键文件,下面分别对其进行介绍。
1、AppDelegate介绍
2、ViewController介绍
3、Cell介绍
4、CircleLayout介绍【在UICollectionView中,Layout非常重要】
一、AppDelegate介绍
在AppDelegate的方法didFinishLaunchingWithOp
self.viewController = [[ViewController alloc] initWithCollectionViewLa
//
//
//
//
//
//
//
#import
@class ViewController;
@interface AppDelegate : UIResponder <</SPAN>UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) ViewController *viewController;
@end
//
//
//
//
//
//
//
#import "AppDelegate.h"
#import "ViewController.h"
#import "CircleLayout.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOp
{
}
@end
二、ViewController介绍
ViewController是继承自UICollectionViewControll
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;
并且给collectionView添加了Tap手势识别功能,以便用户在Tap的时候,对item进行相应的添加和删除功能。
//
//
//
//
//
//
//
#import
@interface ViewController : UICollectionViewControll
@property (nonatomic, assign) NSInteger cellCount;
@end
//
//
//
//
//
//
//
#import "ViewController.h"
#import "Cell.h"
@implementation ViewController
-(void)viewDidLoad
{
}
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;
{
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;
{
}
- (void)handleTapGesture:(UITapGestureRecognizer *)sender {
}
@end
三、Cell介绍
在此自定义了一个简单的cell:继承自UICollectionViewCell。
当item在collection view的可视范围内时,UICollectionViewCell负责显示单个item数据的内容,你可以通过as-is关系来使用它,当然,也可以继承(subclass)自它,以添加一些额外的属性和方法。cell的layout和显示是有collection view管理的,并且cell与layout对象相互对应。
在这里,我使用继承(subclass)机制,来给cell添加了一个UIImageView,用来显示一副图片。代码很简单,看下面的具体时间即可。在.m文件里面对UIImageView进行了圆角处理。
//
//
//
//
//
//
//
#import
@interface Cell : UICollectionViewCell
@property (strong, nonatomic) UIImageView* imageView;
@end
//
//
//
//
//
//
//
#import "Cell.h"
@implementation Cell
- (id)initWithFrame:(CGRect)frame
{
//
//
//
//
//
}
@end
四、CircleLayout介绍【在UICollectionView中,Layout非常重要】
CircleLayout继承自UICollectionViewLayout,在这里先简单介绍一下UICollectionViewLayout
UICollectionViewLayout类是一个抽象基类,通过继承它以生成collection view的layout信息。layout对象的职责就是决定collection view中cells,supplementary views和decoration views的位置,当collection view请求这些信息时,layout对象会提供给collection view。collection view就使用laout对象提供的信息把相关的view显示在屏幕上。
注意:要使用UICollectionViewLayout必须先子类化它
子类化时需要注意的事项:
layout对象不负责创建views,它只提供layout(布局),view的创建是在collection view的data source中。layout对象定义了view的位置和size等布局属性。
collection view有三种可视元素需要layout:
Cells:cells是layout管理的主要元素。每一个cell代表了collection view中的单个数据item。一个collection view可以把cell放到一个section中,也可以把cell分为多个section。layout的主要职责就是组织collection view的cells。
Supplementary views:supplementary view也显示数据,但是与cells不同。并不像cell,supplementary view不可以被用户选择。相反,可以使用supplementary view来给一个section实现类似页眉和页脚,当然不仅仅是section,也可以是整个collection view。supplementary view是可选的,并且他们的使用和位置是由layout对象定义的。
Decoration views:decoration view是用于装饰的,不可以被用户选择,并且它的相关数据没有与collection view绑定。decoration view是另外一种supplementary view。类似supplementary view,decoration view也是可选的,,并且他们的使用和位置是由layout对象定义的。
collection view会在许多不同时间里面,请求这些元素的layout对象以获得相关 layout信息。每一个出现在屏幕中的cell和view的位置是有layout对象提供的。类似的,每次从collection view中插入或者删除item,相应的layout也会被添加或者移除。当然,collection view总是会限制layout对象数目:即只针对屏幕的可视范围。
需要重载的方法
每个layout对象都需要实现下面的方法:
collectionViewContentSiz
shouldInvalidateLayoutFo
layoutAttributesForEleme
layoutAttributesForItemA
layoutAttributesForSuppl
layoutAttributesForDecor
这些方法具体作用,可以查阅相关的sdk即可知晓。
当collection view中的数据发生了改变,如插入或删除item,那么collection view会请求这些item的layout对象,以更新layout信息。特别是,任意的item被移动,添加或者删除了,必须要有它相关的layout信息来更新相关的新位置。对于移动一个items,collection view会使用标准的方法来检索item的layout属性。对于item的插入和删除,collection view会调用一些不同的方法,你应该重载这些方法,以提供相关的layout信息:
initialLayoutAttributesF
initialLayoutAttributesF
finalLayoutAttributesFor
finalLayoutAttributesFor
下面的代码中就是使用到了item的插入和删除。所以重载了下面两个方法:
initialLayoutAttributesF
finalLayoutAttributesFor
对于layout在collection view中的作用非常重大,你的画面显示什么效果就看你如何定义layout了。更多相关信息还请阅读相关sdk中的内容。在此不再进行详细的讲解。
//
//
//
//
//
//
//
#import
@interface CircleLayout : UICollectionViewLayout
@property (nonatomic, assign) CGPoint center;
@property (nonatomic, assign) CGFloat radius;
@property (nonatomic, assign) NSInteger cellCount;
@end
//
//
//
//
//
//
//
#import "CircleLayout.h"
#define ITEM_SIZE 70
@implementation CircleLayout
-(void)prepareLayout
{
}
-(CGSize)collectionViewContentSiz
{
}
- (UICollectionViewLayoutAt
{
}
-(NSArray*)layoutAttributesForEleme
{
}
- (UICollectionViewLayoutAt
{
}
- (UICollectionViewLayoutAt
{
}
@end