ios - Empty UITableView with tableFooterView

Question

I have a UITableView in which I want to show a message when the dataSource is empty. I do this with the well-known method of setting the backgroundView using the following extension:

extension UITableView {

    func setEmptyMessage(_ message: String, _ image: String) {
        let emptyView: UIView = {
            let emptyView = UIView(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))
            return emptyView
        }()

        let contentView: UIView = {
            let contentView = UIView()
            contentView.translatesAutoresizingMaskIntoConstraints = false
            return contentView
        }()

        let messageLabel = UILabel()
        let messageCommentStyle = NSMutableParagraphStyle()
        messageCommentStyle.lineHeightMultiple = 1.2

        let attributedString = NSMutableAttributedString(string: message)
        attributedString.addAttribute(NSAttributedString.Key.foregroundColor, value: lightFeedUserNameFontColor, range: NSRange(location: 0, length: attributedString.length))
        attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value: messageCommentStyle, range: NSRange(location: 0, length: attributedString.length))
        attributedString.addAttribute(NSAttributedString.Key.font, value: UIFont.systemFont(ofSize: normalFontSize), range: NSRange(location: 0, length: attributedString.length))

        messageLabel.attributedText = attributedString
        messageLabel.numberOfLines = 0
        messageLabel.font = UIFont.systemFont(ofSize: normalFontSize)
        messageLabel.textAlignment = .center
        messageLabel.sizeToFit()
        messageLabel.translatesAutoresizingMaskIntoConstraints = false

        let errorImage: UIImageView = {
            let errorImage = UIImageView()
            errorImage.translatesAutoresizingMaskIntoConstraints = false
            return errorImage
        }()

        self.backgroundView = emptyView

        emptyView.addSubview(contentView)
        contentView.addSubview(errorImage)
        contentView.addSubview(messageLabel)

        contentView.centerYAnchor.constraint(equalTo: emptyView.centerYAnchor).isActive = true
        contentView.centerXAnchor.constraint(equalTo: emptyView.centerXAnchor).isActive = true
        contentView.leadingAnchor.constraint(equalTo: emptyView.leadingAnchor, constant: normalSpacing * 3).isActive = true
        contentView.trailingAnchor.constraint(equalTo: emptyView.trailingAnchor, constant: -(normalSpacing * 3)).isActive = true
        contentView.topAnchor.constraint(equalTo: errorImage.topAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: messageLabel.bottomAnchor).isActive = true

        messageLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
        messageLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
        messageLabel.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true
    }

    func restore() {
        self.backgroundView = nil
    }
}

And I set it like this:

if(tableData.isEmpty) {
    self.tableView.setEmptyMessage("No results!", "none")
} else {
    self.tableView.restore()
}

self.tableView.reloadData()

No big deal, we all have seen this and probably used it. And it works great. However, I now have a UIButton on the bottom placed in the tableFooterView. This button stays on top of the UITableView because it automatically positions itself right under the last cell, which is precisely what I want when there is data, but now the empty message is shown in the middle of the screen while the button is above it. How can I fix this so there is a sort of frame when the dataSource is empty?

To illustrate:

Answer 1

写一个扩展

extension UITableView
{
    func addErrorMessageLabel(noDataText:String = "No data available")->UILabel
    {
        let noDatalabel:UILabel!
        noDatalabel=UILabel(frame: CGRect(x: self.frame.size.width/2-200, y: self.frame.size.height/2-50, width: 400, height: 100))
        noDatalabel.textColor = textThemeColor
        noDatalabel.text=noDataText
        noDatalabel.numberOfLines=0
        noDatalabel.textAlignment = .center
        noDatalabel.isHidden=true
        self.addSubview(noDatalabel)
        self.alignCenterToSuperView(item: noDatalabel, horizentally: true, vertically: true,height: 100,width: 400)
        return noDatalabel
    }
    func alignCenterToSuperView(item:UIView,horizentally:Bool,vertically:Bool , height:Int, width:Int)
{
    if horizentally
    {
        item.translatesAutoresizingMaskIntoConstraints = false
        let xConstraint = NSLayoutConstraint(item: item, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0)
        NSLayoutConstraint.activate([xConstraint])
    }
    if vertically
    {
        item.translatesAutoresizingMaskIntoConstraints = false
        let yConstraint = NSLayoutConstraint(item: item, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0)
        NSLayoutConstraint.activate([yConstraint])
    }
    let Height = NSLayoutConstraint(item: item, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:CGFloat(height))
    item.addConstraint(Height)
    let Width = NSLayoutConstraint(item: item, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant:CGFloat(width))
    item.addConstraints([Width,Height])
}
}

在您的 ViewController 创建

    var noDataLabel:UILabel!

在你的 ViewDidLoad

 override func viewDidLoad() {
    super.viewDidLoad()
    noDataLabel = tableView.addErrorMessageLabel()
    noDataLabel.text = "No data found" // or your message
}

最后一步

    if(tableData.isEmpty) {
    noDataLabel.isHideen = false
} else {
    noDataLabel.isHideen = true
}

Answer 2

所以现在你将你的 tableView backgroundView 设置为你的 emptyView。您可以查看您的数据源，如果它是空的 - 只需使用此消息返回新单元格的空状态。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return dataSource.count > 0 ? dataSource.count : 1
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if dataSource.count.isEmpty 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "EmptyCell")
        cell.textLabel.text = "No Results!"
        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "SomeCell")
        return cell
    }
}