您的位置:首页 > 产品设计 > UI/UE

IOS巅峰之UICollectionView详解

2015-09-22 08:40 471 查看
UICollectionView 集合视图

遵守三个代理方法:<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionDelegateFlowLayout>

// UICollectionViewDelegateFlowLayout 点进去发现, 该类遵守了UICollectionViewDelegate

// 实际上 UICollectionViewDelegateFlowLayout 这个协议是UICollectionViewDelegate 的子协议

// 创建一个集合视图

- (void)addSubViews

{

// UICollectionViewLayout是一个抽象类, 本身没有具体功能, 其功能是由其子类实现的

// Item布局(网格状的布局)

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

// 行间距(相当于上下滚动)如果左右滑动就是列间距

layout.minimumLineSpacing = 30;

// 列间距(相当于上下滚动)如果左右滑动就是行间距

layout.minimumInteritemSpacing = 30;

// 设置宽高

layout.itemSize = CGSizeMake(150, 200);

// 设置滑动方向(默认是上下的)

layout.scrollDirection = UICollectionViewScrollDirectionVertical;

// 设置表头, 只有高度影响

layout.headerReferenceSize = CGSizeMake(0, 100);

// 设置表尾, 只有高度影响

layout.footerReferenceSize = CGSizeMake(0, 100);

// 设置内边距

layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

// 初始化, 集合视图

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];

// 设置代理

collectionView.delegate = self;

collectionView.dataSource = self;

// 显示到数据上

[self.view addSubview:collectionView];

// collectionView 默认是黑色

// 注册你要用的cell

// Identifier 重用标示符, 要一致

// Class 你的cell是哪个类, 就添哪个类

// 使用系统就注册系统的, 如果自定义的话, 就注册自定义的

[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@“MyCell”];

[collectionView registerClass:[UICollectionViewCell class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@“MyHeader”];

[collectionView registerClass:[UICollectionViewCell class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseldentifier:@“MyFooter”];

}

// 必须实现的方法, 跟tableView一样

// 返回每个分区的Item数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

return 10;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

// 返回每个Item方法

// 这个方法包括了, 咱们之前创建的tableView写的一堆

// 必须有一步:必须要注册cell

UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@“MyCell” forIndexPath:indexPath];

// 系统没有像tableView一样, 给咱们提供布局方式

// 咱们要使用UICollectionViewCell 一般都是自定义在使用, 跟tableView一样, 所有的自定义控件都要加在contentView上面

cell.contentView.backgroundColor = [UIColor purpleColor];

// 注册表头

return cell;

}

// 分区, 跟tableView默认就一个分区

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

return 1;

}

// 设置表头表尾, 通过代理方法来实现

- (UICollectionReuseableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

// 通过kind判断表头表尾

// 因为是字符串的, 判断相同不能等号

if ([kind isEqualToString:UICollectionElementKindSectionHeader]){

// 返回表头

// 需要去复用集合中得到

UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@“MyHeader” forIndexPath:indexPath];

// 加个颜色

headerView.backgroundColor = [UIColor redColor];

return headerView;

} else {

// 返回表尾

UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@“MyFooter” forIndexPath:indexPath];

// 加个颜色

footerView.backgroundColor = [UIColor redColor];

return footerView;

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: