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

【IOS 开发学习总结-OC-57】★UI之UICollectionView 与UICollectionViewController

2015-10-19 11:36 567 查看

【IOS 开发学习总结-OC-57】UI之UICollectionView 与UICollectionViewController

技术知识要及时更新,先来添加个学习链接: iOS9 collectionView新特性

UICollectionView

UICollectionView直观上非常像一个多列的表格控件。——iBooks 就是个UICollectionView应用。UICollectionView不仅是多列表格,我们可以借助自定义布局,对UICollectionView进行任意的布局。

UICollectionView继承与 UIScrollView,因此具有UIScrollView的功能, 这个UIScrollView中主要封装了 UITableViewCell单元格控件。——所以,UICollectionView默认可以对单元格滚动。

默认状态下,UICollectionViewController 实例被自动设为UIScrollView委托。

UICollectionView控件的添加:代码添加或者在 IB 界面添加。

UICollectionView很多功能用法与 UITableView 类似,可以借鉴之前的UITableView 学习和使用。



UICollectionView属性

UICollectionView属性面板:



layout:

支持2个属性:

①flow:表明使用UICollectionViewFlowLayout 布局对象 ,如上图,选中 flow,dock 面板中就有了一个UICollectionViewFlowLayout布局对象;

UICollectionViewFlowLayout布局

该布局采用”流”的方式管理UICollectionView中所有的单元格——要么横向,要么竖向排列。





②custom:使用自定义的UICollectionViewLayout 对象。

scroll direction:滚动方向;

accessories:是否显示UICollectionView分区的页眉和页脚。

UICollectionView的功能与用法

示例:



示例代码下载(出自疯狂 ios 一书代码):

特别说明:

程序不允许直接创建 UICollectionViewCell 单元格对象——这与UITableView不同。必须先为UICollectionView注册单元格控件,然后才可以从该控件管理的”可重用单元格队列”中获取单元格对象。

为UICollectionView注册单元格的方法

UICollectionView注册单元格的方法有2种:

1. 先用单独的 xib 文件设计单元格样式——》调用
registerNib:forCellWithReuseIdentifier
方法注册单元格。——该方法比较繁琐,不常用已属非主流方式。

2. 直接在storyboard 界面设计文件的UICollectionView中设计单元格原型。这种方法在上面的示例中有应用。

定制布局

使用UICollectionViewDelegateFlowLayout定制布局

如果要实现整齐的网格效果,直接使用UICollectionViewFlowLayout就成了。但如果各单元格的大小不同,就需要借助UICollectionViewDelegateFlowLayout协议来实现。

UICollectionViewDelegateFlowLayout协议继承了UICollectionViewDelegate协议。UICollectionViewDelegateFlowLayout协议额外定义了如下方法——使用协议中的方法实现单元格的定制:

@protocol UICollectionViewDelegateFlowLayout <UICollectionViewDelegate>
@optional

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
//控制指定NSIndexPath对应单元格大小

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
//控制指定分区上下左右各空白区域的大小。

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
//控制指定分区最小行间距

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
//控制指定分区最小列间距

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
//页眉控件的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;
//页脚控件大小
@end


扩展 UICollectionViewLayout定制布局

通过继承UICollectionViewLayout,实现自己的布局管理器来实现更复杂,更灵活的单元格布局。

继承UICollectionViewLayout后,通常会重写的方法:

1.
- (void)prepareLayout;
——开始布局时调用该方法执行准备工作;

2.
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
——控制指定CGRect区域内所有单元格的大小,位置等布局信息。

3.
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
——控制指定NSIndexPath对应的单元格的大小,位置等布局信息。

4.
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
——控制指定NSIndexPath对应的页眉,页脚控件的大小,位置等布局信息。

5.
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)elementKind atIndexPath:(NSIndexPath *)indexPath;
——控制指定分区的装饰控件的大小,位置等布局信息。

控制UICollectionView中单元格显示,隐藏时的动画效果。可重写如下常用方法:

1.

- (void)prepareForAnimatedBoundsChange:(CGRect)oldBounds;
- (void)finalizeAnimatedBoundsChange;

- (void)prepareForTransitionToLayout:(UICollectionViewLayout *)newLayout NS_AVAILABLE_IOS(7_0);
- (void)prepareForTransitionFromLayout:(UICollectionViewLayout *)oldLayout NS_AVAILABLE_IOS(7_0);
- (void)finalizeLayoutTransition NS_AVAILABLE_IOS(7_0);

- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;
//单元格动态增加时,自动调用该方法;

- (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;
//单元格动态消失时,自动调用该方法;

- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingSupplementaryElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)elementIndexPath;
- (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingSupplementaryElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)elementIndexPath;
//上面的2个方法:页眉或页脚控件动态增加/消失时,自动调用该方法;

- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingDecorationElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)decorationIndexPath;
- (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingDecorationElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)decorationIndexPath;
//上面的2个方法:装饰控件动态增加/消失时,自动调用该方法;


UICollectionView多分区网格

如果UICollectionView要实现多分区,需要重写UICollectionViewController协议的
numberOfSectionsInCollectionView:
方法。

若要为各分区添加页眉页脚控件,需要重写UICollectionViewDataSourse协议中的
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;
方法。

UICollectionViewController

UICollectionViewController——已经实现UICollectionViewController协议和UICollectionViewDelegate 协议。UICollectionViewController与UICollectionView的关系,类似于 UITableViewController 与UITableView的关系。

UICollectionView 补充学习资料:http://www.cnblogs.com/heri/p/4405337.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ios ui 布局 开发 控件