Wie kann ich imitieren, das untere Blatt aus der Karten-app?

Update 4. Dezember 2018

Ich veröffentlicht eine Bibliothek basierend auf dieser Lösung https://github.com/applidium/ADOverlayContainer.

Imitiert es die Shortcuts app-overlay. Sehen dieser Artikel für details.

Den Hauptbestandteil der Bibliothek ist die OverlayContainerViewController. Es definiert einen Bereich, wo ein view-controller können Sie die Maus nach oben und unten, verbergen oder offenbaren sich dem Inhalt unter.

let contentController = MapsViewController()
let overlayController = SearchViewController()

let containerController = OverlayContainerViewController()
containerController.delegate = self
containerController.viewControllers = [
    contentController,
    overlayController
]

window?.rootViewController = containerController

Implementieren OverlayContainerViewControllerDelegate geben die Anzahl der Kerben wünschte:

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
    }
}

---

Vorherigen Antwort

Ich denke, es ist ein wichtiger Punkt, der nicht behandelt wird in den vorgeschlagenen Lösungen : der übergang zwischen Schnecke und der übersetzung.

In Karten, wie Sie vielleicht bemerkt haben, wenn der tableView erreicht contentOffset.y == 0, das untere Blatt entweder gleitet nach oben oder nach unten geht.

Der Punkt ist schwierig, weil wir können nicht einfach aktivieren/deaktivieren Sie den Bildlauf, wenn Sie unsere pan-Geste beginnt die übersetzung. Es würde aufhören, und das scrollen, bis eine neue Note beginnt. Dies ist der Fall in die meisten der vorgeschlagenen Lösungen hier.

Hier ist mein Versuch der Umsetzung dieser motion.

Ausgangspunkt : Karten-App

Beginnen unsere Untersuchung, wir visualisieren die view-Hierarchie der Karten (Maps starten auf einem simulator und wählen Sie Debug > Attach to process by PID or Name > Maps in Xcode 9).

Es nicht sagen, wie die Bewegung funktioniert, aber es hat mir geholfen, zu verstehen, die Logik. Sie können spielen, mit den lldb und die view-Hierarchie debugger.

Unser ViewController-stacks

Erstellen wir eine einfache version der Maps-ViewController-Architektur.

Beginnen wir mit einer BackgroundViewController (unsere Karte ansehen) :

class BackgroundViewController: UIViewController {
    override func loadView() {
        view = MKMapView()
    }
}

Legen wir den tableView in einem engagierten UIViewController :

class OverlayViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    lazy var tableView = UITableView()

    override func loadView() {
        view = tableView
        tableView.dataSource = self
        tableView.delegate = self
    }

    [...]
}

Nun, wir brauchen einen VC, der embed-overlay und verwalten Sie Ihre übersetzung.
Zur Vereinfachung des Problems betrachten wir übersetzen können, dass es das overlay von einem statischen Punkt OverlayPosition.maximum zu einem anderen OverlayPosition.minimum.

Für jetzt es besitzt nur eine öffentliche Methode zum animieren Sie die position ändern, und es hat eine transparente Sicht :

enum OverlayPosition {
    case maximum, minimum
}

class OverlayContainerViewController: UIViewController {

    let overlayViewController: OverlayViewController
    var translatedViewHeightContraint = ...

    override func loadView() {
        view = UIView()
    }

    func moveOverlay(to position: OverlayPosition) {
        [...]
    }
}

Schließlich brauchen wir noch einen ViewController zum einbetten der alle :

class StackViewController: UIViewController {

    private var viewControllers: [UIViewController]

    override func viewDidLoad() {
        super.viewDidLoad()
        viewControllers.forEach { gz_addChild($0, in: view) }
    }
}

In unserem AppDelegate, unsere startup-Sequenz sieht wie folgt aus :

let overlay = OverlayViewController()
let containerViewController = OverlayContainerViewController(overlayViewController: overlay)
let backgroundViewController = BackgroundViewController()
window?.rootViewController = StackViewController(viewControllers: [backgroundViewController, containerViewController])

Die Schwierigkeit hinter dem overlay-übersetzung

Nun, zu übersetzen, wie unser overlay ?

Meisten der vorgeschlagenen Lösungen eine dedizierte pan gesture recognizer, aber wir haben eigentlich schon eine haben : die schwenken-Geste der Tabelle anzeigen.
Darüber hinaus halten wir die schriftrolle und die übersetzung synchronisiert, und die UIScrollViewDelegate alle Veranstaltungen die wir brauchen !

Eine naive Implementierung würde eine zweite pan-Geste, und versuchen Sie zum zurücksetzen der contentOffset von der Tabellenansicht, wenn die übersetzung erfolgt :

func panGestureAction(_ recognizer: UIPanGestureRecognizer) {
    if isTranslating {
        tableView.contentOffset = .zero
    }
}

Aber es funktioniert nicht. Der tableView aktualisiert seine contentOffset wenn eine eigene pan gesture recognizer Aktion auslöst oder wenn die displayLink-callback aufgerufen wird. Es ist kein Zufall, dass sich unsere recognizer-Trigger, rechts, nachdem diese erfolgreich zu überschreiben, die contentOffset.
Unsere einzige chance ist, entweder einen Teil der layout-phase (durch überschreiben layoutSubviews des scroll-Ansicht ruft bei jedem frame von der scroll-view) oder zu reagieren, um die didScroll - Methode des Delegaten jedes mal aufgerufen, wenn die contentOffset geändert wird. Lassen Sie uns versuchen, diese ein.

Die übersetzung der Umsetzung

Fügen wir eine Stellvertretung für unsere OverlayVC Versendung der scrollview die Veranstaltungen zu unserem translation-handler, die 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)
    }
}

In unserem container, verfolgen wir die übersetzung mit einem enum :

enum OverlayInFlightPosition {
    case minimum
    case maximum
    case progressing
}

Die aktuelle position Berechnung sieht wie folgt aus :

private var overlayInFlightPosition: OverlayInFlightPosition {
    let height = translatedViewHeightContraint.constant
    if height == maximumHeight {
        return .maximum
    } else if height == minimumHeight {
        return .minimum
    } else {
        return .progressing
    }
}

Müssen wir 3 Methoden zur Verarbeitung der übersetzung :

Die erste sagt uns, wenn wir brauchen, um starten Sie die übersetzung.

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
    }
}

Den zweiten führt man die übersetzung. Es verwendet die translation(in:) Methode der scrollView pan-Geste.

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)
    )
}

Die Dritte animiert, das Ende der übersetzung, wenn der Benutzer gibt seine finger. Wir berechnen die position mit der Geschwindigkeit & die aktuelle position der Ansicht.

private func animateTranslationEnd() {
    let position: OverlayPosition =  //... calculation based on the current overlay position & velocity
    moveOverlay(to: position)
}

Unser overlay ist delegieren die Umsetzung einfach aussieht :

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()
    }
}

Letzte problem : der Versand der overlay container berührt

Die übersetzung ist ziemlich effizient. Aber es gibt noch ein letztes problem : die Details werden nicht geliefert, unser hintergrund anzeigen. Sie sind alle abgefangen durch den overlay-container angeben.
Wir können nicht gesetzt isUserInteractionEnabled zu false weil es auch deaktivieren Sie die Interaktion in unserer Tabelle anzeigen. Die Lösung ist die, die man verwendet, sich Massiv in die Karten-app, 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
    }
}

Entfernt es sich von der responder-Kette.

In OverlayContainerViewController :

override func loadView() {
    view = PassThroughView()
}

Ergebnis

Hier ist das Ergebnis :

Finden Sie den code hier.

Bitte, wenn Sie irgendwelche bugs, lass es mich wissen ! Beachten Sie, dass Ihre Implementierung kann natürlich auch ein zweite Pfanne Geste, speziell wenn Sie einen header hinzufügen, die in Ihrer überlagerung.

Update 23/08/18

Können wir ersetzen scrollViewDidEndDragging mit
willEndScrollingWithVelocity eher als enable/disable den Blättern, wenn der Benutzer endet ziehen :

func scrollView(_ scrollView: UIScrollView,
                willEndScrollingWithVelocity velocity: CGPoint,
                targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    switch overlayInFlightPosition {
    case .maximum:
        break
    case .minimum, .progressing:
        targetContentOffset.pointee = .zero
    }
    animateTranslationEnd(following: scrollView)
}

Können wir eine spring-animation und Benutzerinteraktion zulassen während der Animation zu machen, die motion flow besser :

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)
}

InformationsquelleAutor GaétanZ

Können Sie versuchen, meine Antwort https://github.com/SCENEE/FloatingPanel. Es bietet eine container-view-controller die Anzeige "untere Blatt" - Schnittstelle.

Es ist einfach zu verwenden und Sie nicht dagegen, jede gestik-Erkennung Handhabung! Auch Sie können verfolgen, ein scroll-Ansicht(oder die Geschwister-Ansicht) in einer unteren Platte, wenn nötig.

Dies ist ein einfaches Beispiel. Bitte beachten Sie, dass Sie sich eine view-controller, um Ihre Inhalte anzuzeigen, die in einem unteren Blatt.

import UIKit
import FloatingPanel

class ViewController: UIViewController {
    var fpc: FloatingPanelController!

    override func viewDidLoad() {
        super.viewDidLoad()

        fpc = FloatingPanelController()

        //Add "bottom sheet" in self.view.
        fpc.add(toParent: self)

        //Add a view controller to display your contents in "bottom sheet".
        let contentVC = ContentViewController()
        fpc.set(contentViewController: contentVC)

        //Track a scroll view in "bottom sheet" content if needed.
        fpc.track(scrollView: contentVC.tableView)    
    }
    ...
}

Hier ist ein weiteres Beispiel-code für die Anzeige einer unteren Platte zur Suche nach einem Ort wie Apple Maps.

InformationsquelleAutor SCENEE

Vielleicht können Sie versuchen, meine Antwort https://github.com/AnYuan/AYPannel, inspiriert von der Riemenscheibe. Reibungslosen übergang von bewegen der Schublade ein Bildlauf in der Liste. Ich habe eine pan-Geste auf dem container scroll-view, und legen Sie shouldRecognizeSimultaneouslyWithgesturerecognizer zurück JA. Mehr Details in meinem github-link oben. Wunsch, Ihr zu helfen.

InformationsquelleAutor day