Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> iOS

Cách thêm nút Submit ở cuối TableView bằng Swift

Để thêm nút Submit (hoặc bất kỳ view nào) ở cuối TableView, dùng Table View Footer (viewForFooterInSection). Footer luôn hiển thị sau cell cuối cùng của section.

Code hoàn chỉnh


class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        initTableView()
    }
    
    func initTableView() {
        let tableView = UITableView(frame: view.frame, style: .plain)
        tableView.dataSource = self
        tableView.delegate = self
        tableView.backgroundColor = .systemGray5
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        view.addSubview(tableView)
    }
    
    // DataSource
    func numberOfSections(in tableView: UITableView) -> Int { return 1 }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2  // 2 cell demo
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .systemBlue
        cell.textLabel?.text = "Cell \(indexPath.row)"
        cell.textLabel?.textColor = .white
        return cell
    }
    
    // Height
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 60
    }
    
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 100  // Chiều cao footer chứa nút
    }
    
    // Footer View với nút Submit
    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let footerView = UIView()
        footerView.backgroundColor = .systemYellow
        footerView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 100)
        
        let submitButton = UIButton(type: .system)
        submitButton.frame = CGRect(x: 20, y: 25, width: view.frame.width - 40, height: 50)
        submitButton.setTitle("Submit", for: .normal)
        submitButton.setTitleColor(.white, for: .normal)
        submitButton.backgroundColor = .systemGreen
        submitButton.layer.cornerRadius = 8
        submitButton.titleLabel?.font = .boldSystemFont(ofSize: 18)
        submitButton.addTarget(self, action: #selector(submitTapped), for: .touchUpInside)
        
        footerView.addSubview(submitButton)
        return footerView
    }
    
    @objc func submitTapped() {
        print("Submit tapped!")
        // Xử lý logic submit
    }
}

Kết quả

Cách thêm nút Submit ở cuối TableView bằng Swift

Lưu ý

  • Footer chỉ hiển thị nếu heightForFooterInSection > 0.
  • Nếu có nhiều section, mỗi section có thể có footer riêng.
  • Để footer sticky (luôn ở cuối màn hình ngay cả khi ít cell), dùng tableView.tableFooterView (single view cho toàn table) thay vì section footer.
  • Auto Layout trong footer: dùng constraints thay vì frame cứng để hỗ trợ rotation/iPad.

Cách 2: tableFooterView (Toàn table, đơn giản hơn)


let footerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 80))
let btn = UIButton(type: .system)
btn.frame = footerView.bounds.insetBy(dx: 20, dy: 15)
btn.setTitle("Submit All", for: .normal)
btn.backgroundColor = .systemBlue
btn.setTitleColor(.white, for: .normal)
btn.layer.cornerRadius = 8
btn.addTarget(self, action: #selector(submitAll), for: .touchUpInside)
footerView.addSubview(btn)
tableView.tableFooterView = footerView