프레임워크 통합 - UIKit과의 인터페이스
단계에 따라 이 프로젝트를 빌드하거나 완성된 프로젝트를 다운로드하여 직접 탐색하세요.
예상 시간 : 25분
Xcode version : 13.1 이상
섹션 1
UIPageViewController를 나타내는 뷰 만들기
SwiftUI에서 UIKit 보기 및 보기 컨트롤러를 나타내려면 UIViewRepresentable 및 UIViewControllerRepresentable 프로토콜을 준수하는 유형을 만듭니다. 사용자 정의 유형은 해당 유형이 나타내는 UIKit 유형을 생성 및 구성하는 반면, SwiftUI는 수명 주기를 관리하고 필요할 때 업데이트합니다.
1 단계
프로젝트의 Views 폴더에 PageView 그룹을 만들고 PageViewController.swift라는 새 Swift 파일을 추가합니다 . PageViewController 유형을 UIViewControllerRepresentable을 준수하는 것으로 선언하십시오.
Page페이지 보기 컨트롤러는 의 유형이어야 하는 인스턴스 배열을 저장합니다 View. 랜드마크 사이를 스크롤하는 데 사용하는 페이지입니다.
다음으로 UIViewControllerRepresentable 프로토콜에 대한 두 가지 요구 사항을 추가합니다.
2 단계
원하는 구성으로 UIPageViewController를 생성하는 makeUIViewController(context:) 메서드를 추가 합니다.
SwiftUI는 뷰를 표시할 준비가 되면 이 메서드를 한 번 호출한 다음 뷰 컨트롤러의 수명 주기를 관리합니다.
3단계
표시를 위해 뷰 컨트롤러를 제공하기 위해 .setViewControllers(_:direction:animated:)를 호출 하는 updateUIViewController(_:context:) 메서드를 추가합니다.
지금 은 모든 업데이트에서 SwiftUI 보기를 호스팅하는 UIHostingControllerpage을 생성합니다. 나중에 페이지 보기 컨트롤러의 수명 동안 컨트롤러를 한 번만 초기화하여 이를 보다 효율적으로 만들 것입니다.
계속하기 전에 페이지로 사용할 기능 카드를 준비하세요.
4단계
다운로드한 프로젝트 파일의 리소스 디렉토리에 있는 이미지를 앱의 자산 카탈로그로 드래그하십시오.
랜드마크의 특징 이미지가 있는 경우 일반 이미지와 크기가 다릅니다.
특징 이미지가 있는 경우 이를 반환하는 Landmark 구조에 계산된 속성을 추가합니다.
5단계
특징 이미지가 있는 경우 이를 반환하는 Landmark 구조에 계산된 속성을 추가합니다.
랜드마크의 특징 이미지를 표시하는 FeatureCard.swift라는 새 SwiftUI 보기 파일을 추가합니다.
6단계
랜드마크의 특징 이미지를 표시하는FeatureCard.swift라는 새 이름의 SwiftUI 보기 파일을 추가합니다 .
7단계
이미지의 랜드마크에 대한 텍스트 정보를 오버레이합니다.
다음으로 UIViewControllerRepresentable 뷰를 만들어 보기를 표시 합니다.
8단계
PageView.swift 이라는 새 SwiftUI 보기 파일을 만들고 PageView 유형을 업데이트하여 PageViewController를 자식 보기 로 선언 합니다.
Xcode가 Page의 대한 유형을 유추할 수 없기 때문에 미리보기가 실패합니다.
9단계
필요한 뷰 배열을 전달하도록 미리보기 공급자를 업데이트하면 미리보기가 작동하기 시작합니다.
섹션 2
View Controller의 데이터 소스 생성
몇 가지 짧은 단계에서 많은 작업을 수행했습니다. PageViewController는 UIPageViewController를 사용 하여 SwiftUI 보기에서 콘텐츠를 표시합니다. 이제 스와이프 상호작용을 활성화하여 페이지에서 페이지로 이동할 차례입니다.
UIKit 뷰 컨트롤러를 나타내는 SwiftUI 뷰는 표현 가능한 Coordinator뷰 컨텍스트의 일부로 SwiftUI가 관리하고 제공하는 유형을 정의할 수 있습니다.
1 단계
PageViewController내부에 중첩된 Coordinator 클래스를 선언하십시오 .
SwiftUI는 UIViewControllerRepresentable 유형의 코디네이터를 관리하고 위에서 생성한 메소드를 호출할 때 컨텍스트의 일부로 제공합니다.
2 단계
PageViewController에 다른 메소드를 추가하여 코디네이터를 만듭니다.
SwiftUI는 makeUIViewController(context:) 전에 이 makeCoordinator() 메서드를 호출하므로 뷰 컨트롤러를 구성할 때 코디네이터 객체에 액세스할 수 있습니다.
팁
이 코디네이터를 사용하여 대리자, 데이터 소스 및 target-action을 통한 사용자 이벤트 응답과 같은 일반적인 Cocoa 패턴을 구현할 수 있습니다.
3단계
보기의 페이지 배열을 사용하여 조정자에서 컨트롤러 배열을 초기화합니다.뷰의 페이지 배열을 사용하여 코디네이터에서 컨트롤러 배열을 초기화합니다 .
코디네이터는 이러한 컨트롤러를 저장하기에 좋은 장소입니다. 시스템은 컨트롤러를 한 번만 초기화하고 뷰 컨트롤러를 업데이트하기 전에 컨트롤러를 초기화하기 때문입니다.
4단계
Coordinator 유형에 UIPageViewControllerDataSource 적합성을 추가 하고 두 가지 필수 메소드를 구현하십시오.
이 두 가지 방법은 보기 컨트롤러 사이의 관계를 설정하므로 앞뒤로 스와이프할 수 있습니다.
5단계
UIPageViewController의 데이터 소스로 코디네이터를 추가합니다 .
6단계
PageView로 돌아가서 실시간 미리 보기를 켜고 살짝 밀기 상호 작용을 테스트합니다.
섹션 3
SwiftUI 뷰의 상태에서 페이지 추적.
사용자 정의 UIPageControl 추가를 준비하려면 PageView 내부에서 현재 페이지를 추적하는 방법이 필요합니다.
이렇게 하려면 PageView에서@State 속성을 선언하고 이 속성에 대한 바인딩을 . PageViewController 뷰로 전달합니다. PageViewController는 보이는 페이지와 일치하도록 바인딩을 업데이트합니다.
1 단계
CurrentPage 바인딩을 PageViewController의 속성으로 추가하여 시작합니다.
@Binding 속성 을 선언하는 것 외에도 setViewControllers(_:direction:animated:)에 대한 호출을 업데이트 하여 currentPage 바인딩 값을 전달합니다.
2 단계
중요한
$구문을 사용하여 상태로 저장된 값에 대한 바인딩을 만드는 것을 기억하십시오 .
3단계
초기 값을 변경하여 값이 PageViewController에 대한 바인딩을 통해 흐르는지 테스트합니다 .
실험
페이지 보기 컨트롤러가 두 번째 보기로 이동하도록 하는 버튼을 PageView에 추가합니다 .
4단계
@State 속성 값을 주시할 수 있도록 currentPage 속성을 사용하여 텍스트 보기를 추가합니다.
페이지에서 페이지로 스와이프할 때 값이 변경되지 않는지 확인합니다.
5단계
PageViewController.swift 에서 코디네이터를 UIPageViewControllerDelegate에 맞추고 pageViewController(_:didFinishAnimating:previousViewControllers:transitionCompleted completed: Bool) 메서드를 추가합니다
SwiftUI는 페이지 전환 애니메이션이 완료될 때마다 이 메서드를 호출하기 때문에 현재 뷰 컨트롤러의 인덱스를 찾고 바인딩을 업데이트할 수 있습니다.
6단계
데이터 소스 외에 UIPageViewController에 대한 코디네이터를 의 대리자로 지정합니다 .
양방향으로 연결된 바인딩을 사용하면 각 스와이프 후 올바른 페이지 번호를 표시하도록 텍스트 보기가 업데이트됩니다.
섹션 4
사용자 정의 페이지 컨트롤 추가
SwiftUI UIViewRepresentable 보기로 래핑된 사용자 정의 UIPageControl을 보기에 추가할 준비가 되었습니다 .
1 단계
PageControl.swift 라는 새 SwiftUI 보기 파일을 만듭니다 . UIViewRepresentable 프로토콜을 준수하도록 PageControl 유형을 업데이트하십시오 .
UIViewRepresentable 및 UIViewControllerRepresentable 유형은 기본 UIKit 유형에 해당하는 메소드와 함께 동일한 수명 주기를 갖습니다.
2 단계
텍스트 상자를 페이지 컨트롤로 교체하고 에서 VStackfor ZStack레이아웃으로 전환합니다.
페이지 수와 현재 페이지에 대한 바인딩을 전달하기 때문에 페이지 컨트롤이 이미 올바른 값을 표시하고 있습니다.
다음으로, 사용자가 한 쪽 또는 다른 쪽을 탭하여 페이지 간에 이동할 수 있도록 페이지 컨트롤을 대화형으로 만듭니다.
3단계
PageControl에 중첩 Coordinator유형을 만들고 새 코디네이터를 만들고 반환하는 makeCoordinator() 메서드를 추가합니다
UIPageControl과 같은 UIControl 서브클래스는 위임 대신 target-action 패턴을 사용하기 때문에 이 코디네이터는 @objc 메소드를 구현하여 현재 페이지 바인딩을 업데이트합니다.UIPageControl과 같은 UIControl 서브클래스는 위임 대신 target-action 패턴을 사용하기 때문에 현재 페이지 바인딩을 업데이트 하는 @objc 메소드를 구현합니다.
4단계
수행할 작업으로 updateCurrentPage(sender:) 메서드를 지정하여 코디네이터를 valueChanged 이벤트의 대상으로 추가합니다.수행할 작업으로 updateCurrentPage(sender:) 메서드를 지정하여 valueChanged 이벤트의 대상으로 코디네이터를 추가합니다.
5단계
마지막으로 CategoryHome에서 자리 표시자 기능 이미지를 새 페이지 보기로 바꿉니다.
6단계
이제 모든 다양한 상호 작용을 시도하십시오. PageView는 UIKit과 SwiftUI 보기 및 컨트롤러가 함께 작동하는 방법을 보여줍니다.
https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit