아래 답변에 따라 도서관을 출시했습니다 .
바로 가기 응용 프로그램 오버레이를 모방합니다. 자세한 내용은 이 기사 를 참조하십시오.
라이브러리의 주요 구성 요소는 OverlayContainerViewController입니다. 뷰 컨트롤러를 위아래로 드래그하여 그 아래의 내용을 숨기거나 표시 할 수있는 영역을 정의합니다.
let contentController = MapsViewController()
let overlayController = SearchViewController()
let containerController = OverlayContainerViewController()
containerController.delegate = self
containerController.viewControllers = [
contentController,
overlayController
]
window?.rootViewController = containerController
OverlayContainerViewControllerDelegate원하는 노치 수를 지정하도록 구현 하십시오.
enum OverlayNotch: Int, CaseIterable {
case minimum, medium, maximum
}
func numberOfNotches(in containerViewController: OverlayContainerViewController) -> Int {
return OverlayNotch.allCases.count
}
func overlayContainerViewController(_ containerViewController: OverlayContainerViewController,
heightForNotchAt index: Int,
availableSpace: CGFloat) -> CGFloat {
switch OverlayNotch.allCases[index] {
case .maximum:
return availableSpace * 3 / 4
case .medium:
return availableSpace / 2
case .minimum:
return availableSpace * 1 / 4
}
}
이전 답변
제안 된 솔루션에서 다루지 않는 중요한 점이 있다고 생각합니다. 스크롤과 번역 사이의 전환.
지도에서 알 수 있듯이 tableView에 도달 contentOffset.y == 0하면 맨 아래 시트가 위로 미끄러지거나 내려갑니다.
팬 제스처가 번역을 시작할 때 단순히 스크롤을 활성화 / 비활성화 할 수 없기 때문에 요점은 까다 롭습니다. 새로운 터치가 시작될 때까지 스크롤을 멈출 것입니다. 여기에 제안 된 대부분의 솔루션이 여기에 해당합니다.
이 모션을 구현하려는 시도는 다음과 같습니다.
출발지 :지도 앱
조사를 시작하려면,하자가지도의 뷰 계층 구조를 시각화 (시뮬레이터에지도를 시작하고 선택 Debug> Attach to process by PID or Name> Maps엑스 코드 9).
모션이 어떻게 작동하는지 알려주지는 않지만 모션의 논리를 이해하는 데 도움이되었습니다. lldb 및 뷰 계층 디버거를 사용할 수 있습니다.
뷰 컨트롤러 스택
Maps ViewController 아키텍처의 기본 버전을 만들어 봅시다.
우리는 BackgroundViewController(지도보기)로 시작합니다.
class BackgroundViewController: UIViewController {
override func loadView() {
view = MKMapView()
}
}
tableView를 전용으로 넣습니다 UIViewController.
class OverlayViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
lazy var tableView = UITableView()
override func loadView() {
view = tableView
tableView.dataSource = self
tableView.delegate = self
}
[...]
}
이제 오버레이를 포함하고 번역을 관리하려면 VC가 필요합니다. 문제를 단순화하기 위해 오버레이를 한 정적 지점 OverlayPosition.maximum에서 다른 정적 지점 으로 변환 할 수 있다고 생각합니다.OverlayPosition.minimum .
현재 위치 변경에 애니메이션을 적용하는 공개 방법은 하나 뿐이며 투명하게 볼 수 있습니다.
enum OverlayPosition {
case maximum, minimum
}
class OverlayContainerViewController: UIViewController {
let overlayViewController: OverlayViewController
var translatedViewHeightContraint = ...
override func loadView() {
view = UIView()
}
func moveOverlay(to position: OverlayPosition) {
[...]
}
}
마지막으로 모든 것을 포함하기 위해 ViewController가 필요합니다.
class StackViewController: UIViewController {
private var viewControllers: [UIViewController]
override func viewDidLoad() {
super.viewDidLoad()
viewControllers.forEach { gz_addChild($0, in: view) }
}
}
AppDelegate에서 시작 순서는 다음과 같습니다.
let overlay = OverlayViewController()
let containerViewController = OverlayContainerViewController(overlayViewController: overlay)
let backgroundViewController = BackgroundViewController()
window?.rootViewController = StackViewController(viewControllers: [backgroundViewController, containerViewController])
오버레이 번역의 어려움
이제 오버레이를 번역하는 방법은 무엇입니까?
제안 된 솔루션의 대부분은 전용 팬 제스처 인식기를 사용하지만 실제로 테이블 뷰의 팬 제스처가 이미 있습니다. 또한 스크롤과 번역을 동기화하고UIScrollViewDelegate 필요한 모든 이벤트를 유지해야합니다!
순진한 구현은 두 번째 팬 제스처를 사용 contentOffset하고 변환이 발생할 때 테이블 뷰의 재설정을 시도 합니다.
func panGestureAction(_ recognizer: UIPanGestureRecognizer) {
if isTranslating {
tableView.contentOffset = .zero
}
}
그러나 작동하지 않습니다. tableView contentOffset는 자체 팬 제스처 인식기 동작이 트리거되거나 displayLink 콜백이 호출 될 때 해당 테이블을 업데이트합니다 . 바로 그 후 우리의 인식 트리거가 성공적를 오버라이드 (override) 할 수 있다는 기회가 없습니다 contentOffset. 우리의 유일한 기회는 레이아웃 단계에 참여하거나 ( layoutSubviews스크롤보기의 각 프레임에서 스크롤보기 호출을 재정 의 함) 또는 수정 didScroll될 때마다 호출되는 대리자 의 메서드에 응답하는 것입니다 contentOffset. 이것을 시도해 봅시다.
번역 구현
OverlayVC스크롤 뷰의 이벤트를 번역 핸들러 인 디스패치 핸들러에 전달 하기 위해 델리게이트를 추가 합니다 OverlayContainerViewController.
protocol OverlayViewControllerDelegate: class {
func scrollViewDidScroll(_ scrollView: UIScrollView)
func scrollViewDidStopScrolling(_ scrollView: UIScrollView)
}
class OverlayViewController: UIViewController {
[...]
func scrollViewDidScroll(_ scrollView: UIScrollView) {
delegate?.scrollViewDidScroll(scrollView)
}
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
delegate?.scrollViewDidStopScrolling(scrollView)
}
}
컨테이너에서 열거 형을 사용하여 번역을 추적합니다.
enum OverlayInFlightPosition {
case minimum
case maximum
case progressing
}
현재 위치 계산은 다음과 같습니다.
private var overlayInFlightPosition: OverlayInFlightPosition {
let height = translatedViewHeightContraint.constant
if height == maximumHeight {
return .maximum
} else if height == minimumHeight {
return .minimum
} else {
return .progressing
}
}
번역을 처리하려면 3 가지 방법이 필요합니다.
첫 번째는 번역을 시작해야하는지 알려줍니다.
private func shouldTranslateView(following scrollView: UIScrollView) -> Bool {
guard scrollView.isTracking else { return false }
let offset = scrollView.contentOffset.y
switch overlayInFlightPosition {
case .maximum:
return offset < 0
case .minimum:
return offset > 0
case .progressing:
return true
}
}
두 번째는 번역을 수행합니다. translation(in:)scrollView의 팬 제스처 방법을 사용합니다 .
private func translateView(following scrollView: UIScrollView) {
scrollView.contentOffset = .zero
let translation = translatedViewTargetHeight - scrollView.panGestureRecognizer.translation(in: view).y
translatedViewHeightContraint.constant = max(
Constant.minimumHeight,
min(translation, Constant.maximumHeight)
)
}
세 번째는 사용자가 손가락을 떼면 번역의 끝을 애니메이션으로 만듭니다. 뷰의 속도와 현재 위치를 사용하여 위치를 계산합니다.
private func animateTranslationEnd() {
let position: OverlayPosition = // ... calculation based on the current overlay position & velocity
moveOverlay(to: position)
}
오버레이의 델리게이트 구현은 다음과 같습니다.
class OverlayContainerViewController: UIViewController {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard shouldTranslateView(following: scrollView) else { return }
translateView(following: scrollView)
}
func scrollViewDidStopScrolling(_ scrollView: UIScrollView) {
// prevent scroll animation when the translation animation ends
scrollView.isEnabled = false
scrollView.isEnabled = true
animateTranslationEnd()
}
}
최종 문제 : 오버레이 컨테이너의 터치 디스패치
번역은 이제 매우 효율적입니다. 그러나 여전히 마지막 문제가 있습니다. 터치가 백그라운드 뷰에 전달되지 않습니다. 그것들은 모두 오버레이 컨테이너의 뷰에 의해 가로 챈다. 테이블 뷰에서 상호 작용을 비활성화 isUserInteractionEnabled하기 false때문에 설정할 수 없습니다 . 이 솔루션은지도 앱에서 대량으로 사용되는 솔루션입니다 PassThroughView.
class PassThroughView: UIView {
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
let view = super.hitTest(point, with: event)
if view == self {
return nil
}
return view
}
}
응답자 체인에서 자신을 제거합니다.
에서 OverlayContainerViewController:
override func loadView() {
view = PassThroughView()
}
결과
결과는 다음과 같습니다.
코드는 여기에서 찾을 수 있습니다 .
버그가 있으면 알려주십시오! 물론 오버레이에 헤더를 추가하는 경우 구현시 두 번째 팬 제스처를 사용할 수 있습니다.
23/08/18 업데이트
우리는 대체 할 수 scrollViewDidEndDragging와 함께
willEndScrollingWithVelocity보다는 enabling/ disabling스크롤 사용자의 끝을 드래그 할 때 :
func scrollView(_ scrollView: UIScrollView,
willEndScrollingWithVelocity velocity: CGPoint,
targetContentOffset: UnsafeMutablePointer<CGPoint>) {
switch overlayInFlightPosition {
case .maximum:
break
case .minimum, .progressing:
targetContentOffset.pointee = .zero
}
animateTranslationEnd(following: scrollView)
}
스프링 애니메이션을 사용하고 모션 흐름을 개선하기 위해 애니메이션을 적용하면서 사용자 상호 작용을 허용 할 수 있습니다.
func moveOverlay(to position: OverlayPosition,
duration: TimeInterval,
velocity: CGPoint) {
overlayPosition = position
translatedViewHeightContraint.constant = translatedViewTargetHeight
UIView.animate(
withDuration: duration,
delay: 0,
usingSpringWithDamping: velocity.y == 0 ? 1 : 0.6,
initialSpringVelocity: abs(velocity.y),
options: [.allowUserInteraction],
animations: {
self.view.layoutIfNeeded()
}, completion: nil)
}
