[IOS]如何自定义UITableView的section样式

一.如何配置section

参考:https://www.youtube.com/watch?v=-yeaLC0jgss

配置无标题section:

let sections = [" "," "]

 不能直接"",IDE会默认为没有section

配置DataSource:

menuList = [
            [menuPingTest,menuPortForword,menuDhcpRes],
            [menuDataTraffic]
        ]

 配置表:

func initView() {
        advancedTable.dataSource = self
        advancedTable.delegate = self
        advancedTable.backgroundColor = uiStyleUtil.getBackGroundGrayColor()
        advancedTable.tableFooterView = UIView.init(frame: CGRect.zero)  //不显示无数据的空行
        advancedTable.separatorColor = uiStyleUtil.getTableLineGrayColor()
    }

 section基本:

//Section
    func numberOfSections(in tableView: UITableView) -> Int {
        return self.sections.count
    }
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return self.sections[section]
    }
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 20
    }

 table cell基本:

//table view
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 50
    }
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return menuList[section].count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellId = "AdvancedSubCell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellId)
        
        cell?.textLabel?.text = menuList[indexPath.section][indexPath.row]
        cell?.detailTextLabel?.text = ""
        cell?.backgroundColor = UIColor.clear
        cell?.selectionStyle = UITableViewCell.SelectionStyle.none
        return cell!
    }

 

二.自定义section相关:

1.如果section行跟随table滚动,在storyboard table属性那里选择grouped

但是这里有个问题就是选择grouped以后,section的样式就会和cell一样,配置背景色等等是没有效果的

section的separator line样式不能设置,默认就是全屏宽(即使cell设置了separator insert)

 

2.不选择grouped,选择plain可以自定义:

有两种方式设置section的样式:

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int)

 这种可以做简单的自定义,例如背景色,字体颜色等等

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        view.tintColor = uiStyleUtil.getBackGroundGrayColor()
        let header = view as! UITableViewHeaderFooterView
        header.textLabel?.textColor = UIColor.white
        separatorView.backgroundColor = uiStyleUtil.getTableLineGrayColor()
        header.addSubview(separatorView)
    }

 但是这种方式不能有针对性地设置separator line:

所以有另外一种定义:

参考:https://stackoverflow.com/questions/45139262/tableview-section-seperator-line

 

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?

 

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView?

 这种和第一种会冲突,只能选择一种.这种是把section给一个header view和footer view,把他们给不同背景色就可以看出来,如果两个都配置了,会发现section的高度会变大,因为多了一个view

那如果想给section加上上下分割线怎么做呢,我们只要一个view,我的例子是:

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView()
        let separatorHeaderView = UIView(frame: CGRect(x: tableView.separatorInset.left,
                                                       y: headerView.frame.height,
                                                       width: tableView.frame.width - tableView.separatorInset.right - tableView.separatorInset.left,
                                                       height: 1))
        let separatorFooterView = UIView(frame: CGRect(x: tableView.separatorInset.left,
                                                       y: headerView.frame.height + 20,
                                                       width: tableView.frame.width - tableView.separatorInset.right - tableView.separatorInset.left,
                                                       height: 1))
        separatorHeaderView.backgroundColor = uiStyleUtil.getTableLineGrayColor()
        separatorFooterView.backgroundColor = uiStyleUtil.getTableLineGrayColor()
        if section == 1 {
            headerView.addSubview(separatorHeaderView)
        }
        headerView.addSubview(separatorFooterView)
        print("header view: frame-h: \(headerView.frame.height) bounds-h: \(headerView.bounds.height)")
        return headerView
    }

 这样,样式就是