XCode 12.5 日本語化計画：Swift Tutorials

セクション 104

カスタムイメージビューの作成




名前と場所のビューがすべて設定されたら、次のステップはランドマークのイメージを追加することです。




このファイルにコードを追加する代わりに、イメージにマスク、境界線、およびドロップシャドウを適用するカスタムビューを作成しましょう。








プロジェクトのアセットカタログにイメージを追加することから始めます。





ステップ 1

プロジェクトファイルの Resources フォルダ内の turtlerock@2x.jpg を見つけ、それをアセットカタログのエディタ内にドラッグします。Xcode は、イメージの新しいイメージセットを作成します。











次に、カスタム画像ビュー用の新しい SwiftUI ビューを作成して下さい。





ステップ 2

[File(ファイル)] > [New(新規)] > [File(ファイル)] を選択して、テンプレートセレクタを再度開きます。[User Interface] セクション内で、"SwiftUI View] を選択し、[Next(次へ)] をクリックします。ファイルに CircleImage.swift という名前を付け、[Create(作成)] をクリックします。











これで、イメージを挿入し、目的のデザインに一致するようにその表示を変更する準備が整いました。





ステップ 3

Image(_:) イニシャライザを使用して、テキストビューを Turtle Rock のイメージに置き換え、表示すべきイメージの名前を渡します。





プレビューその 1





    CircleImage.swift



1. import SwiftUI
3. struct CircleImage: View {
4. var body: some View {
Image("turtlerock")
5. }
6. }
8. struct CircleImage_Previews: PreviewProvider {
9. static var previews: some View {
10. CircleImage()
11. }
12. }




ステップ 4

clipShape(Circle()) への呼び出しを追加して、円形の切り抜き形状をイメージに適用します。




---




Circle 型は、マスクとして、または円にストロークまたは塗りつぶしを与えることによってビューとして使用できる形状です。





プレビューその 2





    CircleImage.swift



1. import SwiftUI
3. struct CircleImage: View {
4. var body: some View {
5. Image("turtlerock")
.clipShape(Circle())
6. }
7. }
9. struct CircleImage_Previews: PreviewProvider {
10. static var previews: some View {
11. CircleImage()
12. }
13. }




ステップ 5

灰色のストロークで別の円を作成し、それを覆いとして追加し、イメージに境界線を与えます。





プレビューその 3





    CircleImage.swift



1. import SwiftUI
3. struct CircleImage: View {
4. var body: some View {
5. Image("turtlerock")
6. .clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 4))
7. }
8. }
10. struct CircleImage_Previews: PreviewProvider {
11. static var previews: some View {
12. CircleImage()
13. }
14. }




ステップ 6

次に、半径 7 ポイントの影を追加します。





プレビューその 4





    CircleImage.swift



1. import SwiftUI
3. struct CircleImage: View {
4. var body: some View {
5. Image("turtlerock")
6. .clipShape(Circle())
7. .overlay(Circle().stroke(Color.gray, lineWidth: 4))
.shadow(radius: 7)
8. }
9. }
11. struct CircleImage_Previews: PreviewProvider {
12. static var previews: some View {
13. CircleImage()
14. }
15. }




ステップ 7

境界線の色を白に替えます。




---




これでイメージの表示は完了です。





プレビューその 5





    CircleImage.swift



1. import SwiftUI
3. struct CircleImage: View {
4. var body: some View {
5. Image("turtlerock")
6. .clipShape(Circle())
.overlay(Circle().stroke(Color.white, lineWidth: 4))
7. .shadow(radius: 7)
8. }
9. }
11. struct CircleImage_Previews: PreviewProvider {
12. static var previews: some View {
13. CircleImage()
14. }
15. }








セクション 1	セクション 2	セクション 3
セクション 4	セクション 5	セクション 6
セクション 101	セクション 102	セクション 103
セクション 104	セクション 105	セクション 106