navigationBarの色を調整したいです。

Question

前提・実現したいこと

Swiftで制作中のアプリのnavigationBarの色を調整したい。

ここに質問の内容を詳しく書いてください。

Swiftの勉強のためTwitterを再現しようとしているのですが、ヘッダーを作っている所で躓いています。
Twitterのタイムラインのページのヘッダーはtranslucentが効いた状態で全体の背景色と同じ色になっていますが、私が再現できる限りではどうしてもヘッダーの色が微妙に違ってしまいます。

navigationBarのtranslucentが効いた状態で全体の背景色と同じ色にする事は可能でしょうか？
可能だとしたらその方法もご教示いただけると助かります。

発生している問題・エラーメッセージ

エラーは特にありませんが、UIVisualEffectView(effect: UIBlurEffect(style: .dark))としてTableViewの背景色と違ってしまう分、navigationController?.navigationBar.barTintColorを調節するなどして色合いを合わせようとしましたが、完璧に同じ色にするのは困難でした。

StoryBoardでもnavigationBarのスタイルを変えたりしましたが、DefaultでもBlackでも色合いが合いませんでした。

UIBlurEffectのStyleをregularにしてダークモードに対応するようにしたのですが、やはりヘッダーと全体の背景色は微妙に違ってしまいます。

こちらが私がTwitterを再現しようとして作っているアプリの状態です。
ヘッダーが全体の背景色よりも微妙に暗い色になってしまっています。
translucentを効かせるとどうしても同じ色になりません。

こちらは上の画像に赤枠と白線を付けたものです。
赤線で囲っている部分の白線の延長線上に色の境界があります。

こちらは上の画像の左半分を拡大したものです。
赤枠で囲っている部分の白線の延長線上に色の境界があります。
白線より上がヘッダーで黒いですが、白線より下TableViewは濃い紺色(R:23 G:32 B:42)です。

こちらが本家Twitterのヘッダーです。全体の背景色とヘッダーの色は同じ色です。
この状態でtranslucentも効いています。

こちらが私がTwitterを再現しようとして作っているアプリの状態その２です。
TableViewの色が濃い紺色(Twitterのダークモードと同じ色)なのに対して、ヘッダーは黒になってしまっています。
translucentをtrueにする事で、すりガラス効果は得られているのですが、色を指定するとすりガラス効果が失われてしまいます。
また、すりガラス効果も本家のTwitterのヘッダーと比較するとかなりぼやけてしまっていて、よく見ないと透けているのか
分からない感じです。

上の画像と同じ、Twitterを再現しようとして作っているアプリの状態その２です。
境界は以下の画像の赤枠の中、白線の延長上にあります。

こちらが本家Twitterのヘッダーその２です。すりガラス効果で背景の文章がぼやけて透けていますが、同時にTableViewの色と同じ色にする事も実現しています。これは色の問題が解決したら取り組もうと思っているのですが、すりガラス効果の度合いも私がマネしたものとは違い、文字やプロフィール画像の輪郭がぼんやり見えています。

ヘッダーのプロフィール画像の形やツイートした画像の表示される大きさなどは今後修正していく予定ですが、
その２は同じツイートの文章をヘッダーで透かしています。

これはかなり見えにくいかと思いますが、上の画像と同じ画像です。
赤丸の部分にぼんやりとツイートした人のプロフィール画像が透けていて、赤線の上にぼんやりと文章が透けています。

該当のソースコード

//viewDidLoad内で呼び出している関数です。

extension UIViewController {
    private final class StatusBarView: UIView { }

    func setStatusBarBlur() {
        let statusBarFrame = UIApplication.shared.statusBarFrame
        let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
        visualEffectView.frame = statusBarFrame
        view.addSubview(visualEffectView)
        visualEffectView.translatesAutoresizingMaskIntoConstraints = false
        visualEffectView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
        visualEffectView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        visualEffectView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        if #available(iOS 11.0, *) {
            visualEffectView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
        } else {
            // Fallback on earlier versions
        }
    }

試したこと

ここに問題に対して試したことを記載してください。

まずtableViewの色を青（R:0 G:0 B:255）にしてnavigationBarもstatusBarも指定なしでヘッダーが何色になるか試しました。（スマホをダークモードにしていたためか、黒になりました。）この黒の部分にすりガラス効果はありませんでした。

次にtableViewの色は青のままにして、navigationBarのbarTintColorをtableviewと同じ青にしました。また、navigationBarの下のボーダーを消す設定を試しました。
これでnavigationBarとtableViewが同じ色にはなりましたが、すりガラス効果はありません。

その次はすりガラス効果を得るためにnavigationBarに.isTranslucent = trueを設定してみましたが、すりガラス効果は得られませんでした。

カピ通信というサイトの記事（https://capibara1969.com/933/）によると「.barTintColorオプションでナビゲーションバーの背景色を指定します。デフォルト値はnilです。この値が設定された場合、.translucentオプション値に関係なく、半透明化は無効になります。」とありました。

今度はすりガラス効果が無効にならないようにbarTintColorを削除して、Translucentのみが効くようにしてみました。Translucentは効いたのですが、ヘッダーはtableViewよりも暗くなってしまいます。

文字が背景だと透けているか分かりにくいのですが、画像が背景だとぼやけて透けている事が分かります。しかしヘッダーの色は暗めになってしまい、TableViewと同じ色になりません。

barTintColorとTranslucentは両立できないとの事だったのでbackgroundColorとTranslucentも試してみたのですが、backgroundColorが不透明で表示され、すりガラス効果は得られませんでした。

また、navigationBarを透明にしてstatusBarにすりガラス効果を付けた場合どうなるかと思い、statusBarをUIVisualEffectView(effect: UIBlurEffect(style: .dark))としてみましたが、statusBarを透明にしてもstatusBarが若干暗い色になってしまいます。

以上の事を試し、ここまでに「navigationBar　すりガラス効果」とか「navigationBar すりガラス効果　度合い」、「statusBar　すりガラス効果　色」など、色々検索してみましたが、navigationBar,StatusBarなどの色合いやすりガラス効果の度合いを調整できるという情報には行き当たりませんでした。

補足情報（FW/ツールのバージョンなど）

Xcode11.6
iPhoneSE
iOS13.6

Answer 1

それぞれどの色を指定していますか？
同じ色を指定すれば、色は異ならないかと思います。

ちなみに貼ってある画像は、同じものに見えましたが、色が違うというのは具体的にどの部分を指しますか？

Comments

[tmyk1979]

ryyy様、年明け早々から回答ありがとうございます。

ヘッダーは現時点ではnavigationBar.barTintColorなど指定せずUIVisualEffectView(effect: UIBlurEffect(style: .regular))を指定しているのみです。
TableViewのbackgroundColorにはR:23,G:32,B:42を指定しています。
濃い紺色です。（Twitterのダークモードと同じ色）

貼ってある画像は上の画像がうまくいっていない画像なのですが、
よく見ると画面の真ん中のTwitterのロゴマークの少し下にうっすらと色の境界が見えます。
ヘッダーが黒でその下がR:23,G:32,B:42の濃い紺色になっています。
画像にマウスポインタを載せると少し白っぽくなって色の境界が少し見えやすくなると思います。

同じ色を指定すれば色は異ならないとの事ですが、ヘッダーのtranslucentをtrueにした状態でも同じになりますか？
私がやった限りでは色を指定すると同じ色にはできるのですが、すりガラス効果が失われてしまったと思います。取り急ぎもう一度やってみようと思います。

[tmyk1979]

取り急ぎやってみたのですが、やはりbarTintColorを指定するとtranslucent（すりガラス効果）は無効になってしまうようです。

また、今はnavigationBarを透明にしてstatusBarにUIBlurEffeectをかけているので、statusBarのbackgroundColorでも試してみたのですが、navigationBarのケース同様、色を指定するとBlurEffectは失われてしまいます。

本家のTwitterのヘッダーは濃い紺色で、すりガラス効果（おそらくtranslucent = true）も得られているので、これがどうやっているのか分からずにいます。

ヘッダーの後ろにツイートの文章を透かした状態の画像も載せました。

[ryyy]

すみません、いただいた画像も結局少し拡大しただけで、同じものに見えます。色が違うと言われてる部分を、枠線で囲むなどして、示して頂けないでしょうか？
ちなみに正しいと考えているサンプルと全く同じ色にするには、正確なカラーコードを取得して、それと全く同じものを指定する必要があると思います。

[ryyy]

## 発生している問題・エラーメッセージ
に、「エラーは特にありません」との事ですが、問題があって質問されてると思うので、試した事に書かれてる問題点の内容を、問題の部分に書いて頂きたいです。試した事に対しては、その問題に対して解決するために調べた事などをご記入ください。

[tmyk1979]

返信ありがとうございます。
色が違う部分を枠線で囲んだ画像を用意しました。
サンプルからは全く同じカラーコードを取得してBarTintColorに設定する事はできたのですが、BarTintColorを設定するとTranslucentは無効になってしまうので、すりガラス効果とBarTintColorを両立できずにいます。

また、試した事に書かれていた内容を問題の部分に移し、試した事は改めて追記しました。

よろしくお願いします。

[ryyy]

その様なやり方で試すのは効率が悪いですね。
https://www.peko-step.com/tool/getcolor.html
こちらなどのツールを使ってまずは正確な色を取得してみて下さい。

[tmyk1979]

上記のサイトは知りませんでした。教えていただきありがとうございます。
フォトショからも正確な色を取得できました。R:23 G: 32 B:42 です。
ただ、この色をBarTintColorに設定してもすりガラス効果は失われてしまうようです。UIAppearanceというのがあるそうで、それをこれから試してみようと思います。

[tmyk1979]

SwiftではBarTintColorを指定するとtranslucentによるすりガラス効果は失われてしまい、
BarTintColorを諦めてtranslucentを指定する場合、必ず背景色とは違う色になってしまうようです。
https://capibara1969.com/933/　などのサイトにも書いてあるのですが、本家Twitterを見ると
Translucentを効かせたまま色合いもtableViewと同じ色になっていたので何かしら方法があるものと
思っていました。

しかし、個人的に詳しい人に話を聞いたところ、内部実装は分からないのであくまで推測になるが
Twitter独自のライブラリを使っているのではないか・・・との事でした。

私がライブラリを作れるようになるのはまだかなり先の話になりそうなので、SwiftだけでTwitterを
完全に再現するのは諦めて、可能な限り寄せて作るに留めようと思います。