在 UITabBar 顶部查看

Question

类似于 Spotify 或 Apple Music 应用在播放歌曲时所做的事情，它会在 UITabBar 顶部放置一个自定义视图：

我尝试过的解决方案：

1. UITabBarController 在 ViewController 中具有最大尺寸的 Container View，以及底部布局指南上方 Container View49pt 顶部的自定义视图： 问题： 嵌入在 UITabBarController 中的 ViewController 中的任何内容都不会显示，因为它们隐藏在自定义布局后面。我尝试在 UITabBarController 中覆盖 size forChildContentContainer，尝试更新底部布局指南，Nothing。 我需要调整UITabBarController的容器视图框架。

2. 再次尝试#1，但尝试通过increasing the size of UITabBar 解决隐藏在其后面的内容的问题，然后使用ImageInset on every TabBarItem 将其关闭，并将我的自定义视图添加到UITabBar 的顶部。并没有真正奏效。有时我想隐藏我的自定义视图。

3. UITabBarController 以 root 身份，每个孩子都是一个 ViewController 与一个容器视图 + 我的自定义视图： 但是现在我有多个自定义视图的实例漂浮在周围。如果我想更改其上的标签，则必须将其更改为所有视图。或者隐藏等等。

4. 覆盖 UITabBarController 的 UITabBar 属性并返回具有 UITabBar + 我的自定义视图的自定义 UITabBar（用 xib 膨胀）。 问题：可能是最令人沮丧的尝试。如果您使用 class MyCustomTabBar : UITabBar {} 的实例覆盖该属性，则不会显示任何选项卡！是的，我将myCustomTabBar 的代表设置为self。

倾向于#3，但正在寻找更好的解决方案。

Answer 1

如果您继承 UITabBarController 并以编程方式添加您的视图，这实际上非常容易。使用此技术自动支持标签栏的旋转和大小更改，无论您使用的是哪个版本。

class CustomTabBarController: UITabBarController {
  override func viewDidLoad() {
    super.viewDidLoad()

    //...do some of your custom setup work
    // add a container view above the tabBar
    let containerView = UIView()
    containerView.backgroundColor = .red
    view.addSubview(containerView)
    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    containerView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true

    // anchor your view right above the tabBar
    containerView.bottomAnchor.constraint(equalTo: tabBar.topAnchor).isActive = true

    containerView.heightAnchor.constraint(equalToConstant: 50).isActive = true
  }
}

Answer 2

我明白了！

本质上，我增加了原始 UITabBar 的大小以容纳自定义视图（并缩小上述视图控制器的框架），然后在其顶部添加一个重复的 UITabBar + 自定义视图。

这是我必须做的事情。我上传了它的功能示例，可以是found in this repo：

class TabBarViewController: UITabBarController {

    var currentlyPlaying: CurrentlyPlayingView!
    static let maxHeight = 100
    static let minHeight = 49
    static var tabbarHeight = maxHeight

    override func viewDidLoad() {
        super.viewDidLoad()

        currentlyPlaying = CurrentlyPlayingView(copyFrom: tabBar)
        currentlyPlaying.tabBar.delegate = self

        view.addSubview(currentlyPlaying)
        tabBar.isHidden = true
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        currentlyPlaying.tabBar.items = tabBar.items
        currentlyPlaying.tabBar.selectedItem = tabBar.selectedItem
    }
    func hideCurrentlyPlaying() {
        TabBarViewController.tabbarHeight = TabBarViewController.minHeight
        UIView.animate(withDuration: 0.5, animations: {
            self.currentlyPlaying.hideCustomView()
            self.updateSelectedViewControllerLayout()
        })
    }
    func updateSelectedViewControllerLayout() {
        tabBar.sizeToFit()
        tabBar.sizeToFit()
        currentlyPlaying.sizeToFit()
        view.setNeedsLayout()
        view.layoutIfNeeded()
        viewControllers?[self.selectedIndex].view.setNeedsLayout()
        viewControllers?[self.selectedIndex].view.layoutIfNeeded()
    }
}

extension UITabBar {

    open override func sizeThatFits(_ size: CGSize) -> CGSize {
        var sizeThatFits = super.sizeThatFits(size)
        sizeThatFits.height = CGFloat(TabBarViewController.tabbarHeight)
        return sizeThatFits
    }
}

Answer 3

从 iOS 11 开始，这变得更容易了。添加视图时，您可以执行以下操作：

viewControllers?.forEach {
   $0.additionalSafeAreaInsets = UIEdgeInsets(
      top: 0, 
      left: 0,
      bottom: yourView.height,
      right: 0
   )
}

Answer 4

您将其放入包装器视图控制器的想法很好，但它只会导致开销（更多视图控制器加载到内存中），并且当您稍后想要更改代码时会出现问题。如果您希望该栏始终显示在您的 UITabBarController 上，那么您应该将它添加到那里。

您应该继承UITabBarController 并从笔尖加载自定义栏。在那里您将可以访问标签栏（因此您可以将栏正确放置在其上方），并且您只需加载一次（这解决了您将面临每个标签上都有不同栏的问题）。

至于您的视图对自定义栏的大小没有反应，我不知道您如何做到这一点，但我最好的建议是使用公共变量和您在各个选项卡中收听的通知。 然后，您可以使用它来更改底部约束。

Answer 5

除了使用 UITabBar 或容器 vc 之外，您还可以考虑将 App Delegate 中的视图添加到主窗口，如下面的帖子：

View floating above all ViewControllers

由于您的视图与 Tab 栏一起在周围，因此完全可以在 App Delegate 中进行。

您始终可以从 App Delegate Singleton 访问 Floating 视图，方法是将其设为 App Delegate 的属性。这样就很容易控制它在任何代码中的可见性。

改变浮动视图和超级视图窗口之间的Constraints常数可以调整视图的位置，从而很好地响应方向变化。

另一种（类似）方法是使浮动视图成为另一个窗口，如 uid 按钮。

Answer 6

除非我误解了，否则您可以从您的 UITabBarController 类创建自定义视图。然后，您可以将其插入 上方 并将其约束到 tabBar 对象，这是与控制器的 tabBar 关联。

因此，从您的 UITabBarController 类中，创建您的自定义视图

class CustomTabBarController: UITabBarController {
    var customView: UIView = {
            let bar = UIView()
            bar.backgroundColor = .white
            bar.translatesAutoresizingMaskIntoConstraints = false
            return bar
        }()

在 viewDidLoad() 中，将您的自定义视图添加到 UITabBarController 的视图对象并将其放置在 上方 tabBar 对象

override func viewDidLoad() {
        super.viewDidLoad()

        ...

        self.view.insertSubview(customView, aboveSubview: tabBar)

然后在您的自定义视图添加为子视图后，添加约束以使其正确定位。这也应该在 viewDidLoad() 中完成，但只能在插入视图之后完成。

self.view.addConstraints([
            NSLayoutConstraint(item: customView, attribute: .leading, relatedBy: .equal, toItem: tabBar, attribute: .leading, multiplier: 1, constant: 0),
            NSLayoutConstraint(item: customView, attribute: .trailing, relatedBy: .equal, toItem: tabBar, attribute: .trailing, multiplier: 1, constant: 0),
            NSLayoutConstraint(item: customView, attribute: .top, relatedBy: .equal, toItem: tabBar, attribute: .top, multiplier: 1, constant: -50),
            NSLayoutConstraint(item: customView, attribute: .bottom, relatedBy: .equal, toItem: tabBar, attribute: .top, multiplier: 1, constant: 0)
            ])

有很多创造性的方法可以设置约束来做你想做的事，但是上面的约束应该在你的 tabBar 上方附加一个高度为 50 的视图。

Answer 7

1. 使视图的框架具有标签栏的高度并将其置于顶部，2. 设置标签栏隐藏为真。