質問編集履歴
7
誤字を直しました。
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
エラー内容にどんな状態かを記し、試した事は別に追記しました。
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
|
+
](e73cd43a0b5bd3fca8308e34aaed8db2.png)
|
96
|
+
|
97
|
+
次にtableViewの色は青のままにして、navigationBarのbarTintColorをtableviewと同じ青にしました。また、navigationBarの下のボーダーを消す設定を試しました。
|
98
|
+
これでnavigationBarとtableViewが同じ色にはなりましたが、すりガラス効果はありません。
|
99
|
+
|
100
|
+

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

|
105
|
+
|
106
|
+
カピ通信というサイトの記事(https://capibara1969.com/933/)によると「.barTintColorオプションでナビゲーションバーの背景色を指定します。デフォルト値はnilです。この値が設定された場合、.translucentオプション値に関係なく、半透明化は無効になります。」とありました。
|
107
|
+
|
108
|
+
今度はすりガラス効果が無効にならないようにbarTintColorを削除して、Translucentのみが効くようにしてみました。Translucentは効いたのですが、ヘッダーはtableViewよりも暗くなってしまいます。
|
109
|
+
|
110
|
+

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

|
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の色の境界が分かりやすいように新たに画像を追加しました。
title
CHANGED
File without changes
|
body
CHANGED
@@ -55,6 +55,13 @@
|
|
55
55
|
ヘッダーが全体の背景色よりも微妙に暗い色になってしまっています。
|
56
56
|
translucentを効かせるとどうしても同じ色になりません。
|
57
57
|
](33f5c3774517b3ea1d6680a5e3f45f98.png)
|
58
|
+
こちらは上の画像に赤枠と白線を付けたものです。
|
59
|
+
赤線で囲っている部分の白線の延長線上に色の境界があります。
|
60
|
+

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

|
58
65
|
|
59
66
|
こちらが本家Twitterのヘッダーです。全体の背景色とヘッダーの色は同じ色です。
|
60
67
|
この状態でtranslucentも効いています。
|
@@ -68,13 +75,23 @@
|
|
68
75
|
|
69
76
|

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

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

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

|
92
|
+
これはかなり見えにくいかと思いますが、上の画像と同じ画像です。
|
93
|
+
赤丸の部分にぼんやりとツイートした人のプロフィール画像が透けていて、赤線の上にぼんやりと文章が透けています。
|
94
|
+
|
78
95
|
### 補足情報(FW/ツールのバージョンなど)
|
79
96
|
|
80
97
|
Xcode11.6
|
4
誤字を修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -72,7 +72,7 @@
|
|
72
72
|
|
73
73
|

|
74
74
|
|
75
|
-
ヘッダーのプロフィール画像の形やツイートした画像の表示される
|
75
|
+
ヘッダーのプロフィール画像の形やツイートした画像の表示される大きさなどは今後修正していく予定ですが、
|
76
76
|
その2は同じツイートの文章をヘッダーで透かしています。
|
77
77
|
|
78
78
|
### 補足情報(FW/ツールのバージョンなど)
|
3
本家Twitterとの比較画像その2を追加しました。
title
CHANGED
File without changes
|
body
CHANGED
@@ -58,8 +58,23 @@
|
|
58
58
|
|
59
59
|
こちらが本家Twitterのヘッダーです。全体の背景色とヘッダーの色は同じ色です。
|
60
60
|
この状態でtranslucentも効いています。
|
61
|
-

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

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

|
74
|
+
|
75
|
+
ヘッダーのプロフィール画像の形やツイートした画像の表示される画像の大きさなどは今後修正していく予定ですが、
|
76
|
+
その2は同じツイートの文章をヘッダーで透かしています。
|
77
|
+
|
63
78
|
### 補足情報(FW/ツールのバージョンなど)
|
64
79
|
|
65
80
|
Xcode11.6
|
2
質問内容を修正し、画像による説明を載せました。
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
|
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
|
-
|
10
|
+
navigationBarのtranslucentが効いた状態で全体の背景色と同じ色にする事は可能でしょうか?
|
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
|
26
|
+
func setStatusBarBlur() {
|
27
|
+
let statusBarFrame = UIApplication.shared.statusBarFrame
|
25
|
-
let visualEffectView
|
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.
|
29
|
+
visualEffectView.frame = statusBarFrame
|
30
|
+
view.addSubview(visualEffectView)
|
34
|
-
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
|
+
}
|
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
|
-
|
52
|
+
UIBlurEffectのStyleをregularにしてダークモードに対応するようにしたのですが、やはりヘッダーと全体の背景色は微妙に違ってしまいます。
|
48
53
|
|
54
|
+
こちらが私がTwitterを再現しようとして作っているアプリの状態です。
|
55
|
+
ヘッダーが全体の背景色よりも微妙に暗い色になってしまっています。
|
56
|
+
translucentを効かせるとどうしても同じ色になりません。
|
57
|
+
](33f5c3774517b3ea1d6680a5e3f45f98.png)
|
58
|
+
|
59
|
+
こちらが本家Twitterのヘッダーです。全体の背景色とヘッダーの色は同じ色です。
|
60
|
+
この状態でtranslucentも効いています。
|
61
|
+

|
62
|
+
|
49
63
|
### 補足情報(FW/ツールのバージョンなど)
|
50
64
|
|
51
65
|
Xcode11.6
|
1
質問の内容を絞りました。
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
|
1
|
+
navigationbarのtranslucentの度合いは調整できますか?
|
body
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
### 前提・実現したいこと
|
2
2
|
|
3
|
-
|
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
|
-
|
12
|
+
navigationBarのtranslucentのすりガラス効果の度合いは変更できないのでしょうか?
|
13
13
|
|
14
14
|
### 発生している問題・エラーメッセージ
|
15
15
|
|