简体   繁体   English

iOS 9 上的 UITableViewHeaderFooterView 宽度问题

[英]UITableViewHeaderFooterView width issue on iOS 9

I have created a custom tableView header by subclassing UITableViewHeaderFooterView, its working fine on iOS 10 and later version but on iOS 9 the width is not adjusting with the tableView bounds.我通过继承 UITableViewHeaderFooterView 创建了一个自定义 tableView 标头,它在 iOS 10 及更高版本上工作正常,但在 iOS 9 上,宽度不随 tableView 边界调整。 Steps I have used:- New File > CocoaTouchClass > CustomHeader:UITableViewCell .我使用的步骤:- New File > CocoaTouchClass > CustomHeader:UITableViewCell I have changed the UITableViewCell class to UITableViewHeaderFooterView manually.我已经改变了UITableViewCellUITableViewHeaderFooterView手动。

2) Registered it in the viewDidLoad. 2)在viewDidLoad中注册。

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
}

CustomHeader自定义标题

class CustomHeader: UITableViewHeaderFooterView {
class var reuseIdentifier: String{return 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)
}

ViewController视图控制器

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

Result on iOS 9在 iOS 9 上的结果在此处输入图片说明

Result on iOS 10 and later在 iOS 10 及更高版本上的结果在此处输入图片说明

Approach 1 : Creating a footer view with UIView in code方法一:在代码中使用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
}

Approach 2 : Creating a footer view with an IBOutlet-connected UIView (.xib) object方法 2 :使用 IBOutlet 连接的UIView (.xib) 对象创建页脚视图

a) Create a View file by choosing File > New > File. a) 通过选择文件 > 新建 > 文件来创建视图文件。 Select View under User Interface.选择用户界面下的查看。 Name a file.命名文件。 For example, name FooterView.xib.例如,命名 FooterView.xib。

b) Create a UIView subclass file by choosing File > New > File. b) 通过选择 File > New > File 创建一个UIView子类文件。 Select Cocoa Touch Class under Source.在 Source 下选择 Cocoa Touch Class。 Name the file after selecting the UIView subclass.选择 UIView 子类后命名文件。 For example, name FooterView.swift.例如,命名 FooterView.swift。

c) Select the View file. c) 选择View文件。 And select File's Owner in the middle pane.然后在中间窗格中选择File's Owner Then set the UIView subclass name (FooterView) as the class.然后将UIView子类名称(FooterView)设置为类。 Open both the View file and the UIView subclass file.打开View文件和UIView subclass文件。 Make an IBOutlet connection of the latter to the Content View of the former.将后者的 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) Add a UIView object to the view controller. d) 向视图控制器添加一个UIView对象。 (See the picture below.) Set the class name (FooterView). (见下图。)设置类名(FooterView)。

在此处输入图片说明

e) Wire the footer view object to the view controller. e) 将页脚视图对象连接到视图控制器。

f) Prepare for table view's viewForFooterInSection delegate method. 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
    }
}

在此处输入图片说明 在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM