[IOS]如何设置section的title和改变section的背景色及样式

本文链接：https://blog.youkuaiyun.com/jameskaron/article/details/104644881

本文介绍了如何在iOS中自定义UITableView的section样式，包括改变section的背景颜色、设置title以及处理分隔线遮挡的问题。推荐使用自定义section类的方法，以实现更灵活的样式定制，并提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考: https://stackoverflow.com/questions/813068/uitableview-change-section-header-color/813103

1.背景色

override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        let header = view as! UITableViewHeaderFooterView
        header.backgroundView?.backgroundColor = .white
        header.textLabel?.textColor = .black
        header.textLabel?.font = UIFont(name: "Helvetica-Bold", size: 14)
}

2. title

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sections[section]
    }

3.遮挡了分隔线

cell的分隔线:

当设置了

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 1
    }

这样section就会有一条宽屏高度为1的分隔线,这样会遮挡了cell本来自定义的分隔线问题

4.section自定义样式

根据我之前写的https://blog.youkuaiyun.com/jameskaron/article/details/104358241

自定义背景色(willDisplayHeaderView)和自定义分隔线(viewForHeaderInSection) uiview有冲突

所以不能使用return headerView这个办法

新方法是自定义一个section类,参考:https://developer.apple.com/documentation/uikit/views_and_controls/table_views/adding_headers_and_footers_to_table_sections

Illustration showing how headers and footers group together the rows of a table.

这个方法十分好用,想怎么定义都可以

但是有些地方需要注意.

先注册:

portTable.register(MyCustomSectionHeader.self, forHeaderFooterViewReuseIdentifier: "sectionHeader")

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        
        let view = tableView.dequeueReusableHeaderFooterView(withIdentifier:
            "sectionHeader") as! MyCustomSectionHeader
        
        view.title.text = sections[section]
        
        return view
    }

*** 在调用这里新建一个自定义view再view.addsubview()没有效果,想要的样式要全部做在自定义section类里面

这是我的自定义section类

import UIKit

class MyCustomSectionHeader: UITableViewHeaderFooterView {
    
    let title = UILabel()
    let seperatorLine = UIView()
    
    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
        configureContents()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureContents() {
        
        title.translatesAutoresizingMaskIntoConstraints = false
        seperatorLine.translatesAutoresizingMaskIntoConstraints = false
        
        title.textColor = .white
        title.font = UIFont.systemFont(ofSize: 13)
        
        contentView.addSubview(title)
        contentView.addSubview(seperatorLine)
        
        seperatorLine.backgroundColor = UIStyleUtil.getInstance()?.getTableLineGrayColor()
        
        // Center the image vertically and place it near the leading
        // edge of the view. Constrain its width and height to 50 points.
        NSLayoutConstraint.activate([
            
            // Center the label vertically, and use it to fill the remaining
            // space in the header view.
            title.heightAnchor.constraint(equalTo: contentView.heightAnchor),
            title.leadingAnchor.constraint(equalTo: contentView.leadingAnchor,
                                           constant: 15),
            title.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            
            seperatorLine.heightAnchor.constraint(equalToConstant: 0.5),
            seperatorLine.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 15),
            seperatorLine.trailingAnchor.constraint(equalTo:
                contentView.trailingAnchor, constant: -15),
            seperatorLine.centerYAnchor.constraint(equalTo: contentView.bottomAnchor)

            
        ])
    }
    
}

*** 大体上和Apple的sample是一样的.我加了分隔线,分隔线要显示出来必须要要通过约束的设置,我试过通过类似以下的代码:

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))

在类里面创建实例,但是没有用,只能通过约束

而且因为设置了label,所以上面willDisplayHeaderView的有修改:

func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        let header = view as! UITableViewHeaderFooterView
        
        header.backgroundView?.backgroundColor = .clear
//        header.textLabel?.textColor = .white
//        header.textLabel?.font = UIFont.systemFont(ofSize: 13)
    }

然后titleForHeaderInSection可以不用了

这种方式十分好用,同理我也可以设置footer,写一下willDisplayFooterView和viewForFooterInSection即可