iOS的GridView表格视图的实现（课程表Demo）

本文将介绍以及讲解GridView（网格视图的实现）

文中所解析的例子已封装成控件
地址JiaHongXu/JHGridView 欢迎指正和Star~
先上一个实现的截图

准备阶段

前因

这个项目是前段时间在老师实验室接到的一个公司的协助开发项目，这是一个家校互通的软件，里面有一个功能是需要查看课程表，然而又不希望实现像超级课程表那样的表格视图，于是手动封装了一个GridView以满足需求。

分析

需要实现的GridView需要有如下的功能：
- 背景色和文字颜色可指定，允许指定某行某列的颜色
- 不同行的行高和列宽可以不同
- 可相应点击事件，点击某行某列需要作出回应（该需求中为点击课程表中的某个课程要弹出输入框，以修改课程名称）
- 表格可滑动，上下或左右滑动（即contentSize能超出当前View的大小）
- 担心产品经理改动需求，表头（星期一、星期二那行）是否可以跟随下面的表格一起上下滚动，是否固定
- 同样也是预防改需求，提前做好文本对齐方式的修改预留

思考实现

• 如果使用UICollectionView实现的话，难以指定某行某列（UICollectionView的行中item个数是由item宽度计算得出，如需指定一行有几个item需要自己手动限制item大小），因此考虑使用UITableView实现
• 由于需要考虑表头行是否与表格主体内容一起滚动，因此分离表头与主体内容，主体内容使用若干个UITableView构成，表头使用UIView横向嵌套几个UILabel组成
• 需要定制好多东西，例如对其方式、字体颜色、背景颜色、字体大小、行高列宽等，考虑使用代理方法交由使用者指定，点击事件可以通过获取UITableView的代理方法，稍作处理然后交由使用者使用。
• 剩下就是如何对网格视图GridView中的每个item赋值的问题，想过两个解决方案，第一个是通过代理方法，让用户实现一个返回表格主体每行每列的NSString和实现一个返回表头每列的NSString这两个方法，另外一个是直接通过传入model，然后通过KVC赋值，考虑用户使用方便，我选择了第二种

用到的知识

基本没啥，主要把去年暑假学的KVC拿来练一下手，顺便复习一下代理方法的写法以及基本控件的使用，UITableView的contentSize相关知识以及一些OC的知识，剩下的就是比较繁琐的封装了

---

代码实现

定义的枚举类型和结构体

//use for representing the location in gridview
typedef struct GridIndex {
    long row;
    long col;
} GridIndex;

//use for specifing the selection type
typedef enum{
    JHGridSelectTypeNone,       //default, none selection can be seen
    JHGridSelectTypeDefault,    //when click on an item, the whole line will be selected also
    JHGridSelectTypeSingle,     //only select the clicked item
}JHGridSelectType;

//use for specifing the alignment type
typedef enum{
    JHGridAlignmentTypeDefault, //center alignment
    JHGridAlignmentTypeLeft,    //left alignment
    JHGridAlignmentTypeRight,   //right alignment
}JHGridAlignmentType;

分别是用于表示位置坐标的GridIndex（类似NSIndexPath），用于表示选择样式的JHGridSelectType和用于表示对齐方式的JHGridAlignmentType

可实现的代理方法

@protocol JHGridViewDelegate<NSObject>

@optional
- (CGFloat)heightForRowAtIndex:(long)index;
@optional
- (CGFloat)widthForColAtIndex:(long)index;
@optional
- (CGFloat)heightForTitles;
@optional
- (BOOL)isTitleFixed;
@optional
- (void)didSelectRowAtGridIndex:(GridIndex)gridIndex;
@optional
- (JHGridSelectType)gridViewSelectType;
@optional
- (JHGridAlignmentType)gridViewAlign