Swift - 使用表格组件(UITableView)实现分组列表

1,样例说明:
(1)列表以分组的形式展示

(2)同时还自定义分区的头部和尾部
(3)点击列表项会弹出消息框显示该项信息。

2,效果图:

   

3,代码如下:


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

import UIKit

class ViewController: UIViewController , UITableViewDelegate, UITableViewDataSource{

    

    var tableView:UITableView?

       

    var allnames:Dictionary<Int, [String]>?

    

    var adHeaders:[String]?

    

    override func loadView() {

        super.loadView()

    }

    

    override func viewDidLoad() {

        super.viewDidLoad()

    

        //初始化数据,这一次数据,我们放在属性列表文件里

        self.allnames =  [

            0:[String]([

            "UILabel 标签",

            "UITextField 文本框",

            "UIButton 按钮"]),

            1:[String]([

            "UIDatePiker 日期选择器",

            "UIToolbar 工具条",

            "UITableView 表格视图"])

        ];

        

        println(self.allnames)

        

        self.adHeaders = [

            "常见 UIKit 控件",

            "高级 UIKit 控件"

        ]

        

        //创建表视图

        self.tableView = UITableView(frame:self.view.frame, style:UITableViewStyle.Grouped)

        self.tableView!.delegate = self

        self.tableView!.dataSource = self

        //创建一个重用的单元格

        self.tableView!.registerClass(UITableViewCell.self, forCellReuseIdentifier: "SwiftCell")

        self.view.addSubview(self.tableView!)

        

        //创建表头标签

        var headerLabel = UILabel(frame: CGRectMake(0, 0, self.view.bounds.size.width, 30))

        headerLabel.backgroundColor = UIColor.blackColor()

        headerLabel.textColor = UIColor.whiteColor()

        headerLabel.numberOfLines = 0

        headerLabel.lineBreakMode = NSLineBreakMode.ByWordWrapping

        headerLabel.text = "高级 UIKit 控件"

        headerLabel.font = UIFont.italicSystemFontOfSize(20)

        self.tableView!.tableHeaderView = headerLabel

    }

    

    //在本例中,有2个分区

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

        return 2;

    }

    

    //返回表格行数(也就是返回控件数)

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

        var data = self.allnames?[section]

        return data!.count

    }

    

    

    // UITableViewDataSource协议中的方法,该方法的返回值决定指定分区的头部

    func tableView(tableView:UITableView, titleForHeaderInSection

        section:Int)->String

    {

        var headers =  self.adHeaders!;

        return headers[section];

    }

    // UITableViewDataSource协议中的方法,该方法的返回值决定指定分区的尾部

    func tableView(tableView:UITableView, titleForFooterInSection

        section:Int)->String

    {

        var data = self.allnames?[section]

        return "有\(data!.count)个控件"

    }

    

    

    //创建各单元显示内容(创建参数indexPath指定的单元)

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

        -> UITableViewCell

    {

        //为了提供表格显示性能,已创建完成的单元需重复使用

        let identify:String = "SwiftCell"

        //同一形式的单元格重复使用,在声明时已注册

        let cell = tableView.dequeueReusableCellWithIdentifier(identify, forIndexPath: indexPath)

            as UITableViewCell

        cell.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator

        

        var secno = indexPath.section

        var data = self.allnames?[secno]

        cell.textLabel?.text = data![indexPath.row]

        

        return cell

    }

    

    // UITableViewDelegate 方法,处理列表项的选中事件

    func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!)

    {

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

        

        var itemString = self.allnames![indexPath.section]![indexPath.row]

        

        var alertview = UIAlertView();

        alertview.title = "提示!"

        alertview.message = "你选中了【\(itemString)】";

        alertview.addButtonWithTitle("确定")

        alertview.show();

        

    }

    

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        

        // Dispose of any resources that can be recreated.

    }

}

时间: 2024-10-07 19:10:53

Swift - 使用表格组件(UITableView)实现分组列表的相关文章

【AmazeUI】折叠式卡片布局,整合内容列表、表格组件

折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发异彩. AmazeUI也提供了折叠式卡片布局,虽然官网上有例子,但是这种折叠式卡片布局,整合内容列表.表格组件还是需要一番功夫. 比如如下图,利用AmazeUI的折叠式卡片布局,整合其提供的内容列表与表格组件. 整个页面的代码如下: <!--使用HTML5开发--> <!doctype html> <html class="no-js"> <html> <h

第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件

jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的使用方法,这个组件依赖 于 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <table id="box" class="easyui-propertygrid" style="width:300px" data-opt

DataGrid( 数据表格) 组件[3]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件. 一. 样式设置 //样式设置$('#box').datagrid({url : 'user.php',title : '用户列表',width : 500,iconCls : 'icon-search',striped : true,nowrap : true,fitColumns :

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

DataGrid( 数据表格) 组件[2]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件. 一.排序功能 //分页和排序$('#box').datagrid({url : 'user.php',width : 500,title : '用户列表',iconCls : 'icon-search',columns : [[{field : 'user',title : '帐号',

JS表格组件神器bootstrap table详解(基础版)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用.

Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demoback.lalalaweb.com  前台:demo.lalalaweb.com 演示过程中可能会发现bug,希望即时留言反馈,谢谢 源码下载:https://github.com/sutianbinde/classweb               //不是全部的代码,每次更新博客才更新代码 学