XCode 12.5 日本語化計画：Swift Tutorials

セクション 106

詳細ビューの作成




これで、名前と場所、円形のイメージ、場所のマップなど、必要なすべてのコンポーネントが揃いました。




これまでに使用したツールを使用して、カスタムビューを組み合わせて、ランドマークの詳細ビューの最終的なデザインを作成します。











ステップ 1

プロジェクトナビゲータで、ContentView.swift ファイルを選択します。





    ContentView.swift



1. import SwiftUI
3. struct ContentView: View {
4. var body: some View {
5. VStack(alignment: .leading) {
6. Text("Turtle Rock")
7. .font(.title)
9. HStack {
10. Text("Joshua Tree National Park")
11. .font(.subheadline)
12. Spacer()
13. Text("California")
14. .font(.subheadline)
15. }
16. }
17. .padding()
18. }
19. }
21. struct ContentView_Previews: PreviewProvider {
22. static var previews: some View {
23. ContentView()
24. }
25. }




プレビューその 1





ステップ 2

3 つのテキストビューを保持する VStack を別の VStack に埋め込みます。





    ContentView.swift



1. import SwiftUI
3. struct ContentView: View {
4. var body: some View {
VStack {
5. VStack(alignment: .leading) {
6. Text("Turtle Rock")
7. .font(.title)
9. HStack {
10. Text("Joshua Tree National Park")
11. .font(.subheadline)
12. Spacer()
13. Text("California")
14. .font(.subheadline)
15. }
16. }
17. .padding()
}
18. }
19. }
21. struct ContentView_Previews: PreviewProvider {
22. static var previews: some View {
23. ContentView()
24. }
25. }




プレビューその 2





ステップ 3

カスタムの MapView をスタックの一番上に追加します。MapView のサイズをframe(width:height:) で設定します。




---




height パラメータのみを指定すると、ビューはそのコンテンツの幅に合わせて自動的にサイズ変更されます。この場合、MapView は使用可能なスペースを埋めるために展開されます。





    ContentView.swift



1. import SwiftUI
3. struct ContentView: View {
4. var body: some View {
5. VStack {
MapView()
.frame(height: 300)
6. VStack(alignment: .leading) {
7. Text("Turtle Rock")
8. .font(.title)




プレビューその 3





ステップ 4

[Live Preview(ライブプレビュー)] をクリックして、レンダリングされたマップを合成されたビュー内に表示します。




---




ライブプレビューを表示しながら、ビューの編集を続けることができます。





プレビューその 4





ステップ 5

CircleImage ビューをスタックに追加します。





    ContentView.swift



1. import SwiftUI
3. struct ContentView: View {
4. var body: some View {
5. VStack {
6. MapView()
7. .frame(height: 300)
CircleImage()
9. VStack(alignment: .leading) {
10. Text("Turtle Rock")
11. .font(.title)




プレビューその 5





ステップ 6

マップビューの一番上にイメージビューを重ねるには、イメージに垂直方向に -130 ポイントのオフセットを与え、ビューの下から -130 ポイントの余白を与えます。




---




これらの調整により、イメージを上に移動することでテキスト用の余白が確保されます。




    ContentView.swift



1. import SwiftUI
3. struct ContentView: View {
4. var body: some View {
5. VStack {
6. MapView()
7. .frame(height: 300)
9. CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
11. VStack(alignment: .leading) {
12. Text("Turtle Rock")
13. .font(.title)




プレビューその 6





ステップ 7

外側の VStack の下に Spacer を追加して、コンテンツをスクリーンの上に押し上げます。





    ContentView.swift



21. Text("California")
22. .font(.subheadline)
23. }
24. }
25. .padding()
Spacer()
26. }
27. }
28. }




プレビューその 7





ステップ 8

マップコンテンツをスクリーンの上端まで拡張できるようにするには、 ignoresSafeArea(edges:.top) 修飾子をマップビューに追加します。





    ContentView.swift



5. VStack {
6. MapView()
.ignoresSafeArea(edges: .top)
7. .frame(height: 300)
9. CircleImage()




プレビューその 8





ステップ 9

ランドマークに仕切り(Divider)といくつかの追加の説明テキスト(Descriptive text)を追加します。




    ContentView.swift



22. Text("California")
23. .font(.subheadline)
24. }
Divider()
Text("About Turtle Rock")
.font(.title2)
Text("Descriptive text goes here.")
25. }
26. .padding()




プレビューその 9





    ContentView.swift



18. HStack {
19. Text("Joshua Tree National Park")
20. Spacer()
21. Text("California")
22. }
.font(.subheadline)
.foregroundColor(.secondary)
24. Divider()
26. Text("About Turtle Rock")




プレビューその 10





プログラム全体









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