XCode 12.4 日本語化計画：Swift Tutorials

セクション 104

カスタムページコントロールの追加




今や、SwiftUIUIViewRepresentable ビューに包み込まれたカスタム UIPageControl をビューに追加する準備が整いました。











ステップ 1

PageControl.swift という名前の新しい SwiftUI ビューファイルを作成します。UIViewRepresentable プロトコルに準拠するように PageControl の型を更新します。




---




UIViewRepresentable の型と UIViewControllerRepresentable の型の寿命は同じで、メソッドは基になる UIKit の型に対応しています。





    PageControl.swift



1. import SwiftUI
import UIKit
struct PageControl: UIViewRepresentable {
var numberOfPages: Int
@Binding var currentPage: Int
func makeUIView(context: Context) -> UIPageControl {
let control = UIPageControl()
control.numberOfPages = numberOfPages
return control
}
func updateUIView(_ uiView: UIPageControl, context: Context) {
uiView.currentPage = currentPage
}
}




ステップ 2

テキストボックスをページコントロールに置き換え、レイアウトを VStack から ZStack に切り替えます。




---




ページ数と現在のページへの結束を渡しているため、ページコントロールにはすでに正しい値が表示されています。





    PageView.swift



1. import SwiftUI
3. struct PageView<Page: View>: View {
4. var pages: [Page]
5. @State private var currentPage = 0
7. var body: some View {
ZStack(alignment: .bottomTrailing) {
8. PageViewController(pages: pages, currentPage: $currentPage)
PageControl(numberOfPages: pages.count, currentPage: $currentPage)
.frame(width: CGFloat(pages.count * 18))
.padding(.trailing)
9. }
10. }
11. }
13. struct PageView_Previews: PreviewProvider {
14. static var previews: some View {
15. PageView(pages: ModelData().features.map { FeatureCard(landmark: $0) })
16. .aspectRatio(3 / 2, contentMode: .fit)
17. }
18. }




プレビューその 1





次に、ページコントロールをインタラクティブにして、ユーザが片側または反対側をタップしてページ間を移動できるようにします。





ステップ 3

PageControl 内で入れ子にされた Cordinator の型を作成し、makeCoordinator() メソッドを追加して、新しいコーディネータを作成して返します。




UIPageControl のような UIControl サブクラスはデリゲートの代わりにターゲットアクションパターンを使用するため、この Coordinator は @objc メソッドを実装して現在のページの結束を更新します。





    PageControl.swift



6. @Binding var currentPage: Int
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
8. func makeUIView(context: Context) -> UIPageControl {
9. let control = UIPageControl()



---



20. uiView.currentPage = currentPage
21. }
class Coordinator: NSObject {
var control: PageControl
init(_ control: PageControl) {
self.control = control
}
@objc
func updateCurrentPage(sender: UIPageControl) {
control.currentPage = sender.currentPage
}
}
22. }




ステップ 4

実行するアクションとして updateCurrentPage(sender:)) メソッドを指定して、valueChanged イベントのターゲットとしてコーディネータを追加します。





    PageControl.swift



13. let control = UIPageControl()
14. control.numberOfPages = numberOfPages
control.addTarget(
context.coordinator,
action: #selector(Coordinator.updateCurrentPage(sender:)),
for: .valueChanged)
16. return control




プログラム全体 その 1





ステップ 5

最後に、CategoryHome 内で、プレースホルダの特徴のある画像を新しいページビューに置き換えます。





    CategoryHome.swift



1. import SwiftUI
3. struct CategoryHome: View {
4. @EnvironmentObject var modelData: ModelData
5. @State private var showingProfile = false
7. var body: some View {
8. NavigationView {
9. List {
PageView(pages: modelData.features.map { FeatureCard(landmark: $0) })
.aspectRatio(3 / 2, contentMode: .fit)
10. .listRowInsets(EdgeInsets())
12. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
13. CategoryRow(categoryName: key, items: modelData.categories[key]!)
14. }
15. .listRowInsets(EdgeInsets())
16. }
17. .listStyle(InsetListStyle())
18. .navigationTitle("Featured")
19. .toolbar {
20. Button(action: { showingProfile.toggle() }) {
21. Image(systemName: "person.crop.circle")
22. .accessibilityLabel("User Profile")
23. }
24. }
25. .sheet(isPresented: $showingProfile) {
26. ProfileHost()
27. .environmentObject(modelData)
28. }
29. }
30. }
31. }
33. struct CategoryHome_Previews: PreviewProvider {
34. static var previews: some View {
35. CategoryHome()
36. .environmentObject(ModelData())
37. }
38. }




プレビューその 2





ステップ 6

さあ、さまざまな作用をすべて試してみましょう。PageView は、UIKit と SwiftUI のビューとコントローラがどのように連携するかを示します。













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







あなたの理解度をチェックしてください





---





質問 1




UIKit ビューコントローラを SwiftUI にブリッジするためにどのプロトコルを使用しますか？



(訳注： 原典と異なり、選択肢を選ぶとすぐ答えが表示されます)



UIViewRepresentable

UIHostingController

UIViewControllerRepresentable






質問 2




UIViewControllerRepresentable 型のデリゲートまたはデータソースを作成するのはどのメソッド内ですか？




それはデリゲートまたはデータソースを使用するため、UIViewController を作成するのと同じ makeUIViewController(context:) メソッド内です。

UIViewControllerRepresentable 型のイニシャライザ内。

makeCoordinator() メソッド内です。





次




watchOS アプリの作成




このチュートリアルでは、SwiftUI についてすでに学んだことの多くを適用し、わずかな努力で Landmarks アプリを watchOS に移行する機会を提供します。




さあ始めましょう