iOS开发-UI (三)Collection

知识点

1.UICollectionView的创建

2. UICollectionView的常用代理方法

3. UICollectionView相关XIB操作

================================

UICollectionView的创建

1.UICollectionViewLayout

作用:控制collectionView布局的一个抽象类

注意:一般不直接使用这个类,因为这个类很多方法都没有实现,只是规定了很多属性和方法,自已定义布局需要创建一个类继承UICollectionViewLayout,然后设定自定义布局

2.UICollectionViewFlowLayout

作用:系统写好的一个瀑布流布局

//使用系统写好的一个瀑布流布局

UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];

/*

UICollectionViewScrollDirectionVertical,

UICollectionViewScrollDirectionHorizontal

*/

//设置滑动的方向

layout.scrollDirection = UICollectionViewScrollDirectionVertical;

//设置item之间的最小间距(竖直滑动的时候,表示的横向间距,水平滑动的时候,表示的是纵向间距)

layout.minimumInteritemSpacing = 35;

//设置item之间的最小间距(竖直滑动的时候,表示的纵向间距,水平滑动的时候,表示的是横向间距)

layout.minimumLineSpacing = 10;

3.- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;

作用:创建一个UICollectionView,必须提供一个UICollectionViewLayout

//实例化一个UICollectionView

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

4.协议代理

1)UICollectionViewDataSource

2)UICollectionViewDelegateFlowLayout

================================

UICollectionView的常用代理方法

#pragma mark- UICollectionView的代理方法

1.- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

作用:返回组数

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

return 10;

}

2.- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

作用:返回元素个数

//返回每组当中所有的元素个数

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

{

return 10;

}

3.- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

作用:返回元素所使用的UICollectionViewCell

//返回每个元素所使用的UICollectionViewCell对象

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

{

//去复用队列查找cell

UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

//改变背景色

cell.backgroundColor = [UIColor redColor];

return cell;

}

4.- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

作用:返回元素的CGSize大小

//修改每一个item的宽度和高度

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

return CGSizeMake(100, 100);

}

5.- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

作用:返回元素之间允许的最小间距,如果是水平滑动,则代表垂直距离,如果竖直滑动,则代表横向距离

//效果同layout.minimumInteritemSpeacing,二选一

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{

}

6.- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

作用:返回元素之间允许的最小间距,如果是水平滑动,则代表横向距离,如果竖直滑动,则代表垂直距离

//效果同layout.minimumLineSpacing,二选一

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

}

7.- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

作用:控制一组视图和屏幕边界的(上,左,下,右)距离

//返回每一组元素跟屏幕4个边界的距离(上,左,下,右)

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

//创建一个UIEdgeInsets的结构体

return UIEdgeInsetsMake(10, 10, 10, 10);

}

8.- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

作用:返回头部视图的CGSize,如果是水平滑动,则宽度有效,如果是竖直滑动,只有高度有效

//返回头部视图的宽和高

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{

//注意:如果是竖直滑动,则只有高度有效,如果是水平滑动,则只有宽度有效

return CGSizeMake(50, 50);

}

9.- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

作用:返回头部视图

//返回头部和尾部视图所使用的UICollectionReusableView对象

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

//由于头部和尾部视图的实例化都需要调用此方法,所以需要通过kind判断生成的是头部视图还是尾部视图

if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

//表示需要创建头部视图

//复用形式创建头部视图

UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];

//改变背景色

headerView.backgroundColor = [UIColor greenColor];

return headerView;

}

return nil;

}

10.- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;

作用:选中某个元素

//选中某一个item

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

NSLog(@"第%ld组第%ld个",indexPath.section,indexPath.item);

}

时间: 2024-10-11 21:33:20

iOS开发-UI (三)Collection的相关文章

iOS开发UI篇—Quartz2D简单使用(三)

iOS开发UI篇-Quartz2D简单使用(三) 一.通过slider控制圆的缩放 1.实现过程 新建一个项目,新建一个继承自UIview的类,并和storyboard中自定义的view进行关联. 界面搭建,如图: 代码示例: YYViewController.m文件 1 // 2 // YYViewController.m 3 // 04-对圆进行缩放 4 // 5 // Created by apple on 14-6-11. 6 // Copyright (c) 2014年 itcase.

学习IOS开发UI篇--UI知识点总结(三) UIScrollView/UIPageControl/NSTimer

UIScrollView:常用属性 @property(nonatomic)   UIEdgeInsets     contentInset;               // default UIEdgeInsetsZero. add additional scroll area around content @property(nonatomic,getter=isPagingEnabled) BOOL   pagingEnabled;     // default NO. if YES,

文顶顶 iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所

iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所

iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接)

iOS开发UI篇—推荐两个好用的Xcode插件(提供下载链接) 这里推荐两款好用的Xcode插件,并提供下载链接. 一.插件和使用如下: 1.两款插件 对项目中图片提供自动提示功能的插件:KSImageNamed-Xcode-master 提供快速创建自动注释:VVDocumenter-Xcode-master 2.使用介绍: (1)KSImageNamed-Xcode-master的使用 安装该插件后,会对文件中图片进行智能提示. (2)VVDocumenter-Xcode-master能提供

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcarsgroup.h // 07-汽车展示(高级) // // Created by apple on 14-5-28. // Copyright (c) 2014年 itcase. All rights reserved. // #import <Foundation/Foundation.h> @

iOS开发UI篇—实现UItableview控件数据刷新

iOS开发UI篇—实现UItableview控件数据刷新 一.项目文件结构和plist文件 二.实现效果 1.说明:这是一个英雄展示界面,点击选中行,可以修改改行英雄的名称(完成数据刷新的操作). 运行界面: 点击选中行: 修改数据后自动刷新: 三.代码示例 数据模型部分: YYheros.h文件 // // YYheros.h // 10-英雄展示(数据刷新) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. A

iOS开发UI篇—UITableviewcell的性能优化和缓存机制

iOS开发UI篇—UITableviewcell的性能问题 一.UITableviewcell的一些介绍 UITableView的每一行都是一个UITableViewCell,通过dataSource的 tableView:cellForRowAtIndexPath:方法来初始化每?行 UITableViewCell内部有个默认的子视图:contentView,contentView是UITableViewCell所显示内容的父视图,可显示一些辅助指示视图 辅助指示视图的作?是显示一个表示动作的

iOS开发UI篇—UITableview控件基本使

iOS开发UI篇—UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) #import <Foundation/Foundation.h> @interface NJHero : NSObject /** * 头像 */ @property (nonatomic, copy) NSString *icon; /** * 名称 */ @property (nonatomic, copy) NSString *name; /** * 描述 */ @