1。简单介绍与说明
简介:UICollectionView提供了一种自定义布局展示试图内容的方式。
说明:涉及到的必须的基本类型与基本代理类型有UICollectionView/UICollectionViewCell/UICollectionViewLayout/UICollectionViewLayoutAttributes/
UICollectionViewDelegate,一般情况下有上述几个就可以了。
UICollectionViewCell显示的单元格,UICollectionView是容纳单元格的容器,UICollectionViewLayout定义布局,UICollectionViewLayoutAttributes单
定义单个cell的布局与显示相关属性。
2.使用方法:
a.创建UICollectionView,设置dataSource,并在dataSource里面实现必要的方法(类似UITableView的)。
b.创建cell:datasource中创建cell,在datasource方法中,这里与UITableview不同,只要在controllerload的时候调用registerClass:forCellWithReuseIdentifier:或者类似的方法设置cell的类型,然后就能在dataSource必须的方法实现collectionView:cellForItemAtIndexPath:中使用dequeueReusableCellWithReuseIdentifier:forIndexPath:方法就能获取到一个已经创建好的cell,在这里对其进行一些必要的设置就行。
c.设置layout:调用UICollectionView的setCollectionViewLayout:方法设置对应的layout。
d.实现layout:UICollectionViewLayout是一个抽象类,你可以使用系统已经提供的UICollectionViewFlowLayout,也可以自己定义一个。(初学者可以直接使用UICollectionViewFlowLayout作为第一次练习,然后自己实现一个layout来明白其中原理)
UICollectionView的简单使用:先添加一个资源文件夹(资源可以自己网上找找自己喜欢的,这里包括8张图片和一个events.plist文件)。
添加完资源文件夹后,打开Main.storyboard,按Delete删除ViewController视图控制器。然后拖曳一个Collection View Controller到设计界面。然后选择场景中的
Collection View Controller,选择右边的属性检查器,选中View Controller->Is Initial View Controller复选框,如下图
![](https://img-blog.csdn.net/20160909152451923?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
为了能够使得ViewController成为集合视图控制器,则需要将VewController的父类由UIViewController改为UICollectioViewController,相关代码如下:
//ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController :UICollectionViewController
@end
此时代码中的ViewController集合视图控制器还没有与设计界面中的集合视图控制器关联在一起,我们需要选中Collection View,然后选中标示检查其,选择Custom Class->Class下拉列表中的ViewController类。如下图
![](https://img-blog.csdn.net/20160909153341904?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
然后添加集合视图单元格。首先我们需要定义一个单元格类,它继承自UICollectionViewCell。类名为Cell.然后在故事设计界面中选中Collection View cell,打开标识检查器,选择Custom Class->Class为Cell,接下来我们需要设置可虫咬单元格标识,打开其属性检查器,在Collection Reusable View->Identifier中输入Cell.最后设置单元格的大小,我这里设的是150,150
![](https://img-blog.csdn.net/20160909153932381?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
然后拖曳一个Image View和一个Label到单元格中,并为着两个控件定义输出口到Cell.h中,取名为imageView和label。
接着给ViewController.h添加一个数组,如下代码。
// ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController :UICollectionViewController
@property(strong,nonatomic)NSArray*events;
@end
最后在ViewController.m中为UICollectionView添加DataSource和Delegate,如下代码
// ViewController.m
#import "ViewController.h"
#import "Cell.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
//得到程序的main bundle bundle表示一个目录
NSBundle *bundle = [NSBundlemainBundle];
//指定路径来取得bundle
NSString *plistPath = [bundlepathForResource:@"events"
ofType:@"plist"];
//获取属性列表文件中的全部数据
NSArray *array = [[NSArrayalloc] initWithContentsOfFile:plistPath];
self.events = array;
}
- (void)didReceiveMemoryWarning {
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - UICollectionViewDataSource
//提供视图中节的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return [self.eventscount]/2;
}
//提供某个节中的列数目
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return2;
}
//为补充视图提供显示数据
//UITableView声明了一个NSIndexPath的类别,主要用来标识当前cell在tableView中的位置,该类别有section和row两个属性,前者标识当前cell处于第几节中,后者代表在该节中的第几列。
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//使用dequeueReusableCellWithReuseIdentifier:forIndexPath:方法就能获取到一个已经创建好的cell
Cell *cell = [collectionViewdequeueReusableCellWithReuseIdentifier:@"Cell"forIndexPath:indexPath];
NSDictionary *event = [self.eventsobjectAtIndex:(indexPath.section*2 + indexPath.row)];
cell.label.text = [eventobjectForKey:@"name"];
cell.imageView.image = [UIImageimageNamed:[event objectForKey:@"image"]];
return cell;
}
#pragma mark - UICollectionViewDelegate
//选择单元格后触发
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSDictionary *event = [self.eventsobjectAtIndex:(indexPath.section*2 + indexPath.row)];
NSLog(@"select event name : %@", [eventobjectForKey:@"name"]);
}
@end
最终结果展示如下:
点击单元格提示:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)