SwiftUIでUIPageViewControllerとSegmentedControlを使う方法

2019/10/12開発

タグ SwiftUI ページ SegmentedControl PageView

SwiftUIでUIPageViewControllerとSegmentedControlを使う方法を紹介します。

Appleの公式チュートリアルを参考にしています。

UIKitのUIPageViewControllerをラップするPageViewControllerと、SwiftUIからPageViewControllerを使うためのPageViewを作ります。

まず、PageViewControllerです。

struct PageViewController: UIViewControllerRepresentable {
    var controllers: [UIViewController]
    @Binding var currentPage: Int

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIViewController(context: Context) -> UIPageViewController {
        let pageViewController = UIPageViewController(
            transitionStyle: .scroll,
            navigationOrientation: .horizontal)
        pageViewController.dataSource = context.coordinator
        pageViewController.delegate = context.coordinator

        return pageViewController
    }

    func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
        pageViewController.setViewControllers(
            [controllers[currentPage]], direction: .forward, animated: true)
    }

    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
        var parent: PageViewController

        init(_ pageViewController: PageViewController) {
            self.parent = pageViewController
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerBefore viewController: UIViewController) -> UIViewController?
        {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index == 0 {
                return nil
            }
            return parent.controllers[index - 1]
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerAfter viewController: UIViewController) -> UIViewController?
        {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index + 1 == parent.controllers.count {
                return nil
            }
            return parent.controllers[index + 1]
        }

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

UIViewControllerRepresentableのmakeUIViewController(context: Context)でUIPageViewControllerを作成します。 updateUIViewControllerでPageViewControllerのページを表示します。

UIPageViewControllerのDelegateとDataSourceを設定するために、Coordinatorクラスを作成し、makeUIViewControllerでdelgateとdataSourceをcontextのcoordinatorにセットします。

次にこのPageViewControllerを使って、SwiftUIのViewを表示するPageViewを作ります。

struct PageView<Page: View>: View {
    var viewControllers: [UIHostingController<Page>]
    @Binding var currentPage: Int

    init(_ views: [Page], currentPage: Binding<Int>) {
        self._currentPage = currentPage
        self.viewControllers = views.map { UIHostingController(rootView: $0) }
    }

    var body: some View {
        PageViewController(controllers: viewControllers, currentPage: $currentPage)
    }
}

こちらは簡単で、ページとして表示するViewと、currentPageを受け取って、PageViewControllerに渡します。

これをSegmentedControlと組み合わせて使います。

struct ContentView: View {
    @State private var page = 0

    var body: some View {
        VStack {
            Picker("Page", selection: $page) {
                Text("Page 1").tag(0)
                Text("Page 2").tag(1)
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding(EdgeInsets(top: 0, leading: 12, bottom: 0, trailing: 12))
            PageView([
                Text("Page1"),
                Text("Page2")
            ], currentPage: $page)
        }
    }
}

PageViewのcurrentPageは@Bindingプロパティなので、@StateプロパティをPageViewのcurrentPageにセットします。これによって、currentPageを書き換えると、ページが自動的に変更されます。

SwiftUIでSegmentedControlを使うにはPickerにSegmentedPickerStyleをセットします。こちらのselectionプロパティも@Bindingプロパティなので、PageViewのcurrentPageに渡したものと同じプロパティを渡します。

これでSegmentedControlとPageViewを組み合わせることができました。

PageView