UICollectionView-网格视图

1. UICollectionView

网格视图,除了提供与UITableView同样的功能显示一组顺序显示的数据,还支持多列的布局。

2. UICollectionView 使用

> 设置Controller要遵循的协议:

UICollectionViewDataSource               // 数据源协议

UICollectionViewDelegate                   // 数据行为协议

UICollectionViewDelegateFlowLayout   // 数据流式布局协议

> 创建流式布局

flowLayout = [[UICollectionViewFlowLayout alloc] init]

> 设置该布局下滑动方向

flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical / Horizontal  // 默认是Vertical 在Horizontal时,元素是依次横向摆放,Vertical时,依次竖向摆放

> 以布局方式和frame 初始化UICollectionView

[[UICollectionView alloc] initWithFrame: collectionViewLayout: ]

> 设置背景色,纯代码实现时,UICollectionView默认背景色是黑色

.barckgroundColor

> 设置代理

.dataSource     // 代理 UICollectionViewDataSource

.delegate         // 代理 UICollectionViewDelegate ,UICollectionViewDelegateFlowLayout

> 注册标识单元格UICollectionViewCellUICollectionView Cell只能使用定制化的,并且必须注册。

[collectionView registerNib: forCellWithReuseIdentifier:]

[collectionView registerClass: forCellWithReuseIdentifier:]

> 注册标识分区表头/表尾 UICollectionReusableView,创建时要手动设置其class

[collectionView registerNib: forSupplementaryViewOfKind: withReuseIdentifier: ]

/* forSupplementaryViewOfKind: 表示是为表头还是表尾注册,参数只有两个可选值:UICollectionElementKindSectionHeader:表头,UICollectionElementKindSectionFooter: 表尾  */

> 协议方法

- UICollectionViewDataSource

必须实现:

// 每个分区条数(不是行数)

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

// 数据绑定cell

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

其他方法:

// 返回分区数量

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

// 数据绑定表头/表尾:必须为其设置尺寸才可显示,注意查看不同scrollDirection下表头的展现

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

- UICollectionViewDelegateFlowLayout

// 返回分区表头尺寸

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

// 返回分区表尾尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:

(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

// 返回每条的尺寸

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

// 返回每个分区四周的外间距

- (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

-UICollectionViewDelegate

// 条被选中:注意被选中的背景色,只能自定义selectedBackgroundView,且设置后,不能设置cell的背景色,否则无法看到点击选中效果

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

// 条被反选

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;

时间: 2024-08-09 19:45:15

UICollectionView-网格视图的相关文章

网格视图在Android应用程序中的使用

网格视图是在应用程序中比较常见的视图. 首先介绍一下GridView类,GridView类位于android.widget包下,该视图是将其他空间以二维格式显示到表格中的,而这些控件全部来自于ListAdapter适配器. GridView类的属性同样有两种配置方式,即XML属性配置和Java代码中配置.如表中列出了常见的属性和方法. 其次,介绍一下网格视图的使用,下面将通过一个完整的案列详细介绍网格视图的使用方法,在该案例中同样列出了各个动漫名人,包括其照片及描述,案例的开发步骤如下: 创建一

数据绑定和数据网格视图(DataGridView)控件

数据绑定和数据网格视图(DataGridView)控件 数据网格视图控件,不像我们前面看到的控件,它可以显示多个列,但是,数据必须格式化,使数据网格知道要显示哪一列.有两种实现方法:一个是把数据网格视图绑定到数据表(DataTable),另一个是把网格到绑定对象列表,对象有许多属性,不同的属性就成为网格的列. 下面的例子是一种简单的解决方案,绑定到数据集(DataSet): open System open System.Collections.Generic open System.Confi

View(视图)——ListView之BaseAdapter和SimpleCursorAdapter以及网格视图代码视图

一.BaseAdapter 1.数据源  List<Object> 一般是放实体类.POJO类,一般只包含私有属性和属性的getter和setter方法. 2.layout:可以用布局,包含多个视图. 3.抽象类:必须要继承并实现4个抽象方法 1-int getCount()  返回数据源的记录数 2-Object getItem(int position) 返回索引对应的数据对象 3-long getItemId(int position)  返回索引对应的数据对象的ID 4-View ge

【Android】10.3 网格视图(GridView)

分类:C#.Android.VS2015: 创建日期:2016-02-19 一.简介 网格视图(GridView)是在GridLayout的基础上添加了滚动功能的视图,即:GridView用于在可滚动的2D网格空间中显示包含大量单元格的项(每项都是一个视图),例如每个单元格显示一个图片,当图片较多时,还可以上下滚动查看. 要使用GridView,需要先编写一个视图适配器(一般用继承自BaseAdapter<T>的适配器类来实现),再利用它来依次填充每个单元格,例如,将图片按先行后列(或者先列后

UICollectionView集合视图的概念

如何创建UICollectionView 集合视图的布局UICollectionViewFlowLayout 自定义cell 布局协议UICollectionViewDelegateFlowLayout UICollectionView与UITableView的实现类似,都需要设置delegate和dataSource 在collectionView中,cell的布局比tableView要复杂,需要使用一个类来描述集合视图的布局---UICollectionViewLayout->UIColle

android学习之--网格视图(GridView)和图像切换器(ImageSwitcher)

         GridView用于在界面上按行.列分布显示多个组件.GridView和ListView有共同父类:AbsListView.GridView与ListView的区别在于:ListView只在一个方向上分布,GridView在两个方向上分布.所以使用GridView时一般都指定numColumns大于1,否则该属性默认值为1,就意味着改GridView只有一列,那就变成了ListView GridView的xml属性 android:strtchMode 的值为:      Im

Android基础入门教程——2.4.9 GridView(网格视图)的基本使用

Android基础入门教程--2.4.9 GridView(网格视图)的基本使用 标签(空格分隔): Android基础入门教程 本节引言: 本节给大家介绍的是第二个Adapter类的控件--GridView(网格视图),见名知义,ListView是列表, GridView就是显示网格!他和ListView一样是AbsListView的子类!很多东西和ListView都是相通的, 本节我们就来学习他的基本用法~ 1.相关属性: 下面是GridView中的一些属性: android:columnW

Android学习笔记27:网格视图GridView的使用

网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridView控件实现手机屏幕上各个应用软件图标的摆放,以及应用软件名称的显示. 完成后的程序运行效果如图1所示. 图1 主界面显示效果 1.界面布局 通过查看GridView的API帮助文档(http://developer.android.com/reference/android/widget/Gri

网格视图GridView的使用

网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridView控件实现手机屏幕上各个应用软件图标的摆放,以及应用软件名称的显示. 完成后的程序运行效果如图1所示. 1.界面布局 通过查看GridView的API帮助文档(http://developer.android.com/reference/android/widget/GridView.html)

Android 网格视图GridView的使用

网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridView控件实现手机屏幕上各个应用软件图标的摆放,以及应用软件名称的显示. 完成后的程序运行效果如图1所示. 图1 主界面显示效果 1.界面布局 通过查看GridView的API帮助文档(http://developer.android.com/reference/android/widget/Gri