以编程方式检测 SwiftUI 中的 Tab Bar 或 TabView 高度 [英] Programmatically detect Tab Bar or TabView height in SwiftUI

问题描述

我有一个 SwiftUI 应用程序，它将有一个浮动的播客播放器，类似于位于选项卡栏上方的 Apple Music 播放器，并在播放器运行时在所有选项卡和视图中持续存在.我还没有想出一个很好的方法来定位播放器，使其与标签栏齐平，因为标签栏的高度会根据设备而变化.我发现的主要问题是我必须如何将播放器放置在应用程序根视图中的叠加层或 ZStack 中，而不是在 TabView 本身中.由于我们无法自定义 TabView 布局的视图层次结构，因此无法在 TabBar 本身与其上方视图的内容之间注入视图.我的基本代码结构:

I have a SwiftUI app that will have a floating podcast player, similar to the Apple Music player that sits just above the Tab Bar and persists across all tabs and views while the player is running. I have not figured out a good way to position the player so that it is flush above the Tab Bar, since the Tab Bar height changes based on device. The main issue I've found is just how I have to position the player in an overlay or ZStack in the root view of my app, instead of within the TabView itself. Since we can't customize the view hierarchy of the TabView layout, there is no way to inject a view in-between the TabBar itself and the content of the view above it. My basic code structure:

TabView(selection: $appState.selectedTab){
  Home()
  .tabItem {
    VStack {
        Image(systemName: "house")
        Text("Home")
    }
  }
  ...
}.overlay(
  VStack {
    if(audioPlayer.isShowing) {
      Spacer()
      PlayerContainerView(player: audioPlayer.player)
      .padding(.bottom, 58)
      .transition(.moveAndFade)
    }
  })

这里的主要问题是 PlayerContainerView 的位置是硬编码的，填充为 58，以便清除 TabView.如果我可以检测到 TabView 的实际帧高度，我就可以为给定的设备全局调整它，我会没事的.有人知道如何可靠地做到这一点吗?或者你知道我如何将 PlayerContainerView 放置在 TabView 本身中，以便在切换显示时它只是出现在 Home() 视图和 Tab Bar 之间?任何反馈将不胜感激.

The main issue here is that the location of the PlayerContainerView is hard-coded with a padding of 58 so that it clears the TabView. If I could detect the actual frame height of the TabView, I could globally adjust this for the given device and I would be fine. Does anybody know how to do this reliably? Or do you have any idea how I could place the PlayerContainerView within the TabView itself so that it simply appears BETWEEN the Home() view and the Tab Bar when it is toggled to show? Any feedback would be appreciated.

推荐答案

由于官方允许并记录了到 UIKit 的桥梁，因此可以在需要时从那里读取所需的信息.

As bridge to UIKit is officially allowed and documented, it is possible to read needed information from there when needed.

这是直接从 UITabBar

// Helper bridge to UIViewController to access enclosing UITabBarController
// and thus its UITabBar
struct TabBarAccessor: UIViewControllerRepresentable {
    var callback: (UITabBar) -> Void
    private let proxyController = ViewController()

    func makeUIViewController(context: UIViewControllerRepresentableContext<TabBarAccessor>) ->
                              UIViewController {
        proxyController.callback = callback
        return proxyController
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<TabBarAccessor>) {
    }

    typealias UIViewControllerType = UIViewController

    private class ViewController: UIViewController {
        var callback: (UITabBar) -> Void = { _ in }

        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            if let tabBar = self.tabBarController {
                self.callback(tabBar.tabBar)
            }
        }
    }
}

// Demo SwiftUI view of usage
struct TestTabBar: View {
    var body: some View {
        TabView {
            Text("First View")
                .background(TabBarAccessor { tabBar in
                    print(">> TabBar height: (tabBar.bounds.height)")
                    // !! use as needed, in calculations, @State, etc.
                })
                .tabItem { Image(systemName: "1.circle") }
                .tag(0)
            Text("Second View")
                .tabItem { Image(systemName: "2.circle") }
                .tag(1)
        }
    }
}

这篇关于以编程方式检测 SwiftUI 中的 Tab Bar 或 TabView 高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！