XCode 12.4 日本語化計画：Swift Tutorials

セクション 103

SwiftUI ビューの状態内でページを追跡する




カスタムの UIPageControl を追加する準備をするには、PageView 内から現在のページを追跡する方法が必要です。




これを行うには、PageView 内で @State プロパティを宣言し、このプロパティへの拘束を PageViewController ビューに渡します。PageViewController は、表示されているページに一致するように拘束を更新します。











ステップ 1

まず、currentPage 拘束 (binding) を PageViewController のプロパティとして追加します。




---




@Binding プロパティの宣言に加えて、setViewControllers(_:direction:animated:) への呼び出しをも更新し、currentPage 拘束の値を渡します。




    PageViewController.swift



1. import SwiftUI
2. import UIKit
4. struct PageViewController<Page: View>: UIViewControllerRepresentable {
5. var pages: [Page]
@Binding var currentPage: Int
7. func makeCoordinator() -> Coordinator {
8. Coordinator(self)
9. }
11. func makeUIViewController(context: Context) -> UIPageViewController {
12. let pageViewController = UIPageViewController(
13. transitionStyle: .scroll,
14. navigationOrientation: .horizontal)
15. pageViewController.dataSource = context.coordinator
17. return pageViewController
18. }
20. func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
21. pageViewController.setViewControllers(
[context.coordinator.controllers[currentPage]], direction: .forward, animated: true)
22. }
24. class Coordinator: NSObject, UIPageViewControllerDataSource {
25. var parent: PageViewController
26. var controllers = [UIViewController]()
28. init(_ pageViewController: PageViewController) {
29. parent = pageViewController
30. controllers = parent.pages.map { UIHostingController(rootView: $0) }
31. }
33. func pageViewController(
34. _ pageViewController: UIPageViewController,
35. viewControllerBefore viewController: UIViewController) -> UIViewController?
36. {
37. guard let index = controllers.firstIndex(of: viewController) else {
38. return nil
39. }
40. if index == 0 {
41. return controllers.last
42. }
43. return controllers[index - 1]
44. }
46. func pageViewController(
47. _ pageViewController: UIPageViewController,
48. viewControllerAfter viewController: UIViewController) -> UIViewController?
49. {
50. guard let index = controllers.firstIndex(of: viewController) else {
51. return nil
52. }
53. if index + 1 == controllers.count {
54. return controllers.first
55. }
56. return controllers[index + 1]
57. }
58. }
59. }




ステップ 2

PageView 内に @State 変数を宣言し、子の PageViewController を作成するときにプロパティへの結束を渡します。




---




重要




$ 構文を使用して、状態 (state) として格納される値への結束を作成することを忘れないでください。





    PageView.swift



1. import SwiftUI
3. struct PageView<Page: View>: View {
4. var pages: [Page]
@State private var currentPage = 0
6. var body: some View {
PageViewController(pages: pages, currentPage: $currentPage)
7. }
8. }
10. struct PageView_Previews: PreviewProvider {
11. static var previews: some View {
12. PageView(pages: ModelData().features.map { FeatureCard(landmark: $0) })
13. .aspectRatio(3 / 2, contentMode: .fit)
14. }
15. }




プレビューその 1





ステップ 3

その初期値を変更して、値が PageViewController への結束を通過することをテストしてみましょう。




---




実験

ページビューコントローラを 2 番目のビューに飛ばさせるボタンを PageView に追加します。





    PageView.swift



3. struct PageView<Page: View>: View {
4. var pages: [Page]
@State private var currentPage = 1
6. var body: some View {




プレビューその 2





ステップ 4

currentPage プロパティを使用してテキストビューを追加し、@State プロパティの値を監視できるようにします。




---




ページからページとスワイプしても、値は変わらないことに注意してください。





    PageView.swift



3. struct PageView<Page: View>: View {
4. var pages: [Page]
@State private var currentPage = 0
6. var body: some View {
VStack {
PageViewController(pages: pages, currentPage: $currentPage)
Text("Current Page: \(currentPage)")
}
7. }
8. }
10. struct PageView_Previews: PreviewProvider {
11. static var previews: some View {
12. PageView(pages: ModelData().features.map { FeatureCard(landmark: $0) })
13. .aspectRatio(3 / 2, contentMode: .fit)
14. }
15. }




プレビューその 3





ステップ 5

PageViewController.swift 内で、コーディネータを UIPageViewControllerDelegate に準拠させ、 pageViewController(_:didFinishAnimating:
previousViewControllers:transitionCompleted complete:Bool) メソッドを追加します。




---




SwiftUI は、ページ切り替えアニメーションが完了するたびにこのメソッドを呼び出すため、現在のビューコントローラのインデックスを見つけて、拘束を更新できます。





    PageViewController.swift



23. [context.coordinator.controllers[currentPage]], direction: .forward, animated: true)
24. }
class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
26. var parent: PageViewController
27. var controllers = [UIViewController]()



---



58. return controllers[index + 1]
59. }
func pageViewController(
_ pageViewController: UIPageViewController,
didFinishAnimating finished: Bool,
previousViewControllers: [UIViewController],
transitionCompleted completed: Bool) {
if completed,
let visibleViewController = pageViewController.viewControllers?.first,
let index = controllers.firstIndex(of: visibleViewController) {
parent.currentPage = index
}
}
60. }
61. }




ステップ 6

データソースに加えて、UIPageViewController のデリゲートとしてコーディネータを割り当てます。




---




拘束 (binding) が両方向に接続されているので、テキストビューが更新され、スワイプするたびに正しいページ番号が表示されます。




    PageViewController.swift



15. navigationOrientation: .horizontal)
16. pageViewController.dataSource = context.coordinator
pageViewController.delegate = context.coordinator
18. return pageViewController




プログラム全体












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