在标签栏控制器内部的视图控制器中添加浮动动作按钮

时间:2018-10-22 12:59:25

标签: ios swift uitabbarcontroller floating-action-button

我正在使用一个自定义浮动操作按钮(Floaty),我想以编程方式将其添加到UITabBarController内部的UITableViewController中。问题是底部的标签栏叠加在浮动操作按钮的顶部。

在我的表格视图控制器内部:

let floaty = Floaty()
...
self.view.addSubview(floaty)
// also tried: self.tabBarController?.view.addSubview(floaty)

我尝试这样设置边距:

floaty.layoutMargins = UIEdgeInsets(top: 0, left: 0, bottom: 60, right: 0)
floaty.layoutIfNeeded()
self.view.layoutIfNeeded()

但这不起作用。

enter image description here

如何正确将按钮放置在表格视图控制器中?或者至少,我该如何以编程方式设置底边距?

编辑:

也尝试过

self.navigationController?.view.addSubview(floaty)

首先,它会正确添加按钮,但是当我切换选项卡时,它会恢复到底部栏所覆盖的位置。 在这里:

enter image description here enter image description here

4 个答案:

答案 0 :(得分:1)

这行代码将解决填充问题:

floaty.paddingY += tabBarController!.tabBar.frame.size.height

如果您希望fab对所有选项卡都是全局的,则应在此处添加它:

tabBarController!.view.addSubview(floaty)

否则,如果将其添加到navigationController中,并且我假设每个选项卡都有一个不同的选项卡,则它将仅存在于该navigationController的viewControllers中。如果将其添加到self.view中,也会发生同样的情况,因为它将仅存在于该视图控制器中。

此外,如果您想在某些特定的视图控制器中隐藏/取消隐藏晶圆厂,则应结合使用viewWillAppear/viewDidAppear/viewWillDisappear/viewDidDisappear方法,例如:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    floaty.isHidden = false
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    floaty.isHidden = true
}

祝你好运!

答案 1 :(得分:0)

您不应该在tableView中实现它, 您应该将其添加到您已在其中实施了标签页的homeTab 您既不能通过添加为IBOutlet来添加它,也不能仅将其声明为按钮 这是我的代码(“比赛”标签中有一个浮动按钮)

  @IBOutlet weak var leaderBoardBtn: UIButton!

///为您的按钮添加底部至顶部的线索跟踪约束

  @IBOutlet weak var leadBottom: NSLayoutConstraint!  

///这会导致我的按钮浮动 //这是我按钮对superView.bottom的底部约束

,然后在viewDidLoad中:

  NotificationCenter.default.addObserver(self, selector: #selector(leadAnime(_:)),name:NSNotification.Name(rawValue: "animate"), object: nil)

然后在viewDidLoad之外的地方添加以下内容:

@objc func leadAnime(_ notification: NSNotification) {
        if let  count = notification.userInfo?["top"] as? Bool{
            if count{
                leadBottom.constant = 20
                UIView.animate(withDuration: 0.3, animations: {
                    self.view.layoutIfNeeded()
                })
            }else{
                leadBottom.constant = -100
                UIView.animate(withDuration: 0.3, animations: {
                    self.view.layoutIfNeeded()
                })
            }

        }
    }

现在在您的表格视图控制器中:

 var scrollS :CGFloat = 0
override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    NotificationCenter.default.post(name: NSNotification.Name(rawValue: "animate"), object: nil, userInfo: ["top":false])

}

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
     NotificationCenter.default.post(name: NSNotification.Name(rawValue: "animate"), object: nil, userInfo: ["top":true]) }

   override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollS - scrollView.contentOffset.y < 0{
            NotificationCenter.default.post(name: NSNotification.Name(rawValue: "animate"), object: nil, userInfo: ["top":true])
        }else{
            if scrollS - scrollView.contentOffset.y > 0{
                NotificationCenter.default.post(name: NSNotification.Name(rawValue: "animate"), object: nil, userInfo: ["top":false])
            }
        }
        scrollS = scrollView.contentOffset.y

    }
    override func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        if scrollS - scrollView.contentOffset.y < 0{
            NotificationCenter.default.post(name: NSNotification.Name(rawValue: "animate"), object: nil, userInfo: ["top":true])
        }else{
            if scrollS - scrollView.contentOffset.y > 0{
                NotificationCenter.default.post(name: NSNotification.Name(rawValue: "animate"), object: nil, userInfo: ["top":false])
            }
        }
        scrollS = scrollView.contentOffset.y
    }

答案 2 :(得分:0)

您在视图控制器上的标签栏控制器下方添加了按钮:

self.view.addSubview(floaty)

因此,选项卡栏将始终位于您将按钮添加为子视图的视图控制器上方。 请看UITabBarController documentation

中的图2

答案 3 :(得分:0)

截至2020年,使用Swift 5固定位置的解决方案在iPhoneX上不正确(具有安全区域视图):

var floaty: Floaty!
var shouldLayoutFloaty = false

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

func initFloaty() {
  ...do something with Floaty

  shouldLayoutFloaty = true
}

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        if shouldLayoutFloaty { // use this check to prevent infinite loop of "viewDidLayoutSubviews"
            // call "tabBar.frame.size.height" in "viewDidLayoutSubviews" will return the exact height of tab bar on iPhoneX
            floaty.paddingY = tabBar.frame.size.height + 20
            shouldLayoutFloaty = false
        }
    }