![[iOS][SwiftUI] 徐々に薄くなるテキストの作成方法 其の弐](https://images.ctfassets.net/ct0aopd36mqt/6pvolsq7lvoZ5ejkYwyyu0/1ccd3a7b7cd1da61a843cc5f491b6ebd/ios-tanaka-keisuke.png?w=3840&fm=webp)
[iOS][SwiftUI] 徐々に薄くなるテキストの作成方法 其の弐
はじめに
スターバックスデジタルテクノロジー部のけいすけです。
今回は以下の記事で紹介した テキストを薄くする方法 を別のアプローチで実現します。
overlay
前回は Text の foregroundStyle に LinearGradient を設定しました。
今回も同様に LinearGradient を使用するのですが、こちらは Text の overlay として組み込みます。
Text("薄くなっていくぅ〜")
.overlay {
LinearGradient(
colors: [.clear, .white],
startPoint: .leading,
endPoint: .trailing
)
}
解説
透明・白 を 左から右へ 指定した View を overlay として設定します。
白 としている部分はテキストの背景色と合わせてください。
この設定により、テキストに重なった View が右側へ行くに連れて色付いていきます。
foregroundStyle で指定した時とは LinearGradient の カラー配列が逆順である ことにご注意ください。
使い所
画面外など、コンテンツの存在を示唆する場合に効果的です。
以下の例では画面端で見切れてしまったテキストに続きがあることを表現しています。
ScrollView(.horizontal) {
Text("左右にスクロールできるよ左右にスクロールできるよ")
.padding(.horizontal, 128)
.font(.system(size: 96))
}
.overlay {
HStack {
LinearGradient(
colors: [.white, .clear],
startPoint: .leading,
endPoint: .trailing
)
.frame(width: 128)
Spacer()
LinearGradient(
colors: [.clear, .white],
startPoint: .leading,
endPoint: .trailing
)
.frame(width: 128)
}
.allowsHitTesting(false) // <- ポイント
}
ここでのポイントは overlay の View に対して allowsHitTesting(false) を設定していることです。
overlay は文字通り対象の View に別の View を重ねているため、半透明の部分（ここでは LinearGradient）を左右にスワイプしてもスクロールができません。
allowsHitTesting(false) の指定で View に対する操作を背面の View に渡すことでこの問題は解消できます。
おわりに
テキストを薄くする と言っても SwiftUI ではその実現方法は様々です。
目的に沿った適切な方法を選択していきましょう。
今回の overlay を採用する際、背面の View がタッチ操作可能な場合は allowsHitTesting をうまく利用してみてください。
リンク
- [iOS][SwiftUI] 徐々に薄くなるテキストの作成方法 | DevelopersIO
- overlay(alignment:content:) | Apple Documentation
- allowsHitTesting(_:) | Apple Documentation
- LinearGradient | Apple Documentation
採用情報
スターバックスデジタルテクノロジー部では iOS アプリエンジニアを募集しています。
一緒にスタバのアプリを作りませんか？
