Swift - 使用xib自定义表格中分组section的header和footer

在之前的文章中：Swift - 修改tableView分组（section）头部、尾部的字体颜色和大小。我介绍了如何通过纯代码的方式来自定义表格（tableView）里每个分组（section）的 header和 footer。但如果要实现的样式比较复杂，那么使用纯代码实现就会比较麻烦，这时我们还可以借助 xib 来实现。

下面演示如何使用 xib 来自定义 section 的 header 和 footer，对于自定义整个 tableView 的 header 和 footer 的原理也一样的。

 

1，样例效果图

我们将分组头背景色改成绿色，文字改成白色。同时在文字前面添加了个图标。

 

 

2，创建自定义的分组头

（1）首先新建一个 XIB 文件（带有 View 的），名叫 MyTableViewSectionHeader

 

 

（2）将 xib 文件中 View 的 Size 修改为 Freedom，Status bar 修改为 None。并将其调整成合适的尺寸。

 

 

（3）在 View 中添加一个 UIImage 和一个 UILabel，分别用来显示图标和分组标题。并设置好它们的相关属性和约束。

 

 

（4）选择 Label，将其 Tag 设置为 1。后面使用时通过这个 tag 来取得标签并进行赋值。

 

 

由于这个自定义的分组头比较简单，所以我这里只需要创建一个 xib 文件就够了。不需要再在创建对应实现类。
关于 xib 如何关联对应的 UIView 类，可以参考我之前的这篇文章：Swift - XIB结合UIView制作自定义组件（xib加载绘制UIView）

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

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 表格视图"])         ];                   print(self.allnames)                   self.adHeaders = [             "常见 UIKit 控件",             "高级 UIKit 控件"         ]                   //创建表视图         self.tableView = UITableView(frame:self.view.frame, style:.grouped)         self.tableView!.delegate = self         self.tableView!.dataSource = self         self.tableView!.contentInset = UIEdgeInsetsMake(20, 0, 0, 0)         //创建一个重用的单元格         self.tableView!.register(UITableViewCell.self,                                  forCellReuseIdentifier: "SwiftCell")         self.view.addSubview(self.tableView!)     }           //在本例中，有2个分区     func numberOfSections(in tableView: UITableView) -> Int {         return 2;     }           //返回表格行数（也就是返回控件数）     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {         let data = self.allnames?[section]         return data!.count     }           //返回分区头部视图     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {         let headerView = Bundle.main.loadNibNamed("MyTableViewSectionHeader",                                                   owner: self, options: nil)?[0] as! UIView         let titleLabel = headerView.viewWithTag(1) as! UILabel         titleLabel.text = self.adHeaders?[section]         return headerView     }           //返回分区头部高度     func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {         return 50     }           // UITableViewDataSource协议中的方法，该方法的返回值决定指定分区的尾部     func tableView(_ tableView:UITableView, titleForFooterInSection section:Int) -> String? {         let data = self.allnames?[section]         return "有\(data!.count)个控件"     }           //创建各单元显示内容(创建参数indexPath指定的单元）     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)         -> UITableViewCell {             //为了提供表格显示性能，已创建完成的单元需重复使用             let identify:String = "SwiftCell"             //同一形式的单元格重复使用，在声明时已注册             let cell = tableView.dequeueReusableCell(                 withIdentifier: identify, for: indexPath)             cell.accessoryType = .disclosureIndicator                           let secno = indexPath.section             var data = self.allnames?[secno]             cell.textLabel?.text = data![indexPath.row]             return cell     }           override func didReceiveMemoryWarning() {         super.didReceiveMemoryWarning()     } }

源码下载：hangge_1392.zip
原文出自：www.hangge.com  转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1392.html