teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

7

誤字を直しました。

2022/01/08 13:10

投稿

tmyk1979
tmyk1979

スコア145

title CHANGED
File without changes
body CHANGED
@@ -117,7 +117,7 @@
117
117
 
118
118
  また、navigationBarを透明にしてstatusBarにすりガラス効果を付けた場合どうなるかと思い、statusBarをUIVisualEffectView(effect: UIBlurEffect(style: .dark))としてみましたが、statusBarを透明にしてもstatusBarが若干暗い色になってしまいます。
119
119
 
120
- 以上の事を試し、ここまでに「navigationBar すりガラス効果」とか「navigationBar すりガラス効果 度合い」、「statusBar すりガラス効果」など、色々検索してみましたが、navigationBar,StatusBarなどの色合いやすりガラス効果の度合いを調整できるという情報には行き当たりませんでした。
120
+ 以上の事を試し、ここまでに「navigationBar すりガラス効果」とか「navigationBar すりガラス効果 度合い」、「statusBar すりガラス効果 色」など、色々検索してみましたが、navigationBar,StatusBarなどの色合いやすりガラス効果の度合いを調整できるという情報には行き当たりませんでした。
121
121
 
122
122
  ### 補足情報(FW/ツールのバージョンなど)
123
123
 

6

エラー内容にどんな状態かを記し、試した事は別に追記しました。

2022/01/08 13:10

投稿

tmyk1979
tmyk1979

スコア145

title CHANGED
File without changes
body CHANGED
@@ -12,41 +12,8 @@
12
12
 
13
13
  ### 発生している問題・エラーメッセージ
14
14
 
15
- エラーは特にありません。
15
+ エラーは特にありませんが、UIVisualEffectView(effect: UIBlurEffect(style: .dark))としてTableViewの背景色と違ってしまう分、navigationController?.navigationBar.barTintColorを調節するなどして色合いを合わせようとしましたが、完璧に同じ色にするのは困難でした
16
16
 
17
- ### 該当のソースコード
18
-
19
- ```Swift
20
-
21
- //viewDidLoad内で呼び出している関数です。
22
-
23
- extension UIViewController {
24
- private final class StatusBarView: UIView { }
25
-
26
- func setStatusBarBlur() {
27
- let statusBarFrame = UIApplication.shared.statusBarFrame
28
- let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
29
- visualEffectView.frame = statusBarFrame
30
- view.addSubview(visualEffectView)
31
- visualEffectView.translatesAutoresizingMaskIntoConstraints = false
32
- visualEffectView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
33
- visualEffectView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
34
- visualEffectView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
35
- if #available(iOS 11.0, *) {
36
- visualEffectView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
37
- } else {
38
- // Fallback on earlier versions
39
- }
40
- }
41
-
42
- ```
43
-
44
- ### 試したこと
45
-
46
- ここに問題に対して試したことを記載してください。
47
-
48
- UIVisualEffectView(effect: UIBlurEffect(style: .dark))としてTableViewの背景色と違ってしまう分、navigationController?.navigationBar.barTintColorを調節するなどして色合いを合わせようとしましたが、完璧に同じ色にするのは困難でした。
49
-
50
17
  StoryBoardでもnavigationBarのスタイルを変えたりしましたが、DefaultでもBlackでも色合いが合いませんでした。
51
18
 
52
19
  UIBlurEffectのStyleをregularにしてダークモードに対応するようにしたのですが、やはりヘッダーと全体の背景色は微妙に違ってしまいます。
@@ -92,6 +59,66 @@
92
59
  これはかなり見えにくいかと思いますが、上の画像と同じ画像です。
93
60
  赤丸の部分にぼんやりとツイートした人のプロフィール画像が透けていて、赤線の上にぼんやりと文章が透けています。
94
61
 
62
+ ### 該当のソースコード
63
+
64
+ ```Swift
65
+
66
+ //viewDidLoad内で呼び出している関数です。
67
+
68
+ extension UIViewController {
69
+ private final class StatusBarView: UIView { }
70
+
71
+ func setStatusBarBlur() {
72
+ let statusBarFrame = UIApplication.shared.statusBarFrame
73
+ let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
74
+ visualEffectView.frame = statusBarFrame
75
+ view.addSubview(visualEffectView)
76
+ visualEffectView.translatesAutoresizingMaskIntoConstraints = false
77
+ visualEffectView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
78
+ visualEffectView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
79
+ visualEffectView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
80
+ if #available(iOS 11.0, *) {
81
+ visualEffectView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
82
+ } else {
83
+ // Fallback on earlier versions
84
+ }
85
+ }
86
+
87
+ ```
88
+
89
+ ### 試したこと
90
+
91
+ ここに問題に対して試したことを記載してください。
92
+
93
+ まずtableViewの色を青(R:0 G:0 B:255)にしてnavigationBarもstatusBarも指定なしでヘッダーが何色になるか試しました。(スマホをダークモードにしていたためか、黒になりました。)この黒の部分にすりガラス効果はありませんでした。
94
+
95
+ ![![指定無しだとヘッダーは黒くなる](00bfce457501a23473aa8e6ebfeef395.png)](e73cd43a0b5bd3fca8308e34aaed8db2.png)
96
+
97
+ 次にtableViewの色は青のままにして、navigationBarのbarTintColorをtableviewと同じ青にしました。また、navigationBarの下のボーダーを消す設定を試しました。
98
+ これでnavigationBarとtableViewが同じ色にはなりましたが、すりガラス効果はありません。
99
+
100
+ ![イメージ説明](f9ed68c2441f6359d0a05c4192c596b5.png)
101
+
102
+ その次はすりガラス効果を得るためにnavigationBarに.isTranslucent = trueを設定してみましたが、すりガラス効果は得られませんでした。
103
+
104
+ ![barTintColorとTranslucent両立できない](628193ee3762f28d2542581acdcbb2a5.png)
105
+
106
+ カピ通信というサイトの記事(https://capibara1969.com/933/)によると「.barTintColorオプションでナビゲーションバーの背景色を指定します。デフォルト値はnilです。この値が設定された場合、.translucentオプション値に関係なく、半透明化は無効になります。」とありました。
107
+
108
+ 今度はすりガラス効果が無効にならないようにbarTintColorを削除して、Translucentのみが効くようにしてみました。Translucentは効いたのですが、ヘッダーはtableViewよりも暗くなってしまいます。
109
+
110
+ ![Translucent](291171ab106e10c3c47485f8412c05c1.png)
111
+
112
+ 文字が背景だと透けているか分かりにくいのですが、画像が背景だとぼやけて透けている事が分かります。しかしヘッダーの色は暗めになってしまい、TableViewと同じ色になりません。
113
+
114
+ ![背景が画像のTranslucent](cce3ad68345c2cf5f63457de78d39ec8.png)
115
+
116
+ barTintColorとTranslucentは両立できないとの事だったのでbackgroundColorとTranslucentも試してみたのですが、backgroundColorが不透明で表示され、すりガラス効果は得られませんでした。
117
+
118
+ また、navigationBarを透明にしてstatusBarにすりガラス効果を付けた場合どうなるかと思い、statusBarをUIVisualEffectView(effect: UIBlurEffect(style: .dark))としてみましたが、statusBarを透明にしてもstatusBarが若干暗い色になってしまいます。
119
+
120
+ 以上の事を試し、ここまでに「navigationBar すりガラス効果」とか「navigationBar すりガラス効果 度合い」、「statusBar すりガラス効果」など、色々検索してみましたが、navigationBar,StatusBarなどの色合いやすりガラス効果の度合いを調整できるという情報には行き当たりませんでした。
121
+
95
122
  ### 補足情報(FW/ツールのバージョンなど)
96
123
 
97
124
  Xcode11.6

5

ヘッダーとTableViewの色の境界が分かりやすいように新たに画像を追加しました。

2022/01/08 13:04

投稿

tmyk1979
tmyk1979

スコア145

title CHANGED
File without changes
body CHANGED
@@ -55,6 +55,13 @@
55
55
  ヘッダーが全体の背景色よりも微妙に暗い色になってしまっています。
56
56
  translucentを効かせるとどうしても同じ色になりません。
57
57
  ![![私が再現に挑んでいるアプリの状態](d83be30779d230b63e8e9d6399e1c59c.png)](33f5c3774517b3ea1d6680a5e3f45f98.png)
58
+ こちらは上の画像に赤枠と白線を付けたものです。
59
+ 赤線で囲っている部分の白線の延長線上に色の境界があります。
60
+ ![私が再現に挑んでいるアプリの状態補助付き](49df761fb1a66c8ff794c899821e649b.png)
61
+ こちらは上の画像の左半分を拡大したものです。
62
+ 赤枠で囲っている部分の白線の延長線上に色の境界があります。
63
+ 白線より上がヘッダーで黒いですが、白線より下TableViewは濃い紺色(R:23 G:32 B:42)です。
64
+ ![イメージ説明](46b97e204458aad71ad22a57a0fabd71.png)
58
65
 
59
66
  こちらが本家Twitterのヘッダーです。全体の背景色とヘッダーの色は同じ色です。
60
67
  この状態でtranslucentも効いています。
@@ -68,13 +75,23 @@
68
75
 
69
76
  ![私が再現に挑んでいるアプリの状態その2](2311f37bf6a21cd787f3415ab53d49f9.png)
70
77
 
78
+ 上の画像と同じ、Twitterを再現しようとして作っているアプリの状態その2です。
79
+ 境界は以下の画像の赤枠の中、白線の延長上にあります。
80
+ ![イメージ説明](9241adfb5e605a8a23b67fb2ae17a319.png)
81
+
82
+
71
83
  こちらが本家Twitterのヘッダーその2です。すりガラス効果で背景の文章がぼやけて透けていますが、同時にTableViewの色と同じ色にする事も実現しています。これは色の問題が解決したら取り組もうと思っているのですが、すりガラス効果の度合いも私がマネしたものとは違い、文字やプロフィール画像の輪郭がぼんやり見えています。
72
84
 
85
+
73
86
  ![本家Twitterのヘッダーその2](354b1a3e927ea44f122b7aec6f66caa5.png)
74
87
 
75
88
  ヘッダーのプロフィール画像の形やツイートした画像の表示される大きさなどは今後修正していく予定ですが、
76
89
  その2は同じツイートの文章をヘッダーで透かしています。
77
90
 
91
+ ![イメージ説明](f0121a7b1a5fb61bc4d368de3944eb4c.png)
92
+ これはかなり見えにくいかと思いますが、上の画像と同じ画像です。
93
+ 赤丸の部分にぼんやりとツイートした人のプロフィール画像が透けていて、赤線の上にぼんやりと文章が透けています。
94
+
78
95
  ### 補足情報(FW/ツールのバージョンなど)
79
96
 
80
97
  Xcode11.6

4

誤字を修正

2022/01/08 11:09

投稿

tmyk1979
tmyk1979

スコア145

title CHANGED
File without changes
body CHANGED
@@ -72,7 +72,7 @@
72
72
 
73
73
  ![本家Twitterのヘッダーその2](354b1a3e927ea44f122b7aec6f66caa5.png)
74
74
 
75
- ヘッダーのプロフィール画像の形やツイートした画像の表示される画像の大きさなどは今後修正していく予定ですが、
75
+ ヘッダーのプロフィール画像の形やツイートした画像の表示される大きさなどは今後修正していく予定ですが、
76
76
  その2は同じツイートの文章をヘッダーで透かしています。
77
77
 
78
78
  ### 補足情報(FW/ツールのバージョンなど)

3

本家Twitterとの比較画像その2を追加しました。

2022/01/01 10:08

投稿

tmyk1979
tmyk1979

スコア145

title CHANGED
File without changes
body CHANGED
@@ -58,8 +58,23 @@
58
58
 
59
59
  こちらが本家Twitterのヘッダーです。全体の背景色とヘッダーの色は同じ色です。
60
60
  この状態でtranslucentも効いています。
61
- ![イメジ説明](aacd71643cbd0c960a791a30e8848ea4.png)
61
+ ![本家Twitterのヘッダー](aacd71643cbd0c960a791a30e8848ea4.png)
62
62
 
63
+ こちらが私がTwitterを再現しようとして作っているアプリの状態その2です。
64
+ TableViewの色が濃い紺色(Twitterのダークモードと同じ色)なのに対して、ヘッダーは黒になってしまっています。
65
+ translucentをtrueにする事で、すりガラス効果は得られているのですが、色を指定するとすりガラス効果が失われてしまいます。
66
+ また、すりガラス効果も本家のTwitterのヘッダーと比較するとかなりぼやけてしまっていて、よく見ないと透けているのか
67
+ 分からない感じです。
68
+
69
+ ![私が再現に挑んでいるアプリの状態その2](2311f37bf6a21cd787f3415ab53d49f9.png)
70
+
71
+ こちらが本家Twitterのヘッダーその2です。すりガラス効果で背景の文章がぼやけて透けていますが、同時にTableViewの色と同じ色にする事も実現しています。これは色の問題が解決したら取り組もうと思っているのですが、すりガラス効果の度合いも私がマネしたものとは違い、文字やプロフィール画像の輪郭がぼんやり見えています。
72
+
73
+ ![本家Twitterのヘッダーその2](354b1a3e927ea44f122b7aec6f66caa5.png)
74
+
75
+ ヘッダーのプロフィール画像の形やツイートした画像の表示される画像の大きさなどは今後修正していく予定ですが、
76
+ その2は同じツイートの文章をヘッダーで透かしています。
77
+
63
78
  ### 補足情報(FW/ツールのバージョンなど)
64
79
 
65
80
  Xcode11.6

2

質問内容を修正し、画像による説明を載せました。

2022/01/01 10:05

投稿

tmyk1979
tmyk1979

スコア145

title CHANGED
@@ -1,1 +1,1 @@
1
- navigationbartranslucentの度合いは調整できまか?
1
+ navigationBar色を調整したいです
body CHANGED
@@ -1,16 +1,15 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- Swiftで制作中のアプリのnavigationBarのすりガラス効果の度合いを調整したい。
3
+ Swiftで制作中のアプリのnavigationBarのを調整したい。
4
4
 
5
5
  ここに質問の内容を詳しく書いてください。
6
6
 
7
7
  Swiftの勉強のためTwitterを再現しようとしているのですが、ヘッダーを作っている所で躓いています。
8
- Twitterのタイムラインのページのヘッダーはすりガラスよう半透明で、タイムラインがぼやけ透けるのですが、このヘッダーの背景のぼやけ具合を再現できずにいます。
8
+ Twitterのタイムラインのページのヘッダーはtranslucentが効いた状態で全体背景色と同じ色なっいますが、私が再現できる限りではどうしてもヘッダーの色が微妙違ってしまいます。
9
9
 
10
- barTintColorやtranslucent設定などでトライしですが似せる事はできても再現と言えるレベルまでは寄せられていません。
10
+ navigationBartranslucentが効い状態全体の背景色と同じ色にする事は可能しょうか?
11
+ 可能だとしたらその方法もご教示いただけると助かります。
11
12
 
12
- navigationBarのtranslucentのすりガラス効果の度合いは変更できないのでしょうか?
13
-
14
13
  ### 発生している問題・エラーメッセージ
15
14
 
16
15
  エラーは特にありません。
@@ -21,17 +20,23 @@
21
20
 
22
21
  //viewDidLoad内で呼び出している関数です。
23
22
 
23
+ extension UIViewController {
24
+ private final class StatusBarView: UIView { }
25
+
24
- func addBlurEffect() {
26
+ func setStatusBarBlur() {
27
+ let statusBarFrame = UIApplication.shared.statusBarFrame
25
- let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
28
+ let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
26
- visualEffectView.frame = (self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -10).offsetBy(dx: 0, dy: -10))!
27
- self.navigationController?.navigationBar.barStyle = .black
28
- self.navigationController?.navigationBar.backgroundColor = #colorLiteral(red: 0.1699482692, green: 0.1637130922, blue: 0.3196581536, alpha: 1)
29
- self.navigationController?.navigationBar.isTranslucent = true
30
- self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
31
- self.navigationController?.navigationBar.addSubview(visualEffectView)
32
- self.navigationController?.navigationBar.shadowImage = UIImage()
33
- visualEffectView.layer.zPosition = -1
29
+ visualEffectView.frame = statusBarFrame
30
+ view.addSubview(visualEffectView)
34
- visualEffectView.isUserInteractionEnabled = false
31
+ visualEffectView.translatesAutoresizingMaskIntoConstraints = false
32
+ visualEffectView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
33
+ visualEffectView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
34
+ visualEffectView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
35
+ if #available(iOS 11.0, *) {
36
+ visualEffectView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
37
+ } else {
38
+ // Fallback on earlier versions
39
+ }
35
40
  }
36
41
 
37
42
  ```
@@ -40,12 +45,21 @@
40
45
 
41
46
  ここに問題に対して試したことを記載してください。
42
47
 
43
- UIVisualEffectView(effect: UIBlurEffect(style: .dark))としてTableViewの背景色と違ってしまう分、navigationController?.navigationBar.barTintColorを調節するなどして色合いを合わせようとしましたが、透明度がと背景ぼやけ具合が合いませんでした。
48
+ UIVisualEffectView(effect: UIBlurEffect(style: .dark))としてTableViewの背景色と違ってしまう分、navigationController?.navigationBar.barTintColorを調節するなどして色合いを合わせようとしましたが、完璧に同じ色にするは困難でした。
44
49
 
45
50
  StoryBoardでもnavigationBarのスタイルを変えたりしましたが、DefaultでもBlackでも色合いが合いませんでした。
46
51
 
47
- 半透明はtransLucenttrueにして半透明はなったのですが、Twitterのタイムラインのヘッダーのような透明度・背景のぼやけ具合になりませんで
52
+ UIBlurEffectのStyleregularにしてダークモード対応するようにしたのですが、やはりヘッダーと全体の背景微妙に違ってまいます
48
53
 
54
+ こちらが私がTwitterを再現しようとして作っているアプリの状態です。
55
+ ヘッダーが全体の背景色よりも微妙に暗い色になってしまっています。
56
+ translucentを効かせるとどうしても同じ色になりません。
57
+ ![![私が再現に挑んでいるアプリの状態](d83be30779d230b63e8e9d6399e1c59c.png)](33f5c3774517b3ea1d6680a5e3f45f98.png)
58
+
59
+ こちらが本家Twitterのヘッダーです。全体の背景色とヘッダーの色は同じ色です。
60
+ この状態でtranslucentも効いています。
61
+ ![イメージ説明](aacd71643cbd0c960a791a30e8848ea4.png)
62
+
49
63
  ### 補足情報(FW/ツールのバージョンなど)
50
64
 
51
65
  Xcode11.6

1

質問の内容を絞りました。

2021/12/31 18:33

投稿

tmyk1979
tmyk1979

スコア145

title CHANGED
@@ -1,1 +1,1 @@
1
- iOSアプリnavigationBar色と背景ぼかしと半透明の度合い調整したい
1
+ navigationbartranslucentの度合い調整できますか?
body CHANGED
@@ -1,15 +1,15 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- TwitterタイムラインページのnavigationBarを再現したい。
3
+ Swiftで制作中アプリのnavigationBarのすりガラス効果の度合い調整したい。
4
4
 
5
5
  ここに質問の内容を詳しく書いてください。
6
6
 
7
- Swiftの勉強のため、Twitterを再現しようとしています。
8
- タイムラインページから取り掛かっているのですが、ヘッダーを作っている所で躓いています。
7
+ Swift勉強のためTwitterを再現しようとしているのですが、ヘッダーを作っている所で躓いています。
9
- Twitterのタイムラインのページのヘッダーはすりガラスのように半透明で、タイムラインがぼやけて透けるのですが、このヘッダーの色合いと透明度と背景のぼやけ具合を再現できずにいます。
8
+ Twitterのタイムラインのページのヘッダーはすりガラスのように半透明で、タイムラインがぼやけて透けるのですが、このヘッダーの背景のぼやけ具合を再現できずにいます。
9
+
10
10
  barTintColorやtranslucentの設定などでトライしたのですが似せる事はできても再現と言えるレベルまでは寄せられていません。
11
11
 
12
- どうしたらTwitterタイムインページのヘッダーを再現できでしょうか
12
+ navigationBartranslucentのすりガス効果度合いは変更できないのでしょうか
13
13
 
14
14
  ### 発生している問題・エラーメッセージ
15
15