XCode 12.4 日本語化計画：Swift Tutorials

フレームワークとの統合

UIKit とのインターフェース

SwiftUI は、すべての Apple プラットフォームの既存の UI フレームワークとシームレスに連携します。たとえば、UIKit ビューとビューコントローラを SwiftUI ビュー内に配置したり、その逆を行うことができます。

このチュートリアルでは、注目のランドマークをホームスクリーンから変換して、UIPageViewController と UIPageControl のインスタンスを包み込む方法を示します。 UIPageViewController を使用して SwiftUI ビューの盛り上がりを表示し、状態変数と拘束を使用して、ユーザインターフェイス全体でのデータの更新を調整します。

手順に従ってこのプロジェクトをビルドするか、完成したプロジェクトをダウンロードして自分で探索してください。

25min 予想される時間

プロジェクト ファイル

Xcode 12

セクション 101

UIPageViewController を表すビューを作成




SwiftUI で UIKit ビューとビューコントローラを表すには、UIViewRepresentable および UIViewControllerRepresentable プロトコルに準拠する型を作成して下さい。カスタムの型は、それらが表す UIKit 型を作成および構成し、SwiftUI はそれらのライフサイクルを管理し、必要に応じて更新します。











ステップ 1

プロジェクトの Views フォルダに PageView グループを作成し、PageViewController.swift という名前の新しい Swift ファイルを追加します。 PageViewController 型が UIViewControllerRepresentable に準拠していると宣言します。




---




ページビューコントローラは、Page インスタンスの配列を格納しますが、これは View の型でなければなりません。これらは、ランドマーク間をスクロールするために使用するページです。





    PageViewController.swift



1. import SwiftUI
2. import UIKit
4. struct PageViewController<Page: View>: UIViewControllerRepresentable {
5. var pages: [Page]
7. }




次に、UIViewControllerRepresentable プロトコルの 2 つの要件を追加します。





ステップ 2

目的とする構成で UIPageViewController を作成する makeUIViewController(context:) メソッドを追加します。




---




SwiftUI は、ビューを表示する準備ができたときにこのメソッドを 1 回呼び出し、その後ビューコントローラーのライフサイクルを管理します。





    PageViewController.swift



5. var pages: [Page]
func makeUIViewController(context: Context) -> UIPageViewController {
let pageViewController = UIPageViewController(
transitionStyle: .scroll,
navigationOrientation: .horizontal)
return pageViewController
}
7. }




ステップ 3

setViewControllers(_:direction:animated:) を呼び出す updateUIViewController(_:context:) メソッドを追加して、表示用のビューコントローラを提供します。




---




今のところ、更新のたびに SwiftUI ビューのページをホストする UIHostingController を作成して下さい。後で、ページビューコントローラの寿命中にコントローラを 1 回だけ初期化することで、これをより効率的にできます。





    PageViewController.swift



12. return pageViewController
13. }
func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
pageViewController.setViewControllers(
[UIHostingController(rootView: pages[0])], direction: .forward, animated: true)
}
14. }




続ける前に、ページとして使用する、特徴のあるカードを準備します。





ステップ 4

ダウンロードしたプロジェクトファイルの Resources ディレクトリにある画像をアプリの Asset(アセット) カタログにドラッグします。




---




ランドマークの特徴のある画像が存在する場合、通常の画像とは異なるサイズになります。











ステップ 5

特徴のある画像が存在する場合は、それを返す Landmark 構造体に計算されたプロパティを追加します。





    Landmark.swift



1. import Foundation
2. import SwiftUI
3. import CoreLocation
5. struct Landmark: Hashable, Codable, Identifiable {
6. var id: Int
7. var name: String
8. var park: String
9. var state: String
10. var description: String
11. var isFavorite: Bool
12. var isFeatured: Bool
14. var category: Category
15. enum Category: String, CaseIterable, Codable, Hashable {
16. case lakes = "Lakes"
17. case rivers = "Rivers"
18. case mountains = "Mountains"
19. }
21. private var imageName: String
22. var image: Image {
23. Image(imageName)
24. }
var featureImage: Image? {
isFeatured ? Image(imageName + "_feature") : nil
}
26. private var coordinates: Coordinates
27. var locationCoordinate: CLLocationCoordinate2D {
28. CLLocationCoordinate2D(
29. latitude: coordinates.latitude,
30. longitude: coordinates.longitude)
31. }
33. struct Coordinates: Hashable, Codable {
34. var latitude: Double
35. var longitude: Double
36. }
37. }




ステップ 6

ランドマークの特徴ある画像を表示する FeatureCard.swift という名前の新しい SwiftUI ビューファイルを追加します。





    FeatureCard.swift



1. import SwiftUI
3. struct FeatureCard: View {
4. var landmark: Landmark
6. var body: some View {
7. landmark.featureImage?
8. .resizable()
9. .aspectRatio(3 / 2, contentMode: .fit)
10. }
11. }
13. struct FeatureCard_Previews: PreviewProvider {
14. static var previews: some View {
15. FeatureCard(landmark: ModelData().features[0])
16. }
17. }




プレビューその 1




ステップ 7

ランドマークに関するテキスト情報を画像に重ね合わせます。




    FeatureCard.swift



8. .resizable()
9. .aspectRatio(3 / 2, contentMode: .fit)
.overlay(TextOverlay(landmark: landmark))
10. }
11. }
struct TextOverlay: View {
var landmark: Landmark
var gradient: LinearGradient {
LinearGradient(
gradient: Gradient(
colors: [Color.black.opacity(0.6), Color.black.opacity(0)]),
startPoint: .bottom,
endPoint: .center)
}
var body: some View {
ZStack(alignment: .bottomLeading) {
Rectangle().fill(gradient)
VStack(alignment: .leading) {
Text(landmark.name)
.font(.title)
.bold()
Text(landmark.park)
}
.padding()
}
.foregroundColor(.white)
}
}
13. struct FeatureCard_Previews: PreviewProvider {
14. static var previews: some View {
15. FeatureCard(landmark: ModelData().features[0])
16. }
17. }




プレビューその 2




次に、UIViewControllerRepresentable ビューを表示するカスタムビューを作成します。





ステップ 8

PageView.swift という名前の新しい SwiftUI ビューファイルを作成し、PageView の型を更新して、PageViewController を子ビューとして宣言します。




---




Xcode が Page の型を推測できないため、プレビューは失敗します。




    PageView.swift



1. import SwiftUI
struct PageView<Page: View>: View {
var pages: [Page]
3. var body: some View {
PageViewController(pages: pages)
4. }
5. }
7. struct PageView_Previews: PreviewProvider {
8. static var previews: some View {
9. PageView()
10. }
11. }




ステップ 9

プレビュープロバイダーを更新して、必要なビューの配列を渡すと、プレビューが機能し始めます。





    PageView.swift



11. struct PageView_Previews: PreviewProvider {
12. static var previews: some View {
PageView(pages: ModelData().features.map { FeatureCard(landmark: $0) })
.aspectRatio(3 / 2, contentMode: .fit)
13. }
14. }




プレビューその 3











セクション 1	セクション 2
セクション 3	セクション 4
セクション 101	セクション 102
セクション 103	セクション 104