首页 > 解决方案 > 如何向 UITableViewController 添加粘性页脚?

问题描述

我正在 Swift Playgrounds for iPad 中编写一个模拟消息应用程序。到目前为止,我有UITableViewController一个自定义单元格,其背景颜色每隔一个单元格都会改变。现在,我想在屏幕底部添加一个粘性页脚,其中包含一个文本字段和一个发送按钮,以便用户可以发送消息。我不太确定如何解决这个问题。有任何想法吗?这是我到目前为止所拥有的:

import UIKit
import PlaygroundSupport

class ViewController: UITableViewController {

    let textMessages = [
        "Here's my very first message",
        "I'm going to message another long message that will word wrap",
        "I'm going to message another long message that will word wrap, I'm going to message another long message that will word wrap, I'm going to message another long message that will word wrap",
        "Somejfjfidiskkejejsjsjsjdjjdj blah blah blah"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        navigationItem.title = "Messages"
        navigationController?.navigationBar.prefersLargeTitles = true

        tableView.register(ChatMessageCell.self, forCellReuseIdentifier: "cell_1")
        tableView.separatorStyle = .none
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return textMessages.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell_1", for: indexPath) as! ChatMessageCell
        cell.selectionStyle = .none

        if indexPath.row % 2 == 1{
            cell.messageLabel.text = textMessages[indexPath.row]
            //cell.setupConstraints(side: 1)
            cell.bubbleBackgroundView.backgroundColor = UIColor(white: 0.9, alpha: 1)
            return cell
        }else{
            cell.messageLabel.text = textMessages[indexPath.row]
            //cell.setupConstraints(side: 0)
            cell.bubbleBackgroundView.backgroundColor = .blue
            return cell
        }
    }
    //let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! ChatMessageCell
    //        cell.textLabel?.text = "We want to provide a longer string that is actually going to wrap onto the next line and maybe even a third line."
    //        cell.textLabel?.numberOfLines = 0
}

class ChatMessageCell: UITableViewCell {

    let messageLabel = UILabel()
    let bubbleBackgroundView = UIView()
    var leadingAnchorConstant = CGFloat()

    func setupConstraints(side: Int){
        if side == 1{
            leadingAnchorConstant = frame.size.width - 176
        }else{
            leadingAnchorConstant = 32
        }
    }

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        bubbleBackgroundView.backgroundColor = .yellow
        let gradient = CAGradientLayer()

        bubbleBackgroundView.layer.shadowOpacity = 0.35
        bubbleBackgroundView.layer.shadowRadius = 6
        bubbleBackgroundView.layer.shadowOffset = CGSize(width: 0, height: 0)
        bubbleBackgroundView.layer.shadowColor = UIColor.black.cgColor

        bubbleBackgroundView.layer.cornerRadius = 25
        bubbleBackgroundView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(bubbleBackgroundView)

        addSubview(messageLabel)
        //        messageLabel.backgroundColor = .green
        messageLabel.text = "We want to provide a longer string that is actually going to wrap onto the next line and maybe even a third line."
        messageLabel.numberOfLines = 0

        messageLabel.translatesAutoresizingMaskIntoConstraints = false

        // lets set up some constraints for our label
        let constraints = [messageLabel.topAnchor.constraint(equalTo: topAnchor, constant: 32),
                           messageLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 32),
                           messageLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -32),
                           messageLabel.widthAnchor.constraint(equalToConstant: 250),

                           bubbleBackgroundView.topAnchor.constraint(equalTo: messageLabel.topAnchor, constant: -16),
                           bubbleBackgroundView.leadingAnchor.constraint(equalTo: messageLabel.leadingAnchor, constant: -16),
                           bubbleBackgroundView.bottomAnchor.constraint(equalTo: messageLabel.bottomAnchor, constant: 16),
                           bubbleBackgroundView.trailingAnchor.constraint(equalTo: messageLabel.trailingAnchor, constant: 16),
        ]

        NSLayoutConstraint.activate(constraints)

        //        messageLabel.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

PlaygroundPage.current.liveView = ViewController()

标签: iosswiftuitableviewuikit

解决方案


我认为您正在寻找这些 tableview 委托方法来设置自定义页脚:

override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
     //let cell = tableView.dequeueReusableCell(withIdentifier: "footer_cell") as! FooterCell
     // Set up cell
     let cell = UITableViewCell()
     cell.textLabel?.text = "Footer"
     cell.backgroundColor = .white
     return cell
}

override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
     return 40.0 // Set height of footer
}

您可以像在 cellForRow 中使用它们一样使用自定义表格视图单元格 - 我只是使用简单的默认单元格设置它以生成工作示例 - 您还可以创建 UIView() 以返回此方法

默认情况下,它会粘在表格视图上方的屏幕底部 - 如果不是这种情况,或者您希望它粘在表格底部,如果使用情节提要,您可以在属性检查器中更改此设置:

在此处输入图像描述

样式 - 普通 -> 粘在 tableview 顶部的视图底部

样式 - 分组 -> 无论多高都坚持到 tableview 的底部

尽管不使用页脚的另一个选择可能更好的是在 UIViewController 上使用 UITableView - 这将为您提供空间来直接在 UITableView 下的视图控制器上添加您的 TextView、按钮和任何其他内容

左边是 UITableViewController - 右边是 UIViewController 和 UITableView

例子

由你决定如何播放它,但我建议第二个选项在 ViewController 上提供最大的灵活性

希望这可以帮助!


推荐阅读