前言

今天介绍一个简单的UITableView，简单的界面，涉及到UITableView的一些基础的DataSource和Delegate。
效果图👇

UITableView Demo

简介

最近在跟着github上的一个项目：MyOne-iOS，做着高仿的一个app（韩寒出品），其中的设置界面就需要做到上述的效果。效果图使用了UITableView，它涉及到UITableView基础的DataSource和Delegate。下面我就来分享一下其中代码。

UITableView代码实现

UITableView按Section来分成各个区域，其中每个Section又包含一个Header和多个Cell。效果图中一眼看出该UITableView分为4个Section。因此UITableView的代码思路也应该按Section来展开。

UITableView的整体设计

所谓整体设计就是设计UITableView的每个Section的共有特性，以及UITableView的DataSource。
先来看看DataSource(使用数组来存放)：

DataSource Set

注意: 这里多设计了一个Section，将在后面解释。

再来设计UITableView的共有特性:

UITableView Property

Section number和Cell number

UITableView整体设计结束后，就该想想这个UITableView给有多少个Section，以及每个Section该有几个Cell。它其实都包含在上一步的DataSource的数组中。
UITableView通过一下两个UITableViewDataSource方法得到Section和Cell得数目：

    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

Section Header设计

Section Header的设计包括设计Header的高度以及Header的View，通过如下两个UITableViewDataSource实现：

    - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;    //  返回Section Header高度
    - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;     //  返回Section Header的View

具体代码如下：

Section Header

Section Cell设计

Cell设计就是实现并返回一个UITableViewCell，它通过UITableViewDataSource方法实现：

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

注意到：

  1. iOS会复用上面代码注册的UITableViewCell，

     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"stefanie"];

  2. 每个UITableViewCell有一个textLabel属性用来设置Cell的标题，该属性是一个UILabel对象

  3. 每个UITableViewCell有 accessoryType和 accessoryView属性，用来设计Cell最右边的样式

具体代码如下：

UITableViewCell

其他相关

  1. 当手指选中某个Cell时，改变UITableViewCell的背景色；当手指离开时背景色还原。只需实现如下UITableViewDelegate就可：

     - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
     [tableView deselectRowAtIndexPath:indexPath animated:YES];
 }

  2. 默认情况下，Header的上下都没有分割线，只有在两个Cell之间才有分割线，而且不到最左边但到最右边。这也解释了上面为什么要多设计一个与UITableView背景色相同的空的Section。因为如果只有4个Section，最后的“退出当前账号”下方会有一个奇怪的分割线。

参考