Swift - 动态添加删除TableView的单元格(以及内部元件)

在Swift开发中,我们有时需要动态的添加或删除列表的单元格。

比如我们做一个消息提醒页面,默认页面只显示两个单元格。当点击第二个单元格(时间标签)时,下面会再添加一个单元格放置日期选择控件(同时新增单元格的高度也会变化)。而再次点击第二个单元格,日期选择控件又会隐藏。

   


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

import UIKit

class MyTableViewController: UITableViewController {

    

    @IBOutlet weak var dueDateLabel: UILabel!

    

    //日期选择器显示状态

    var datePickerVisible:Bool = false

    override func viewDidLoad() {

        super.viewDidLoad()

      

        self.title = "添加任务"

        //去除尾部多余的空行

        self.tableView.tableFooterView = UIView(frame:CGRectZero)

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

    }

    

    //选择cell的row之后

    override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

        self.tableView.deselectRowAtIndexPath(indexPath, animated: true)

       

        //当执行到日期选择器上一行的时候,可以判断是否要显示日期选择器了

        if indexPath.section == 0 && indexPath.row == 1{

            if !datePickerVisible{

                self.showDatePicker()

            }else{

                self.hideDatePicker()

            }

        }

        

        println(indexPath.row)

    }

    

    //显示日期选择器

    func showDatePicker(){

        //日期选择器的状态设为打开

        datePickerVisible = true

        

        let indexPathDatePicker = NSIndexPath(forRow: 2, inSection: 0)

        self.tableView.insertRowsAtIndexPaths([indexPathDatePicker],

            withRowAnimation: UITableViewRowAnimation.Automatic)

        

    }

    

    //隐藏日期选择器

    func hideDatePicker(){

        if datePickerVisible {

            //日期选择器的状态设为关闭

            datePickerVisible = false

            let indexPathDatePicker = NSIndexPath(forRow: 2, inSection: 0)

            self.tableView.deleteRowsAtIndexPaths([indexPathDatePicker],

                withRowAnimation: UITableViewRowAnimation.Fade)

        }

    }

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {

        return 1

    }

    

    //设置cell

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)

        -> UITableViewCell {

        //因为日期选择器的位置在日期显示Label下面。它的位置就是第2个section  和第3个row

        if indexPath.section == 0 && indexPath.row == 2{

            //用重用的方式获取标识为DatePickerCell的cell

            var cell = tableView.dequeueReusableCellWithIdentifier("DatePickerCell")

                as UITableViewCell?

            //如果没找到就创建一个

            if cell == nil {

                //创建一个标识为DatePickerCell的cell

                cell = UITableViewCell(style: UITableViewCellStyle.Default,

                    reuseIdentifier: "DatePickerCell")

                //设置cell的样式

                cell?.selectionStyle = UITableViewCellSelectionStyle.None

                //创建日期选择器

                var datePicker = UIDatePicker(frame: CGRectMake(0.0, 0.0, 320.0, 216.0))

                //给日期选择器的tag

                datePicker.tag = 100

                //将日期选择器区域设置为中文,则选择器日期显示为中文

                datePicker.locale = NSLocale(localeIdentifier: "zh_CN")

                //将日期选择器加入cell

                cell?.contentView.addSubview(datePicker)

                //注意:action里面的方法名后面需要加个冒号“:”

                datePicker.addTarget(self, action: "dateChanged:",

                    forControlEvents: UIControlEvents.ValueChanged)

            }

            return cell!

        }else{

            return super.tableView(tableView, cellForRowAtIndexPath: indexPath)

        }

    }

    

    //日期选择器响应方法

    func dateChanged(datePicker : UIDatePicker){

        //更新提醒时间文本框

        let formatter = NSDateFormatter()

        //日期样式

        formatter.dateFormat = "yyyy年MM月dd日 HH:mm:ss"

        self.dueDateLabel.text = formatter.stringFromDate(datePicker.date)

    }

    //根据日期选择器的隐藏与否决定返回的row的数量

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        

        if section == 0  && datePickerVisible{

            return 3

        }else{

            return super.tableView(tableView, numberOfRowsInSection: section)

            

        }

    }

    //因为日期选择器插入后会引起cell高度的变化,所以要重新设置

    override func tableView(tableView: UITableView,

        heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

        //当渲染到达日期选择器所在的cell的时候将cell的高度设为217

        if indexPath.section == 0 && indexPath.row == 2{

            return 216.0

        }else{

            return super.tableView(tableView, heightForRowAtIndexPath: indexPath)

        }

    }

    //当覆盖了静态的cell数据源方法时需要提供一个代理方法。

    //因为数据源对新加进来的日期选择器的cell一无所知,所以要使用这个代理方法

    override func tableView(tableView: UITableView,

        indentationLevelForRowAtIndexPath indexPath: NSIndexPath) -> Int {

        if indexPath.section == 0 && indexPath.row == 2{

            //当执行到日期选择器所在的indexPath就创建一个indexPath然后强插

            let newIndexPath = NSIndexPath(forRow: 0, inSection: indexPath.section)

            return super.tableView(tableView, indentationLevelForRowAtIndexPath: newIndexPath)

        }else{

            return super.tableView(tableView, indentationLevelForRowAtIndexPath: indexPath)

        }

    }

}

时间: 2024-10-07 23:28:24

Swift - 动态添加删除TableView的单元格(以及内部元件)的相关文章

用Javascript动态添加删除HTML元素实例 (转载)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>用javascript动态添加删除html元素</title> <script type="text/jav

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

Hadoop动态添加/删除节点(datanode和tacktracker)

总的来说,正确的做法是优先通过配置文件,再在具体机器上进行相应进程的启动/停止操作. 网上一些资料说在调整配置文件的时候,优先使用主机名而不是IP进行配置. 总的来说添加/删除DataNode和TaskTracker的方法非常相似,只是操作的配置项和使用的命令有微小差异. 1. DataNode 1.0 配置文件 在master/namenode下修改配置文件conf/mapred-site.xml. 关键参数dfs.hosts和dfs.hosts.exclude. 注意:不同hadoop版本的

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点

js实现网页收藏功能,动态添加删除网址

<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"> <script> function add(){ var name = document.getElementById("name").value; var url = document.getElementById("url").value; var

编辑 Ext 表格(一)——— 动态添加删除行列

一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行  gridStore.add({}); (2) 动态删除表格的行 gridStore.removeAt(gridStore.count() - 1); 二.动态增删列 在 ext 表格中,动态添加列主要通过修改表格绑定的 column 元素, 通过对 column 元素集进行添加或删除,然后重新渲染表格,就能实现表

安卓动态添加删除多个控件

新手上路,没找到动态添加删除多个控件,捣鼓了个,做错的地方麻烦大家说下 activity_main.xml: <Button        android:id="@+id/add"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:onClick="myclick" 

Jquery 动态添加删除元素 用js添加的元素无法删除问题

用jquery方法的绑定侦听和销毁来解决动态div的增加删除: 正确代码: <script type="text/javascript" > $(document).ready(function(){  bindListener(); }) function addimg(){  $("#mdiv").append('<div ><input type="file" name="img[]" /&

TableView静态单元格实现

整理TableView静态单元格的使用方法 需要实现的页面: 基本框架就是四个静态单元格,在此整理一下TableView的使用细节. 1.首先创建一个group,此内有两个类,一个是AccountBoundingViewController,继承自UIViewController:一个是AccountBoundingViewCell,继承自UITableViewCell. 2.先在xib中构造cell,内容如下: 由一个ImageView,一个Label,一个Button组成(在此并没有设定co