以下の回答に基づいてライブラリをリリースしました。
これは、ショートカットアプリケーションオーバーレイを模倣しています。詳細については、この記事を参照してください。
ライブラリの主なコンポーネントは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> MapsXcodeの9）。
モーションの仕組みはわかりませんが、そのロジックを理解するのに役立ちました。lldbとビュー階層デバッガーで遊ぶことができます。
View Controllerスタック
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。
現時点では、位置の変化をアニメーション化するパブリックメソッドが1つだけあり、透過的なビューがあります。
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すべてのイベントがあります。
単純な実装では、2番目のパンジェスチャーを使用しcontentOffset、変換が発生したときにテーブルビューのをリセットしようとします。
func panGestureAction(_ recognizer: UIPanGestureRecognizer) {
if isTranslating {
tableView.contentOffset = .zero
}
}
しかし、それは機能しません。tableViewはcontentOffset、独自のパンジェスチャーレコグナイザーアクションがトリガーされたとき、またはそのdisplayLinkコールバックが呼び出されたときに更新します。それらの直後に認識エンジンがトリガーして、をオーバーライドする可能性はありませんcontentOffset。唯一のチャンスは、レイアウト段階（layoutSubviewsスクロールビューの各フレームでスクロールビューの呼び出しをオーバーライドする）に参加するかdidScroll、contentOffsetが変更されるたびに呼び出されるデリゲートのメソッドに応答することです。これを試してみましょう。
翻訳の実装
にデリゲートを追加してOverlayVC、scrollviewのイベントを翻訳ハンドラである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
}
}
2つ目は変換を実行します。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)
)
}
3つ目は、ユーザーが指を離したときに、翻訳の終了をアニメーション化します。ビューの速度と現在の位置を使用して位置を計算します。
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()
}
結果
結果は次のとおりです。
ここでコードを見つけることができます。
バグを見つけたらお知らせください。もちろん、特にオーバーレイにヘッダーを追加する場合は、実装で2番目のパンジェスチャーを使用できます。
更新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)
}
