logo - Menüleiste für die Seitenleiste IOS 8 Swift



swift ubuntu (5)

Gibt es eine Möglichkeit, das Slide-Sidebar-Menü (Like Facebook App) in IOS Swift ohne Drittanbieter-Bibliothek zu implementieren? Ich suche nach Lösungen, aber ich habe dieses Feature nur in Objective-C implementiert.

https://ffff65535.com


Update : Bitte denken Sie daran, meine aktualisierte Antwort zu verwenden. Beim ScrollView / Container View-Ansatz gibt es viele Randfälle, die durch die Verwendung von Custom View Controller Transitions vermieden werden können.

Ich suchte überall nach einer schnellen Menülösung, die keine Bibliothek benötigte. Am Ende habe ich ein eigenes Tutorial erstellt, das dem Ansatz von Fengson ziemlich ähnlich ist:

Hier sind einige der wichtigsten Punkte:

  • Erstellen Sie eine scrollview die die Bewegung des Menüs zusammen mit der scrollview behandelt
  • scrollview Sie zwei container nebeneinander in der scrollview . Mit Containern können Sie Controller der obersten Ebene einbetten.
  • scrollview Sie in der scrollview paging enabled , deaktivieren Sie jedoch bounces . Dies zwingt den Slideout in einen offenen oder geschlossenen Zustand
  • UITableViewController einen UITableViewController in den linken Container ein
  • UITabBarController einen UITabBarController in den rechten Container ein
  • layer.shadowOpacity Sie im rechten container ein Laufzeitattribut layer.shadowOpacity von 0,8 hinzu. Dadurch erhalten Sie ein kostenloses Trennzeichen ohne Code.
  • Fügen Sie eine Menüschaltfläche hinzu. Sie können NSNotificationCenter , um mit der scrollview zu kommunizieren
  • Für die geheime Zutat: Verwenden Sie scrollView.setContentOffset.x , um das tatsächliche Öffnen und Schließen des Menüs zu übernehmen

Hier sehen Sie ein funktionierendes Beispielprojekt für eine Tab-Leisten-Anwendung mit einem linken Slideout-Menü, einschließlich Screenshots und Anweisungen.

https://github.com/ThornTechPublic/LeftSlideoutMenu

Neben einer allgemeineren Erklärung, wie es funktioniert:

http://www.thorntech.com/2015/06/want-to-implement-a-slideout-menu-in-your-swift-app-heres-how/


Hier ist ein kleines Beispiel, wie ich das mache, diese Schubladensteuerung hat uiviewcontroller für left, center und right. Dieses funktioniert wie die Slack-IPad-App, bei der die eine oder die andere Seite geöffnet ist.

/*
 To use simply instantiate SlidingDrawerController as your root view in your AppDelegate, or in the
 StoryBoard.
 Once SlidingDrawerController is instantiated, set the drawerSize of the SlidingDrawerController,
 and its leftViewControllerIdentifier, centerViewControllerIdentifier, and
 rightViewControllerIdentifier to the Storyboard Identifier of the UIViewController
 you want in the different locations.
 */

class SlidingDrawerController: UIViewController {
    var drawerSize:CGFloat = 4.0
    var leftViewControllerIdentifier:String = "leftViewController"
    var centerViewControllerIdentifier:String = "centerViewController"
    var rightViewControllerIdentifier:String = "rightViewController"

    enum Drawers {
        case left
        case right
    }

    private var _leftViewController:UIViewController?
    var leftViewController:UIViewController {
        get{
            if let vc = _leftViewController {
                return vc;
            }
            return UIViewController();
        }
    }
    private var _centerViewController:UIViewController?
    var centerViewController:UIViewController {
        get{
            if let vc = _centerViewController {
                return vc;
            }
            return UIViewController();
        }
    }
    private var _rightViewController:UIViewController?
    var rightViewController:UIViewController {
        get{
            if let vc = _rightViewController {
                return vc;
            }
            return UIViewController();
        }
    }

    static let SlidingDrawerOpenLeft = 1
    static let SlidingDrawerOpenRight = 2
    var openSide:SlidingDrawerController.Drawers {
        get{
            return _openSide;
        }
    }
    private var _openSide = SlidingDrawerController.Drawers.left

    override func viewDidLoad() {
        super.viewDidLoad()

        // Instantiate VC's with storyboard ID's
        self._leftViewController = self.instantiateViewControllers(storyboardID: self.leftViewControllerIdentifier)
        self._centerViewController = self.instantiateViewControllers(storyboardID: self.centerViewControllerIdentifier)
        self._rightViewController = self.instantiateViewControllers(storyboardID: self.rightViewControllerIdentifier)

        self.drawDrawers(size: UIScreen.main.bounds.size)

        self.view.addSubview(self.leftViewController.view)
        self.view.addSubview(self.centerViewController.view)
        self.view.addSubview(self.rightViewController.view)
    }

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        coordinator.animateAlongsideTransition(in: self.view, animation: { (UIViewControllerTransitionCoordinatorContext) -> Void in
            // This is for beginning of transition
            self.drawDrawers(size: size)
        }, completion: { (UIViewControllerTransitionCoordinatorContext) -> Void in
            // This is for after transition has completed.
        })

    }

    // MARK: - Drawing View

    func drawDrawers(size:CGSize) {
        // Calculate Center View's Size
        let centerWidth = (size.width/drawerSize) * (drawerSize - 1)
        // Left Drawer
        self.leftViewController.view.frame = CGRect(x: 0.0, y: 0.0, width: size.width/self.drawerSize, height: size.height)

        // Center Drawer
        self.centerViewController.view.frame = CGRect(x: self.leftViewController.view.frame.width, y: 0.0, width: centerWidth, height: size.height)

        // Right Drawer
        self.rightViewController.view.frame = CGRect(x: self.centerViewController.view.frame.origin.x + self.centerViewController.view.frame.size.width, y: 0.0, width: size.width/self.drawerSize, height: size.height)

        // Capture the Swipes
        let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(self.swipeRightAction(rec:)))
        swipeRight.direction = .right
        centerViewController.view.addGestureRecognizer(swipeRight)

        let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(self.swipeLeftAction(rec:)))
        swipeLeft.direction = .left
        centerViewController.view.addGestureRecognizer(swipeLeft)

        openDrawer(openSide)
    }

    // MARK: - Open Drawers
    func openDrawer(_ side:Drawers) {
        self._openSide = side
        var rect:CGRect
        switch side{
        case .left:
            rect = CGRect(
                x: 0.0,
                y: 0.0,
                width: self.view.bounds.width,
                height: self.view.bounds.height
            )
        case .right:
            rect = CGRect(
                x: self.view.bounds.origin.x - self.leftViewController.view.bounds.size.width,
                y: 0.0,
                width: self.view.bounds.width,
                height: self.view.bounds.height
            )
        }
        UIView.animate(withDuration: 0.1, delay: 0, options: UIViewAnimationOptions.curveEaseIn, animations:
            { () -> Void in
                // move views here
                self.view.frame = rect
        }, completion:
            { finished in
        })
    }

    // MARK: - Swipe Handling

    @objc func swipeRightAction(rec: UISwipeGestureRecognizer){
        self.openDrawer(.left)
    }

    @objc func swipeLeftAction(rec:UISwipeGestureRecognizer){
        self.openDrawer(.right)
    }

    // MARK: - Helpers

    func instantiateViewControllers(storyboardID: String) -> UIViewController {
        return UIStoryboard(name: "Main", bundle: nil)
                .instantiateViewController(withIdentifier: "\(storyboardID)")

    }
}

Quelle here .

Bild here .

Video here .


Ich denke, die Verwendung von Custom View Controller Transitions ist ein solider Ansatz für die Erstellung von Slideout-Menüs:

  • Sie können die Animation anpassen.
  • Der Übergang ist interaktiv, Sie können also vorwärts und rückwärts ziehen. Der Übergang wird immer beendet oder rollt zurück und bleibt niemals zwischen Zuständen hängen.
  • Sie verwenden Pan-Gesten und Screen Edge-Pan-Gesten, um die Interaktion zu steuern. Dies bedeutet, dass Sie sie strategisch platzieren können, um Konflikte mit horizontal gestikuliertem Inhalt zu minimieren.
  • Sie müssen nicht auf Container Views zurückgreifen. Dies bedeutet, dass Ihre App-Architektur flacher ist und Sie anstelle von NSNotifications einen Protokolldelegierten verwenden können.
  • Es ist jeweils nur ein ViewController aktiv. Momentaufnahmen werden verwendet, um die Illusion zu vermitteln, dass ein zweiter VC auf dem Bildschirm angezeigt wird.

Custom View Controller Transitions sind anfangs schwer zu erlernen (zumindest für mich). Ich schrieb einen Blogbeitrag über das Erstellen eines interaktiven Slideout-Menüs und habe mein Bestes gegeben, um es so verständlich wie möglich zu machen.

Sie können auch direkt in den Code von GitHub springen.

Auf sehr hohem Niveau funktioniert es so:

  1. Sie öffnen das Slideout-Menü als Modal.
  2. Sie erstellen benutzerdefinierte Animationen für die aktuellen und verwerfen Übergänge mithilfe des UIViewControllerAnimatedTransitioning Protokolls. Sie verwenden einen Schnappschuss, um den Hauptansicht-Controller während Animationen darzustellen.
  3. Sie erstellen Pan-Gesten-Erkenner, um den Modal interaktiv anzuzeigen oder zu schließen.
  4. Sie verbinden die Pan-Gesten-Ereignisse mit einem UIPercentDrivenInteractiveTransition Objekt, um den Übergang mit den Bewegungen des Benutzers synchron zu halten.
  5. Der präsentierende Controller übernimmt das UIViewControllerTransitioningDelegate Protokoll und verbindet alle benutzerdefinierten Animationen und interaktiven Übergänge.

Ich habe tatsächlich eine vorherige Antwort in diesem Thread, die eine Scrollview / Container-Ansicht verwendet. Dieser Ansatz ist für einen Prototyp in Ordnung, stößt jedoch auf viele Randfälle und Fehler, wenn Sie Ihre App-Produktion vorbereiten. Jede Woche auf Blog-Kommentare zu antworten und Randfälle zu korrigieren, hat mich dazu motiviert, einen zweiten Blogbeitrag zu diesem Thema zu schreiben.


Ich habe es auf zwei Arten implementiert.
Zuerst mit der Scroll View und dann mit der Container Views .

Sie können TableViewController als Menü in einem Container und einen TabBarController mit ausgeblendeten Registerkarten in einem zweiten Container verwenden. Durch Drücken einer Cell in einer Tabellenansicht gelangen Sie zu einer n-ten Registerkarte in der Tab-Leiste.

Alles, was Sie tun müssen, ist, den oberen Container direkt beim Klicken der Schaltfläche oder einer Geste zu animieren. Es kann dann so aussehen:

Das Beste daran ist, dass Sie auf einfache Weise coole Effekte hinzufügen können, z. B. die Animation von UIView mithilfe der Federdämpfung, indem Sie integrierte Methoden verwenden, um einen realistischen Bouncy-Effekt zu erzielen. Sie können Ihrer Hauptansicht auch Schatten hinzufügen (nicht im Bild hinzugefügt), damit sie wie eine Seite über dem Menü erscheint.


Ich glaube, Sie können mit UISplitViewController beginnen, das in iOS8 drastisch aktualisiert wurde. Sehen Sie sich Sitzungen an, um Details zu Controller-Verbesserungen in iOS8 und Erstellen adaptiver Apps mit UIKit zu erhalten. Sie bieten Codebeispiel aus der zweiten Sitzung (aber nicht die erste: /). An diesem Punkt ist es für mich natürlich, diese Art von Benutzeroberfläche auf der Grundlage des Split-View-Controllers in iOS8 zu erstellen.

Update: Es sieht so aus, als ob noch nicht alle APIs, über die sie sprechen, gelandet sind. In der aktuellen Beta4, die im Video erwähnt wird, wird beispielsweiseBarsOnSwipe nicht dargestellt.





ios8