接上篇:在iOS中怎样创建可展开的Table View?(上)

展开和合拢

我猜这部分可能是你最期望的了,因为本次教程的目标将会在在部分实现.第一次我们设法让顶层的cell,在它们点击的时候展开或者合拢.以及显示或者隐藏合适的子cell.

开始我们需要知道点击行的索引(记住,不是实际的indexPath.row)而是可见cell的行索引,所以我们将会开始在下面的tableView代理方法里给它分配一个局部变量:

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let indexOfTappedRow = visibleRowsPerSection[indexPath.section][indexPath.row]
}

虽然为了让我们的cell展开或合拢并没有太多代码,但是我们要将一步一步地走.现在我们已经有了点击行的真正索引,我们必须要检查cellDescriptors数组,指定的cell是否展开.某个cell是可展开的,但是现在还没有展开,那么我们要标示(我们将使用一个flag标记)那个cell展开,否则我们要标示它合拢:

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let indexOfTappedRow = visibleRowsPerSection[indexPath.section][indexPath.row] if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpandable"] as! Bool == true {
var shouldExpandAndShowSubRows = false
if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpanded"] as! Bool == false {
// In this case the cell should expand.
shouldExpandAndShowSubRows = true
}
}
}

一旦上面的标示取到了它的值和属性,来指示这个cell展开或是关闭,把这个cell的描述符集合保存到那个值里是我们的工作,或者换句话说,就是更新cellDescriptors数组.我们想更新选中行的"isExpanded"属性,所以在随后的点击它将会有正确的行为(如果它是打开的那么就合拢,如果它是合拢的那么就打开).

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let indexOfTappedRow = visibleRowsPerSection[indexPath.section][indexPath.row] if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpandable"] as! Bool == true {
var shouldExpandAndShowSubRows = false
if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpanded"] as! Bool == false {
shouldExpandAndShowSubRows = true
} cellDescriptors[indexPath.section][indexOfTappedRow].setValue(shouldExpandAndShowSubRows, forKey: "isExpanded")
}
}

有一个非常重要的细节,我们不应该忘记这一点:如果你再调用,有一个指定cell是否应该显示的属性,即"isVisible",以及存在每一个cell的描述.这个属性必须根据上面的flag来改变,所以的添加的不可见cell当它展开的时候,会变为可见的,当cell合拢的时候,优惠变为隐藏.实际上,通过改变那个属性的值,我们实际上实现了打开的效果(或是合拢的效果).所以,让我们修改上面的代码:

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let indexOfTappedRow = visibleRowsPerSection[indexPath.section][indexPath.row] if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpandable"] as! Bool == true {
var shouldExpandAndShowSubRows = false
if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpanded"] as! Bool == false {
shouldExpandAndShowSubRows = true
} cellDescriptors[indexPath.section][indexOfTappedRow].setValue(shouldExpandAndShowSubRows, forKey: "isExpanded") for i in (indexOfTappedRow + 1)...(indexOfTappedRow + (cellDescriptors[indexPath.section][indexOfTappedRow]["additionalRows"] as! Int)) {
cellDescriptors[indexPath.section][i].setValue(shouldExpandAndShowSubRows, forKey: "isVisible")
}
}
}

我们必须要关注更主要的事:在上面的代码我们只是改变一些cell的"isVisible"的值,那意味着,可见行的总数已经改变了.所以,在我们重新加载tableView之前,我们需要app找到可见行的索引值:

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let indexOfTappedRow = visibleRowsPerSection[indexPath.section][indexPath.row] if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpandable"] as! Bool == true {
var shouldExpandAndShowSubRows = false
if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpanded"] as! Bool == false {
shouldExpandAndShowSubRows = true
} cellDescriptors[indexPath.section][indexOfTappedRow].setValue(shouldExpandAndShowSubRows, forKey: "isExpanded") for i in (indexOfTappedRow + 1)...(indexOfTappedRow + (cellDescriptors[indexPath.section][indexOfTappedRow]["additionalRows"] as! Int)) {
cellDescriptors[indexPath.section][i].setValue(shouldExpandAndShowSubRows, forKey: "isVisible")
}
} getIndicesOfVisibleRows()
tblExpandable.reloadSections(NSIndexSet(index: indexPath.section), withRowAnimation: UITableViewRowAnimation.Fade)
}

正如你看到的,我使用了动画的方式来重新加载点击cell的组,但是如果你不喜欢这种方式,你可以修改.

现在运行app.顶层的cell可以在点击之后展开或是合拢了,尽管点击子cell还没有发生任何改变,但结果令人印象深刻.

拾取值

从现在开始我们可完全专注于处理输入数据和与用户交互的子cell的控制了.我们通过实现逻辑,当cell的"idCellValuePicker"标识符被点击的时候,将会才去行动.在我们的demo里,那是在tableView的"Preferences"组里,列出了最喜欢的运动和颜色的cell.尽管我已经提到它了,我想那是一个好的想法,刷新我们的内存,并且再说一遍,当一个cell被点击的时候,我们希望各自的顶层cell合拢(以及隐藏选项).

真正的原因是因为我选择开始处理cell的类型,我继续在tableView的代理方法里修改,在里面,我将添加一个else来处理没有展开cell的情况,然后我们将检查点击cell的标识符的值.如果标识符等于"idCellValuePicker"那么我们有了一个我们感兴趣的cell.

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let indexOfTappedRow = visibleRowsPerSection[indexPath.section][indexPath.row] if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpandable"] as! Bool == true {
...
}
else {
if cellDescriptors[indexPath.section][indexOfTappedRow]["cellIdentifier"] as! String == "idCellValuePicker" { }
} getIndicesOfVisibleRows()
tblExpandable.reloadSections(NSIndexSet(index: indexPath.section), withRowAnimation: UITableViewRowAnimation.Fade)
}

if case里,我们将执行诗歌不同的任务:

  1. 我们要找到那个被点击的顶级cell的行索引.事实上,我们会执行一个搜索指向cell描述符的起始位置,以及第一个顶层cell被发现是可展开的才是我们想要的.
  2. 我们设置了显示选中cell的值,作为顶层cell的textLabel的文本内容.
  3. 当顶层cell不是展开的时候,我们做了标记.
  4. 我们会把所有的子cell标记为不可见的.

看下面的代码:

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let indexOfTappedRow = visibleRowsPerSection[indexPath.section][indexPath.row] if cellDescriptors[indexPath.section][indexOfTappedRow]["isExpandable"] as! Bool == true {
...
}
else {
if cellDescriptors[indexPath.section][indexOfTappedRow]["cellIdentifier"] as! String == "idCellValuePicker" {
var indexOfParentCell: Int! for var i=indexOfTappedRow - 1; i>=0; --i {
if cellDescriptors[indexPath.section][i]["isExpandable"] as! Bool == true {
indexOfParentCell = i
break
}
} cellDescriptors[indexPath.section][indexOfParentCell].setValue((tblExpandable.cellForRowAtIndexPath(indexPath) as! CustomCell).textLabel?.text, forKey: "primaryTitle")
cellDescriptors[indexPath.section][indexOfParentCell].setValue(false, forKey: "isExpanded") for i in (indexOfParentCell + 1)...(indexOfParentCell + (cellDescriptors[indexPath.section][indexOfParentCell]["additionalRows"] as! Int)) {
cellDescriptors[indexPath.section][i].setValue(false, forKey: "isVisible")
}
}
} getIndicesOfVisibleRows()
tblExpandable.reloadSections(NSIndexSet(index: indexPath.section), withRowAnimation: UITableViewRowAnimation.Fade)
}

我们又一次修改了某些cell的"isVisible"属性,因此可见行的数量改变了.

如果你现在运行app,你将会看到当选中一个喜欢的运动或颜色后,app的响应.

响应其他用户操作

CustomCell.swift文件中,你可以发现CustomCellDelegate协议的所需的代理方法都已经被声明.通过在ViewController类里实现它们我们需要设法让app在所有的其他缺少用户操作的活动得到响应.

让我们再一次修改ViewController.swift文件,采用上面的协议.移到类的顶部,添加一个协议,如下:

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, CustomCellDelegate

接下来,在tableView:cellForRowAtIndexPath: 函数里,我们必须让ViewController类实现自定义cell的代理方法.看这儿:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
... cell.delegate = self return cell
}

好极了,现在我们可以开始实现得里函数了.我们会开始实现在日期选择器里显示选中的日期到顶级cell上:

func dateWasSelected(selectedDateString: String) {
let dateCellSection = 0
let dateCellRow = 3 cellDescriptors[dateCellSection][dateCellRow].setValue(selectedDateString, forKey: "primaryTitle")
tblExpandable.reloadData()
}

一旦我们指定组和行的个数,我们直接将选中的日期设置为了一个字符串.注意,这个字符串在代理方法中是一个字符串.

接下来,让我们处理在cell的开关吧.当改变了开关的值,我们需要做两件事情:首先,设置合适的值("Single"或"Married"),显示到对应的顶级cell上;之后,在cellDescriptors数组里更新开关的值,那样当tableView刷新的时候,它就会有合适的状态.在下面的代码片段里,你将会注意到我们首先确定基于开关状态合适的值,然后我们分配给他们各自的属性:

func maritalStatusSwitchChangedState(isOn: Bool) {
let maritalSwitchCellSection = 0
let maritalSwitchCellRow = 6 let valueToStore = (isOn) ? "true" : "false"
let valueToDisplay = (isOn) ? "Married" : "Single" cellDescriptors[maritalSwitchCellSection][maritalSwitchCellRow].setValue(valueToStore, forKey: "value")
cellDescriptors[maritalSwitchCellSection][maritalSwitchCellRow - 1].setValue(valueToDisplay, forKey: "primaryTitle")
tblExpandable.reloadData()
}

下面是带有文本框的cell.我们要动态地组成全名,一旦姓和名都输入了.我们需要指定包含文本框的cell的索引.最后我们会在顶级cell更新显示的文本(全名),并且会刷新tableView,如下代码:

func textfieldTextWasChanged(newText: String, parentCell: CustomCell) {
let parentCellIndexPath = tblExpandable.indexPathForCell(parentCell) let currentFullname = cellDescriptors[0][0]["primaryTitle"] as! String
let fullnameParts = currentFullname.componentsSeparatedByString(" ") var newFullname = "" if parentCellIndexPath?.row == 1 {
if fullnameParts.count == 2 {
newFullname = "\(newText) \(fullnameParts[1])"
}
else {
newFullname = newText
}
}
else {
newFullname = "\(fullnameParts[0]) \(newText)"
} cellDescriptors[0][0].setValue(newFullname, forKey: "primaryTitle")
tblExpandable.reloadData()
}

最后,是控制"Work Experience"组的滑块控件的cell.当用户改变了滑块的值,我们想要两件事情同时发生:用滑块的值更新顶级cell文本(在app中就是"experience level")同时存储滑块的值:

func sliderDidChangeValue(newSliderValue: String) {
cellDescriptors[2][0].setValue(newSliderValue, forKey: "primaryTitle")
cellDescriptors[2][1].setValue(newSliderValue, forKey: "value") tblExpandable.reloadSections(NSIndexSet(index: 2), withRowAnimation: UITableViewRowAnimation.None)
}

我们刚刚添加了最后一部分,最后再运行一下app吧!

总结

正如我开始说的,创建可展开的tableView在某些时候真的很有用,从麻烦当中创建新的视图控制器,可以用这种tableView来处理,它可以为app节省时间.在这次教程先前的部分,我向你提出了一种创建可展开tableView的方法,主要的特点就是在一个plist文件中,所有cell的描述都使用具体的属性.我向你展示了当cell显示,打开或是选中的时候,如何使用代码处理cell的描述列表;此外,我给了你一个方法通过用户输入数据来直接更新它.尽管这个示例app的表单是假的,但是也是可以存在真实的app中的.在它代表一个完整组件之前,仍然有很多事情需要做.(例如,将cell描述列表保存到文件),然而,那已经超出了我们的目标;我们最开始所想的是实现一个可展开的tableView,根据需求显示或隐藏cell,以及我们最终所做的.我相信,在这篇教程中你会找到左右有用的信息.肯定你会发现方法来改进给定的代码,或者根据你的需要来调整它.是时候说再见了,玩的开心,永远不要停止尝试!


供参考,你可以在GitHub下载完整的代码

文/hrscy(简书作者)
原文链接:http://www.jianshu.com/p/5c3b95c04c62
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

在iOS中怎样创建可展开的Table View?(下)的更多相关文章

  1. 在iOS中怎样创建可展开的Table View?(上)

    原文地址 本文作者:gabriel theodoropoulos 原文:How To Create an Expandable Table View in iOS 原文链接 几乎所有的app都有一个共 ...

  2. iOS中如何创建一个滑出式导航面板(1)

    本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板. 向右滑动 滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间.用户可以在任意时间滑出导航 ...

  3. IOS中使用.xib文件封装一个自定义View

    1.新建一个继承UIView的自定义view,假设类名叫做 MyAppVew #import <UIKit/UIKit.h> @class MyApp; @interface MyAppV ...

  4. IOS中 如何去除Tabview里面cell之间的下划线

    可以利用Tabview的separatorStyle属性来设置,选择其中的UITableViewCellSeparatorStyleNone 即可去除cell之间的下划线 self.tableView ...

  5. iOS中使用 Reachability 检测网络

    iOS中使用 Reachability 检测网络 内容提示:下提供离线模式(Evernote).那么你会使用到Reachability来实现网络检测.   写本文的目的 了解Reachability都 ...

  6. 从零开始学ios开发(十二):Table Views(中)UITableViewCell定制

    我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...

  7. ios中的任务分段

    工作比较忙,蛮久没有写东西了,今天我要写的是ios中的任务分段.大多数的情况下,我们用不到任务分段,但是如果我们是在执行比较频繁的函数或者这个函数是比较耗时, 某一条件下,我要执行新的任务,并且取消上 ...

  8. 创建一个Table View

    在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标 在课程结束时,你将能够: 创 ...

  9. 从零开始学ios开发(十二):Table Views(上)

    这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messa ...

随机推荐

  1. arm工作模式笔记

    linux用户态程序即应用程序,在user模式 linux内核运行在svc模式 arm七个模式: usr用户模式 fiq快速中断模式 irq普通中断模式 supervior   svc模式 abort ...

  2. 在java中如何用键盘输入一个数,字符,字符串

    一,利用 Scanner 实现从键盘读入integer或float 型数据 import java.util.*; public class test { public static void mai ...

  3. [原创]java WEB学习笔记96:Spring学习---Spring简介及HelloWord

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. 你应该知道的基础 Git 命令

    我们在早先一篇文章中已经快速介绍过 Vi 速查表了.在这篇文章里,我们将会介绍开始使用 Git 时所需要的基础命令. Git Git 是一个分布式版本控制系统,它被用在大量开源项目中.它是在 2005 ...

  5. VIJOS P1540 月亮之眼

    [题目大意] 有多个珠子,给出部分珠子之间的相对上下位置和间距,问你这些珠子在满足给出的条件下,是否能把珠子排列在一条竖直直线上,如果能,求出每个珠子距离最高的珠子的距离,珠子的位置可重叠. [分析] ...

  6. 用JS写的放大镜

    代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  7. VMWare12 安装 OSX 10.10

    推荐电脑配置 1:Inter I5及以上 (A卡请自行百度大神解决方案) 必须开启CPU虚拟化:开机进入 BIOS ---> Intel Virtualization Technology--- ...

  8. iOS 之 assign、retain、copy、nonatomic

    1. assign 1.1. 普通赋值 一般用于基本类型 1.2. 常见委托设计模式 防止循环引用 2. retain 保留计数,获取了对象的所有权.引用计数在原有基础上加1. 3. copy 同re ...

  9. extjs__(grid Panel绑定数据)

    1.修改面板名称 双击My Panel  就可以进行修改 2拖入一个grid  panel绑定数据 3.创建一个model  只是为了创建一个模型  相当于java中的模型层  只是数据的一个标准 4 ...

  10. mysql数据库允许远程连接

    1.验证初始是否允许远程连接 由于本次虚拟机IP为192.168.2.120,因此我们执行 mysql -h 192.168.20.120 -P 3306 -u root -proot(备注:-pro ...