Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> iOS

วิธีเพิ่มปุ่ม Submit ท้าย TableView ใน Swift

ใช้ tableView(_:viewForFooterInSection:) สร้าง Footer View พร้อมปุ่ม Submit

โค้ดตัวอย่างเต็ม


import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }
    
    func setupTableView() {
        let tableView = UITableView(frame: view.bounds, style: .plain)
        tableView.dataSource = self
        tableView.delegate = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        tableView.backgroundColor = .systemGray6
        view.addSubview(tableView)
        
        // Auto Layout
        tableView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }
    
    // DataSource
    func numberOfSections(in tableView: UITableView) -> Int { return 1 }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel?.text = "Item \(indexPath.row + 1)"
        cell.backgroundColor = .systemBackground
        return cell
    }
    
    // Footer Height
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 100
    }
    
    // Footer View with Button
    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let footerView = UIView()
        footerView.backgroundColor = .systemGroupedBackground
        
        let submitButton = UIButton(type: .system)
        submitButton.setTitle("Submit", for: .normal)
        submitButton.titleLabel?.font = .boldSystemFont(ofSize: 18)
        submitButton.backgroundColor = .systemBlue
        submitButton.setTitleColor(.white, for: .normal)
        submitButton.layer.cornerRadius = 8
        submitButton.translatesAutoresizingMaskIntoConstraints = false
        submitButton.addTarget(self, action: #selector(submitTapped), for: .touchUpInside)
        
        footerView.addSubview(submitButton)
        
        NSLayoutConstraint.activate([
            submitButton.centerXAnchor.constraint(equalTo: footerView.centerXAnchor),
            submitButton.centerYAnchor.constraint(equalTo: footerView.centerYAnchor),
            submitButton.widthAnchor.constraint(equalToConstant: 200),
            submitButton.heightAnchor.constraint(equalToConstant: 50)
        ])
        
        return footerView
    }
    
    @objc func submitTapped() {
        print("✅ Submit tapped")
        // Handle Submit Logic
    }
}

Alternative: Table Footer View (Single Footer สำหรับทั้ง Table)


override func viewDidLoad() {
    super.viewDidLoad()
    let footerView = createSubmitFooter()
    tableView.tableFooterView = footerView // ไม่ใช่ Section Footer
}

func createSubmitFooter() -> UIView {
    let view = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 100))
    // Add Button like above...
    return view
}

จุดแตกต่าง

คุณสมบัติSection FooterTable Footer View
หลาย Sectionมี Footer ต่อ Sectionมีแค่ท้าย Table
Scroll BehaviorScroll ตาม Sectionติดท้าย Table เสมอ
เหมาะสำหรับGrouped DataForm Submit, Load More

Load More Pattern


func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    if isLoadingMore {
        let indicator = UIActivityIndicatorView(style: .medium)
        indicator.startAnimating()
        let view = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 50))
        indicator.center = view.center
        view.addSubview(indicator)
        return view
    }
    return createSubmitFooter()
}