UICollectionView 和UITableView很是像,是APPLE公司在iOS 6后推出的用于处理图片这类UITableView 布局困难的控件,和UITableView 同样,它也有本身的Datasource和delegate。如下具体说下像这种方式的效果.
首先来看看UICollectionView 的DataSource。objective-c
@protocol UICollectionViewDataSource <NSObject>
@required
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
@optional
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;
@end
可以看到和UITableView 同样,它有两个必须实现的方法:xcode
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section//有多少个item -dequeueReusableCellWithReuseIdentifier:forIndexPath: - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;//每个长什么样,它要使用dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:来生成
其余的两个是分别有几部分cell,和UITableView中的numberOfSection同样.默认是1个,viewForSupplementaryElementOfKind这个则是用来作出表头和表尾的。ruby
UICollectionViewDelegate 它的代理方法全是可选的,经常且主要用到的就是:markdown
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
这是代表选中后要作什么.
如下来实现一下:
首先在自定义的头文件里加入一个UIColletionView的属性(比直接用实例变量好,具体请看Effective objective-c的学习笔记1)配置各类属性,而后加到self.view上。布局
@property (nonatomic, strong) ZJCollectionViewFlowOut *collectionViewFlowLayout;
self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:self.collectionViewFlowLayout];
_collectionView.backgroundColor = [UIColor clearColor];
_collectionView.dataSource = self;
_collectionView.delegate = self;
[self.view addSubview:_collectionView];
再设置viewController 遵照delegate和dataSource;post
@interface ZJCollectionViewController ()<UICollectionViewDataSource, UICollectionViewDelegate>
@end
这样再xcode 上新的一行输入- collection就会出现很是多collectionView的提示了.
实现:collectionView:cellForItemAtIndexPath:
因为这种方法要用到前面说的那个注冊的cell因此先建一个UICollectionViewCell,顺便搞定那个FlowLayout.
Cell的内容固然可以自定义的了.
在viewDidLoad中建立CollectionView的如下加上:学习
[_collectionView registerClass:[ZJCollectionViewCell class] forCellWithReuseIdentifier:kCellReuseIdentifier];
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
ZJCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kCellReuseIdentifier forIndexPath:indexPath];
NSString *image = @"201502192144014806.jpg";
cell.userImageView.image = [UIImage imageNamed:image];
return cell;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.pictureArray.count;
}
在viewDidLoad中collectionView建立以前要建立那个布局的
collectionViewFlowLayout 对象.ui
self.collectionViewFlowLayout = [[ZJCollectionViewFlowOut alloc]init];
当中在collectionViewFlowLayout里面是这种:atom
spa
- (id)init
{
if (self = [super init]) {
self.minimumInteritemSpacing = 1.0;//item 之间的行的距离
self.minimumLineSpacing = 0.0;//item 之间竖的距离
self.itemSize = (CGSize){[UIScreen mainScreen].bounds.size.width/3,[UIScreen mainScreen].bounds.size.width/3};
// self.sectionInset = UIEdgeInsetsMake(4, 4, 4, 4); 这个是设置一个section的距离上下上左下右间距。} return self; }
得出的结果例如如下图:
这是一个简单的UICollectionView的展现,时间很少。有空再具体点