XCode 12.5 日本語化計画：Swift Tutorials

セクション 6

詳細ビューの作成




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




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




















ステップ 1

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






























ステップ 2

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































ステップ 3

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




---




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





ステップ 4

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




---




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





ステップ 5

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


















ステップ 6

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




---




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



















ステップ 7

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















ステップ 8

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















ステップ 9

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












ステップ 10

最後に、subheadline フォント修飾子を各 Text ビューから、それらを含む HStack に移動し、subheadline テキストに 2 次色を適用します。




---




スタックなどのレイアウトビューに修飾子を適用すると、SwiftUI はグループに含まれるすべての要素に修飾子を適用します。

プレビューその 1

    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. }

プレビューその 2

    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. }

プレビューその 3

    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)

プレビューその 4

    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

    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

    ContentView.swift

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

プレビューその 7

    ContentView.swift

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

プレビューその 8

    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")

プログラム全体