iOS 9 上的 UITableViewHeaderFooterView 宽度问题

Posted 2023-03-10

【中文标题】iOS 9 上的 UITableViewHeaderFooterView 宽度问题

【英文标题】：UITableViewHeaderFooterView width issue on iOS 9

【发布时间】：2019-03-07 12:56:41

【问题描述】：

我通过子类化 UITableViewHeaderFooterView 创建了一个自定义 tableView 标头，它在 ios 10 及更高版本上工作正常，但在 iOS 9 上，宽度不随 tableView 边界调整。我使用的步骤：-New File > CocoaTouchClass > CustomHeader:UITableViewCell。我已手动将UITableViewCell 类更改为UITableViewHeaderFooterView。

2) 在 vi​​ewDidLoad 中注册。

tableView.register(UINib(nibName: "CustomHeader", bundle: nil),forHeaderFooterViewReuseIdentifier: CustomHeader.reuseIdentifier)

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
        let customHeader = tableView.dequeueReusableHeaderFooterView(withIdentifier: CustomHeader.reuseIdentifier) as! CustomHeader 
return customHeader

自定义标头

class CustomHeader: UITableViewHeaderFooterView 
class var reuseIdentifier: Stringreturn String(describing: self)

override func awakeFromNib() 
    super.awakeFromNib()
    // Initialization code
    self.contentView.backgroundColor = UIColor(red: 244/255, green: 244/255, blue: 245/255, alpha: 1)

视图控制器

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? 
    let customHeader = tableView.dequeueReusableHeaderFooterView(withIdentifier: CustomHeader.reuseIdentifier) as! CustomHeader 
return customHeader

iOS 9 上的结果

iOS 10 及更高版本的结果

【问题讨论】：

你没有设置标题的矩形。

我已经尝试过这个`customHeader.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: 50)` 但结果还是一样。

不知道你在哪里设置的。

我是在 viewForHeaderInSection 中设置的

使用 UIView (xib) 创建页脚视图。

【参考方案1】：

方法 1：在代码中使用 UIView 创建页脚视图

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? 
    let footerRect = CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 40.0)
    let footerView = UIView(frame: footerRect)
    footerView.backgroundColor = UIColor.green
    let label = UILabel(frame: CGRect(x: 0.0, y: 4.0, width: 200.0, height: 20.0))
    label.text = "Hello"
    footerView.addSubview(label)
    return footerView

方法 2：使用连接 IBOutlet 的 UIView (.xib) 对象创建页脚视图

a) 通过选择“文件”>“新建”>“文件”来创建视图文件。选择用户界面下的查看。命名一个文件。例如，命名 FooterView.xib。

b) 通过选择 File > New > File 创建一个UIView 子类文件。在 Source 下选择 Cocoa Touch Class。选择 UIView 子类后命名文件。例如，命名 FooterView.swift。

c) 选择View 文件。并在中间窗格中选择File's Owner。然后将UIView 子类名（FooterView）设置为类。打开View 文件和UIView subclass 文件。将后者的 IBOutlet 连接到前者的Content View。

import UIKit

class FooterView: UIView 
    @IBOutlet var contentView: UIView!
    @IBOutlet weak var myLabel: UILabel!

    override init(frame: CGRect) 
        super.init(frame: frame)
        commonInit()
    

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
        commonInit()
    

    private func commonInit() 
        Bundle.main.loadNibNamed("FooterView", owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = self.bounds
    

    override func awakeFromNib() 
        super.awakeFromNib()

        myLabel.text = "My footer"
    

d) 将UIView 对象添加到视图控制器。 （见下图。）设置类名（FooterView）。

e) 将页脚视图对象连接到视图控制器。

f) 准备表格视图的viewForFooterInSection 委托方法。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource 
    // MARK: - Variables
    let list = ["George", "Nancy", "Jim"]

    // MARK: - IBOutlet
    @IBOutlet var footerView: FooterView!
    @IBOutlet weak var tableView: UITableView!

    // MARK: - IBAction

    // MARK: - Life cycle
    override func viewDidLoad() 
        super.viewDidLoad()


    

    // MARK: - TableView
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return list.count
    

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = list[indexPath.row]
        return cell
    

    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? 
        let footerRect = CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 40.0)
        footerView.frame = footerRect
        return footerView