在 Swift 中的 UITableView 上插入浮動操作按鈕

Question

我正在嘗試添加一個浮動操作按鈕（不是浮動菜單按鈕），它可以通過單擊導航到下一個視圖控制器。 我沒有正確使用浮動按鈕。 我已經嘗試了下面的代碼，但它沒有在表格視圖上顯示適當的按鈕，因為它與表格一起滾動。 有沒有辦法將按鈕貼在同一個地方而不隨着表格一起滾動？

func floatingButton(){
    let btn = UIButton(type: .custom)
    btn.frame = CGRect(x: 285, y: 485, width: 100, height: 100)
    btn.setTitle("All Defects", for: .normal)
    btn.backgroundColor = #colorLiteral(red: 0.1764705926, green: 0.4980392158, blue: 0.7568627596, alpha: 1)
    btn.clipsToBounds = true
    btn.layer.cornerRadius = 50
    btn.layer.borderColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    btn.layer.borderWidth = 3.0
    btn.addTarget(self,action: #selector(DestinationVC.buttonTapped), for: UIControlEvent.touchUpInside)
    view.addSubview(btn)
}

Answer 1

添加到UITableView所有子視圖都會自動滾動。

您可以做的是將按鈕添加到應用程序 Window ，只需記住在 ViewController 消失時將其刪除。

var btn = UIButton(type: .custom)
func floatingButton(){
    btn.frame = CGRect(x: 285, y: 485, width: 100, height: 100)
    btn.setTitle("All Defects", for: .normal)
    btn.backgroundColor = #colorLiteral(red: 0.1764705926, green: 0.4980392158, blue: 0.7568627596, alpha: 1)
    btn.clipsToBounds = true
    btn.layer.cornerRadius = 50
    btn.layer.borderColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    btn.layer.borderWidth = 3.0
    btn.addTarget(self,action: #selector(DestinationVC.buttonTapped), for: UIControlEvent.touchUpInside)
    if let window = UIApplication.shared.keyWindow {
        window.addSubview(btn)
    }
}

在viewWillDisappear ：

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    btn.removeFromSuperview()
}

對於 iOS 13 及更高版本，您可以使用此擴展程序檢查關鍵窗口：

extension UIWindow {
    static var key: UIWindow? {
        if #available(iOS 13, *) {
            return UIApplication.shared.windows.first { $0.isKeyWindow }
        } else {
            return UIApplication.shared.keyWindow
        }
    }
}

Answer 2

這是使用 Swift 4.2 的 XCode 10 上的工作示例。

注意FAB按鈕會在view消失時消失，再次加載控制器時會重新出現。

import UIKit

class ViewController: UITableViewController {

lazy var faButton: UIButton = {
    let button = UIButton(frame: .zero)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.backgroundColor = .blue
    button.addTarget(self, action: #selector(fabTapped(_:)), for: .touchUpInside)
    return button
}()

override func viewDidLoad() {
    super.viewDidLoad()
    setupTableView()
}

override func viewDidAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    if let view = UIApplication.shared.keyWindow {
        view.addSubview(faButton)
        setupButton()
    }
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    if let view = UIApplication.shared.keyWindow, faButton.isDescendant(of: view) {
        faButton.removeFromSuperview()
    }
}

func setupTableView() {
    tableView.backgroundColor = .darkGray
}

func setupButton() {
    NSLayoutConstraint.activate([
        faButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -36),
        faButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -36),
        faButton.heightAnchor.constraint(equalToConstant: 80),
        faButton.widthAnchor.constraint(equalToConstant: 80)
        ])
    faButton.layer.cornerRadius = 40
    faButton.layer.masksToBounds = true
    faButton.layer.borderColor = UIColor.lightGray.cgColor
    faButton.layer.borderWidth = 4
}

@objc func fabTapped(_ button: UIButton) {
    print("button tapped")
}

override func numberOfSections(in tableView: UITableView) -> Int {
    return 5
}

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

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    return UITableViewCell()
}

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 64
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 32
}

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return UIView()
}
}

Answer 3

如果您當前使用 tableViewController 那么不，您必須繼承 UIViewController 將 UItableView 和您的浮動按鈕添加到它

或者您可以覆蓋 scollviewDidScroll 並根據 tableview 當前偏移量更改按鈕 y

將滾動視圖拖動為 IBOutlet 並將其委托給 viewController

   func scrollViewDidScroll(_ scrollView: UIScrollView) {

       let  off = scrollView.contentOffset.y

       btn.frame = CGRect(x: 285, y:   off + 485, width: btn.frame.size.width, height: btn.frame.size.height)
}

代碼快照

在行動

看到在行動

Answer 4

有一種方法對我有用。 在我的表視圖控制器中，首先定義一個按鈕，然后覆蓋函數scrollViewDidScroll() ，如下所示：

import UIKit

class MyTableViewController: UITableViewController {

    private let button = UIButton(type: UIButton.ButtonType.custom) as UIButton

    override func viewDidLoad() {
        let bottomImage = UIImage(named: "yourImage.png")
        let yPst = self.view.frame.size.height - 55 - 20
        button.frame = CGRect(x: 12, y: yPst, width: 55, height: 55)
        button.setImage(bottomImage, for: .normal)
        button.autoresizingMask = [.flexibleTopMargin, .flexibleRightMargin]
        button.addTarget(self, action: #selector(buttonClicked(_:)), for:.touchUpInside)
        button.layer.shadowRadius = 3
        button.layer.shadowColor = UIColor.lightGray.cgColor
        button.layer.shadowOpacity = 0.9
        button.layer.shadowOffset = CGSize.zero
        button.layer.zPosition = 1
        view.addSubview(button)
    }

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let off = self.tableView.contentOffset.y
        let yPst = self.view.frame.size.height
        button.frame = CGRect(x: 12, y:off + yPst, width: button.frame.size.width, height: button.frame.size.height)
    }

    @objc private func buttonClicked(_ notification: NSNotification) {
        // do something when you tapped the button
    }
}