在iOS中怎样创建可展开的Table View?(下)
接上篇:在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里,我们将执行诗歌不同的任务:
- 我们要找到那个被点击的顶级cell的行索引.事实上,我们会执行一个搜索指向cell描述符的起始位置,以及第一个顶层cell被发现是可展开的才是我们想要的.
- 我们设置了显示选中cell的值,作为顶层cell的textLabel的文本内容.
- 当顶层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 {
...
}
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下载完整的代码