UITableView基础应用

前言

今天介绍一个简单的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对象

    1. 每个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,最后的“退出当前账号”下方会有一个奇怪的分割线。

参考

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器