web-dev-qa-db-ja.com

SwiftUIナビゲーションバーとステータスバー-同じ色にする

理想的には、ステータスバーの後ろに伸びる上部が濃い青色のナビゲーションバーになる新しいアプリがあります。この不透明で正しい色の青を作成するのは面倒でしたが、NavigationViewを含むビューのinit（）に以下を配置することで、それを機能させる方法を最終的に理解しました。

init() {
    UINavigationBar.appearance().barTintColor = UIColor(named: "primaryBlue")
    UINavigationBar.appearance().backgroundColor = UIColor(named: "primaryBlue")
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    UINavigationBar.appearance().isOpaque = true
}

これにより、次のようなナビゲーションバーが表示されます。青色ですが、ステータスバーは黒のテキストで白のままです（白のテキストで濃い青にしたい）。

enter image description here

次に、ステータスバーのテキストを「ライトコンテンツ」にする必要があることを知り、Idiqual here から良い解決策を見つけましたが、これは単にバーの「テーマ」の色を変更するだけです。この方法を使用して背景色を変更する方法はないようです。実装後、暗い背景に明るいテキストを表示する準備ができたステータスバーがありますが、NavigationViewの暗い青色の背景をステータスバーの上部に拡張する方法を理解できません。だから私が残しているのはこれです：

enter image description here

.edgesIgnoringSafeArea（.top）をいくつかの異なる場所に追加するなど、いくつかのことを試しました。NavigationViewの閉じ括弧や、親ビューにあるTabViewも含まれますが、何も機能しません。簡単なものがないですか？ NavigationBarの色を画面の上部に拡張するにはどうすればよいですか？これが私のナビビューのコードです。この構造体は「FetchFrontPageArticles」と呼ばれます。

var body: some View {
    NavigationView {
        VStack {
            List(self.fetcher.articles) { article in
                ...
            }.navigationBarTitle("", displayMode: .inline)
            .navigationBarItems(
                leading: Text(""),
                trailing: NavProfile()
            )
        }
    }
}

「FetchFrontPageArticles」は、次に示す親のTabViewから読み込まれます。

TabView(selection: $selection){
        FetchFrontPageArticles()
            .tabItem {
                VStack {
                    Image("house")
                    Text("Home")
                }
            }
            .tag(0)
        Text("Second View")
            .tabItem {
                VStack {
                    Image("list.dash")
                    Text("Browse")
                }
            }
            .tag(1)
        ...
    }
    .accentColor(Color("primaryYellow"))

私はこれを解決しようとしてかなり立ち往生しており、それは簡単なはずです。助けてください！

更新：以下のカイルの回答によれば、私はすでにこのアプローチを試しました。これは、NavConfiguratorを実装した後のナビゲーションバーのスクリーンショットです（透明効果が効いているため、バーが青く見えることに注意してください）。

enter image description here

iosswiftxcodeswiftuixcode11
3
eResourcesInc

SwiftUIでコーディングを始めたとき、私は同じ問題に直面し、多くの調査の結果、解決策を見つけました。

以下のコードをSceneDelegateクラスに配置します。

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {        
    let newAppearance = UINavigationBarAppearance()
    newAppearance.configureWithOpaqueBackground()
    newAppearance.backgroundColor = .black
    newAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]

    UINavigationBar.appearance().standardAppearance = newAppearance

    //Other code for displaying the first screen
}

UINavigationBarAppearanceクラスは、ナビゲーションバーの外観を変更するために使用され、iOS 13から使用できます。

上記のコードは、すべてのコントローラーのナビゲーションバースタイルを変更します。

2
Indrajeet

次は私のために働きます：

以下を変更するUINavigationControllerの拡張機能を作成します。

  • ナビゲーションバーの背景色
  • ステータスバーの背景色

  • ナビゲーションバーのタイトルの色

    import UIKit

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()

        let appearance = UINavigationBarAppearance()
        //background color of the navigation and status bar
        appearance.backgroundColor = .black
        //color when the title is large
        appearance.largeTitleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)
        //color when the title is small
        appearance.titleTextAttributes.updateValue(UIColor.white, forKey: NSAttributedString.Key.foregroundColor)

        // change the background- and title foregroundcolor for navigationbar
        navigationBar.standardAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
        navigationBar.compactAppearance = appearance
        // change color of navigationbar items
        navigationBar.tintColor = UIColor.white
    }
}

ただし、ステータスバーの前景色は変更されません。そのため、次のことを行う必要があります。

swiftUIをインポートする

class HostingController<Content> : UIHostingController<Content> where Content : View {
    @objc override dynamic open var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
}

そして、シーンデリゲートで

交換する必要があります

window.rootViewController = UIHostingController(rootView: contentView)

と

window.rootViewController = HostingController(rootView: contentView)
1
ARR

私はこの問題に約1時間苦労しましたが、TabViewを使用している場合、タブのビューではなく、edgesIgnoringSafeAreaをTabViewに追加する必要があることがわかりました。

TabView {
   ViewA().tabItem.....

}.edgesIgnoringSafeArea(.top)

それが役に立てば幸い

0
cookiezby