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;

UICollectionView-网格视图的更多相关文章

  1. Android课程---关于GridView网格视图的学习

    activity_ui6.xml <?xml version="1.0" encoding="utf-8"?> <GridView xmlns ...

  2. UICollectionView集合视图的概念

    如何创建UICollectionView 集合视图的布局UICollectionViewFlowLayout 自定义cell 布局协议UICollectionViewDelegateFlowLayou ...

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

    网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...

  4. Android开发10.3:UI组件GridView网格视图

    GridView(网格视图) 概述 GridView用于在界面上按行.列分布的方式来显示多个组件         GridView和ListView有共同的父类 : AbsListView       ...

  5. Android 网格视图GridView的使用

    网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...

  6. 网格视图GridView的使用

    网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...

  7. 【Android】10.3 网格视图(GridView)

    分类:C#.Android.VS2015: 创建日期:2016-02-19 一.简介 网格视图(GridView)是在GridLayout的基础上添加了滚动功能的视图,即:GridView用于在可滚动 ...

  8. 用RecyclerView实现水平滚动和网格视图

    建立RecyclerViewActivity.java文件 1 public class RecyclerViewActivity extends AppCompatActivity { 2 priv ...

  9. easyui数据网格视图(Datagrid View)的简单应用

    下面介绍datagrid的数据网格详细视图和数据网格的分组视图 1.先引用的js和css文件 1)包含eauyui必备的四个文件easyui.css,icon.css, jquery-min.js.j ...

  10. UICollectionView 集合视图用法,自定义Cell

    在View里面 //1.创建UICollectionViewFlowLayout UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFl ...

随机推荐

  1. MariaDB备份之XtraBackup

    一.XtraBackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtrabd数据库进行热备的工具.特点: (1)备份过程快速.可靠: ...

  2. XMPP环境搭建 (mac环境下 安装自己独立的mysql与服务器(openfire),实现即时聊天功能)

    1简单概览 [一]XMPP简介 http://xmpp.org 即时通讯技术 IM - Instant Messaging ⽀支持⽤用户在线实时交谈.交谈双⽅方都需要⼀一个聊天窗⼝口,其中⼀一个⽤用户 ...

  3. mysql的两种常用的引擎

    MyISAM引擎特点1.不支持事务(事务是指逻辑上的一组操作,组成这组操作的各个单元,要么全成功,要么全失败)2.表级锁定(数据更新时锁整个表):其锁定机制是表级锁定,这虽然可以让锁定的实现成本很小但 ...

  4. appcmd应用

    appcmd资料: http://www.jb51.net/article/36024.htm 官方文档:https://docs.microsoft.com/zh-cn/iis/get-starte ...

  5. Entity FrameWork Code First无法生成数据库 解决办法

    我是控制台应用程序,没有connectionStrings,试了几个方法也都不可以. 这是别人的博客用其他方法. http://www.cnblogs.com/Gyoung/archive/2013/ ...

  6. function func(){} 与 var func=function(){}的区别

    1  var func =function(){}  ,即和 var 变量的特性 一样. func 变量名提前,但是不会初始化,直到执行到初始化代码. 2  function func(){}     ...

  7. Android LCD

    Android LCD(一):LCD基本原理篇Android LCD(二):LCD常用接口原理篇Android LCD(三):Samsung LCD接口篇Android LCD(四):LCD驱动调试篇

  8. CSS 边距和填充

    margin and padding are the two most commonly used properties for spacing-out elements. A margin is t ...

  9. Python面试题之Python对象反射、类反射、模块反射

    python面向对象中的反射:通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 一.getattr 对象获取 class Manager: role = &quo ...

  10. 二叉树、平衡二叉树、B-Tree与B+Tree

    本文总结自:https://blog.csdn.net/chuixue24/article/details/80027689 二叉树(B树,binary tree) 左子树的键值 < 根的键值 ...