带有tableFooterView的空UITableView

时间:2019-05-02 10:55:09

标签: ios swift uitableview tablefooterview

我有一个UITableView,当dataSource为空时,我想在其中显示一条消息。我使用众所周知的使用以下扩展名设置backgroundView的方法来做到这一点:

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

我将其设置如下:

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

self.tableView.reloadData()

没什么大不了的,我们所有人都已经看到并可能使用了它。而且效果很好。但是,我现在在tableFooterView的底部有一个UIButton。该按钮位于UITableView的顶部,因为它会自动将其自身自动定位在最后一个单元格的正下方,这正是我在有数据时要的位置,但是现在在屏幕中间会显示空消息,而该按钮在它上面。我该如何解决这个问题,以便在dataSource为空时出现某种框架?

为说明: Current state

2 个答案:

答案 0 :(得分:0)

因此,现在您将tableView backgroundView设置为emptyView。您可以看一下您的dataSource,如果它为空-只需使用此消息返回空状态的新单元格。

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

答案 1 :(得分:0)

编写扩展名

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
}