Was ist der beste Weg, um ein Sideswipe-Menü wie das in der neuen iOS-App von Facebook zu entwickeln?

Es scheint, dass Side-Swipe-Menüs ein häufigeres Element der Benutzeroberfläche werden, da in jeder iPhone-App mehr Informationen gespeichert werden. Facebook hat es in seine neueste Version aufgenommen und die neue Google Mail-App scheint es ebenfalls aufzunehmen . Ich habe mich gefragt, ob jemand darüber nachgedacht hat, wie so etwas am effizientesten entwickelt werden kann, da es zu einem häufigeren Schnittstellenelement wird. Während ich meine eigenen Gedanken darüber habe, wie ich das bauen soll, bin ich neugierig zu hören, was andere Leute denken.

Ich bin kürzlich darauf gestoßen, habe mir den Code nicht angesehen oder das Steuerelement getestet, aber es sieht so aus, als wäre es ein sehr anständiger Ausgangspunkt.

jtrevealsidebar

Edit: Der Leser sollte sich auch die anderen Antworten ansehen :)

Dafür gibt es eine großartige Bibliothek von Tom Adriaenssen: Inferis / ViewDeck

Es ist sehr einfach zu bedienen und hat eine ziemlich große Fangemeinde.

BEARBEITEN:

Weitere Informationen zu etwas Leichterem finden Sie unter: Mutualmobile / MMDrawerController

Es verfügt nicht über alle Funktionen von ViewDeck, ist jedoch einfacher zu ändern und zu erweitern.

Ich habe dafür eine Bibliothek erstellt. Es heißt MFSideMenu .

Es unterstützt unter anderem iPhone + iPad, Hoch- und Querformat, Menü auf der linken oder rechten Seite, UITabBarController und Schwenkgesten.

Schauen Sie sich MMDrawerController an:

MMDrawerController

Wir konnten keine Bibliothek finden, die uns gefiel, also haben wir einfach unsere eigene gerollt.

Die Schlüsselidee, dass Sie den Rahmen oder die Mitte von self.navigationController.view festlegen müssen . Es gibt zwei Ereignisse , die Sie behandeln müssen. (1) barButtonItem drücken . (2) pan Geste aufgrund wischen.

Sie können den View Controller wie folgt in den Hintergrund senden:

[self.view sendSubviewToBack:menuViewController.view];

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(buttonPressed:)];
    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
    [self.navigationController.view addGestureRecognizer:panGestureRecognizer];
    self.navigationItem.leftBarButtonItem = barButtonItem;
}

- (void)buttonPressed:(id)sender {

    CGRect destination = self.navigationController.view.frame;

    if (destination.origin.x > 0) {
        destination.origin.x = 0;
    } else {
        destination.origin.x = 320;
    }

    [UIView animateWithDuration:0.25 animations:^{
        self.navigationController.view.frame = destination;
    }];
}

- (void)handlePan:(UIPanGestureRecognizer *)recognizer
{
    static CGPoint originalCenter;

    if (recognizer.state == UIGestureRecognizerStateBegan)
    {
        originalCenter = recognizer.view.center;

    } else if (recognizer.state == UIGestureRecognizerStateChanged)
    {
        CGPoint translation = [recognizer translationInView:self.view];

        recognizer.view.center = CGPointMake(originalCenter.x + translation.x, originalCenter.y);
    }
    else if (recognizer.state == UIGestureRecognizerStateEnded || recognizer.state == UIGestureRecognizerStateCancelled || recognizer.state == UIGestureRecognizerStateFailed)
    {
        if (recognizer.view.frame.origin.x < 160) {
            [UIView animateWithDuration:0.25 animations:^{
                recognizer.view.center = CGPointMake(384, 487.5);
            }];
        } else {
            [UIView animateWithDuration:0.25 animations:^{
                recognizer.view.center = CGPointMake(384 + 320, 487.5);
            }];
        }
    }
}

Noch besser ist JASidePanels . Einfach zu implementieren und funktioniert sowohl für iPhone als auch für iPad.

Github-Link: JASidePanels

Durch die Implementierung von Facebook wird ein UIPanGestureRecognizer in der UINavigationBar platziert. So können Swipes dort gefangen werden, wo sie gebraucht werden.

Dies ermöglicht beispielsweise das direkte Erkennen der Berührungsrichtung in x / z sowie der Geschwindigkeit, mit der sie aufgetreten sind.

Auch diese Art des Bastelns mit UIViews (mehr als eine auf dem Bildschirm gleichzeitig mit offensichtlich unterschiedlichen Aufgaben -> also unterschiedlichen Controllern) sollte (ich bin versucht zu sagen, muss) die neuen ViewController-Containment-Funktionen von iOS verwenden. Jede Implementierung ohne das ist einfach schlecht, da sie an der Ansichtshierarchie auf eine Weise bastelt, die nicht von Apple beabsichtigt ist.

Nebenbei bemerkt: Wenn Sie wirklich neugierig sind, wie dies so nah wie möglich an Facebook geschehen kann, schauen Sie sich das Projekt an, das ich auf Github PKRevealController geöffnet habe .

Es gibt Dutzende verschiedener Bibliotheken, die Entwickler erstellt haben, um die Navigation im Facebook / Path-Stil für iOS-Apps zu implementieren. Ich kann alle auflisten, aber da Sie nach der besten gefragt haben, sind hier meine zwei Auswahlmöglichkeiten, die ich zum Implementieren des Navigationsmenüs mit seitlichem Wischen verwende:

1) ECSlidingViewController Es ist sehr einfach, Storyboards zu implementieren und zu verwenden. Ich hatte keine Probleme bei der Implementierung und habe auch keine Fehler oder ähnliches erhalten. Der Link, den ich bereitgestellt habe, enthält so ziemlich alle Erklärungen, um ihn zu verwenden.

2) SWRevealViewController Diese Bibliothek ist einfach zu bedienen und Sie finden HIER ein Tutorial , das zeigt, wie man es implementiert, mit allen Erklärungen zusammen mit Bildern. Sie können einfach dem Tutorial folgen und sich später bei mir bedanken.

Eine andere Möglichkeit ist die Verwendung von Scringo . Es bietet Ihnen ein Seitenmenü wie in YouTube / Facebook-Apps sowie alle Arten von integrierten Funktionen im Menü, die Sie hinzufügen können (z. B. chatten, Freunde einladen usw.).

Das Hinzufügen des Seitenmenüs erfolgt einfach durch Aufrufen von [ScringoAgent startSession ...]. Die gesamte Konfiguration kann auf der Site vorgenommen werden.

Lesen Sie hier einen sehr guten Ausgangspunkt: Schieben Sie die Navigation wie Facebook und Pfad heraus

Diese Frage ist sehr beliebt, aber es kam alles auf das einfache Importieren und Verwenden für mich an ... Hier ist, was ich benutze ... SWRevealController .

Ich bin überrascht, dass die Leute es vermissen ... Es ist wirklich großartig !!! und einfach zu bedienen. Der Entwickler enthält sogar einige Beispielprojekte, mit denen Sie sehen können, wie Sie es in verschiedenen Szenarien verwenden.

Eine hervorragende Anleitung zur Entwicklung Ihrer eigenen Slide-Out-Navigation in Swift und Objective-C.

Ziel c

• http://www.raywenderlich.com/32054/how-to-create-a-slide-out-navigation-like-facebook-and-path

Schnell

• http://www.raywenderlich.com/78568/create-slide-out-navigation-panel-swift

Sowohl in Google Mail als auch in Facebook werden Webansichten häufig verwendet. Daher ist es schwer zu sagen, was nativer Code ist und was HTML gerendert wird. Bei Betrachtung der Benutzeroberfläche sieht es jedoch so aus, als hätten sie eine UITableView mit einer Breite, die schmaler als die Bildschirmbreite (320pt) ist, unter einer UIView platziert, die den Inhalt enthält, den sie anzeigen möchten. Durch Auswahl verschiedener Tabellenansichtszeilen wird wahrscheinlich eine Unteransicht der Inhaltsansicht ausgetauscht.

Zumindest würde ich so mit dem Problem umgehen. Es ist schwer zu diktieren, was es sein soll. Spring einfach rein und fang an zu experimentieren!

Wenn Sie möchten, habe ich dieses Repo auf github GSSlideMenu gemacht. Es ermöglicht Ihnen, ein Menü im Facebook-Stil zu erstellen, ABER mit einer "Zurück" -Webansicht (im Allgemeinen haben alle Repos, die ich gefunden habe, eine Tabellenansicht als "Zurück" -Ansicht).

Dies ist genau der Klon der Facebook-Seitenleiste: GHSidebarNav-Bibliothek

sehr einfach zu bedienen. Anweisung sind in

Die Ansicht rechts kann sich in einer Unterklasse von UIScrollView befinden. In dieser Unterklasse können Sie überschreiben - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event, um nur dann JA zurückzugeben, wenn der Benutzer die Unteransicht berührt hat. Auf diese Weise können Sie Ihre transparente UIScrollView über jede andere Ansicht platzieren und jedes Berührungsereignis durchlaufen, das außerhalb der Unteransicht stattfindet. und du bekommst kostenlos Scroll-Sachen.

Beispielsweise:

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
    CGPoint location=[self convertPoint:point toView:subview];
    return (location.x > 0 && 
            location.x < subview.frame.size.width && 
            location.y > 0 && 
            location.y < subview.frame.size.height);
}

oder:

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{
    return [subview pointInside:
             [self convertPoint:point toView:subview] withEvent:event];

Versuchen Sie, Ihr Menü (zu dem Sie streichen) unter der Hauptansicht hinzuzufügen. Beginnen Sie mit dem Abonnieren von Berührungsereignissen in der Ansicht.

Implementieren Sie touchesMoved:und überprüfen Sie, ob die erste gesturevertikal (ggf. in der Hauptansicht scrollen) oder horizontal (hier möchten Sie das Menü anzeigen) ist. Wenn es horizontal ist, rufen Sie bei - (void)scrollAwayMainView:(NSUInteger)pixelsjedem Aufruf eine andere Methode auf, touchesMoved:berechnen Sie die Anzahl der Pixel vom Startpunkt der Hauptansicht entfernt und übergeben Sie diese Zahl an die Methode. Führen Sie in dieser Methodenimplementierung den folgenden Code aus:

[mainView scrollRectToVisible:CGRectMake:(pixels, 
                                          mainView.origin.y, 
                                          mainView.size.width, 
                                          mainView.size.height];

Schauen Sie sich meine Lösung für diese Frage an:

Wie erstelle ich ein benutzerdefiniertes Folienmenü ohne Bibliothek eines Drittanbieters?

Eine einzelne Klasse, die Sie nur unterordnen und mit Inhalten füllen müssen.

Hier ist die Klasse. Weitere Details finden Sie unter dem obigen Link.

#import <UIKit/UIKit.h>

@interface IS_SlideMenu_View : UIView <UIGestureRecognizerDelegate>
{
    UIView* transparentBgView;
    BOOL hidden;
    int lastOrientation;
}

@property (strong, nonatomic) UIView *menuContainerV;

+ (id)sharedInstance;

- (BOOL)isShown;
- (void)hideSlideMenu;
- (void)showSlideMenu;

@end


#import "IS_SlideMenu_View.h"

@implementation IS_SlideMenu_View

+ (id)sharedInstance
{
    static id _sharedInstance = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        _sharedInstance = [[[self class] alloc] init];
    });

    return _sharedInstance;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    frame = [[[UIApplication sharedApplication] delegate] window].frame;
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];

        transparentBgView = [[UIView alloc] initWithFrame:frame];
        [transparentBgView setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.6]];
        [transparentBgView setAlpha:0];
        transparentBgView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(gestureRecognized:)];
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(gestureRecognized:)];
        [transparentBgView addGestureRecognizer:tap];
        [transparentBgView addGestureRecognizer:pan];

        [self addSubview:transparentBgView];

        frame.size.width = 280;
        self.menuContainerV = [[UIView alloc] initWithFrame:frame];
        CALayer *l = self.menuContainerV.layer;
        l.shadowColor = [UIColor blackColor].CGColor;
        l.shadowOffset = CGSizeMake(10, 0);
        l.shadowOpacity = 1;
        l.masksToBounds = NO;
        l.shadowRadius = 10;
        self.menuContainerV.autoresizingMask = UIViewAutoresizingFlexibleHeight;

        [self addSubview: self.menuContainerV];
        hidden = YES;
    }

    //----- SETUP DEVICE ORIENTATION CHANGE NOTIFICATION -----
    UIDevice *device = [UIDevice currentDevice];
    [device beginGeneratingDeviceOrientationNotifications];
    NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];
    [nc addObserver:self selector:@selector(orientationChanged:) name:UIDeviceOrientationDidChangeNotification object:device];

    lastOrientation = [[UIDevice currentDevice] orientation];

    return self;
}

//********** ORIENTATION CHANGED **********
- (void)orientationChanged:(NSNotification *)note
{
    UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];    
    if(orientation == UIDeviceOrientationPortrait || orientation == UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight){
        NSLog(@"%ld",orientation);
        if(!hidden && lastOrientation != orientation){
            [self hideSlideMenu];
            hidden = YES;
            lastOrientation = orientation;
        }
    }
}

- (void)showSlideMenu {
    UIWindow* window = [[[UIApplication sharedApplication] delegate] window];
    self.frame = CGRectMake(0, 0, window.frame.size.width, window.frame.size.height);

    [self.menuContainerV setTransform:CGAffineTransformMakeTranslation(-window.frame.size.width, 0)];

    [window addSubview:self];
//    [[UIApplication sharedApplication] setStatusBarHidden:YES];

    [UIView animateWithDuration:0.5 animations:^{
        [self.menuContainerV setTransform:CGAffineTransformIdentity];
        [transparentBgView setAlpha:1];
    } completion:^(BOOL finished) {
        NSLog(@"Show complete!");
        hidden = NO;
    }];
}

- (void)gestureRecognized:(UIGestureRecognizer *)recognizer
{
    if ([recognizer isKindOfClass:[UITapGestureRecognizer class]]) {
        [self hideSlideMenu];
    } else if ([recognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
        static CGFloat startX;
        if (recognizer.state == UIGestureRecognizerStateBegan) {
            startX = [recognizer locationInView:self.window].x;
        } else
        if (recognizer.state == UIGestureRecognizerStateChanged) {
            CGFloat touchLocX = [recognizer locationInView:self.window].x;
            if (touchLocX < startX) {
                [self.menuContainerV setTransform:CGAffineTransformMakeTranslation(touchLocX - startX, 0)];
            }
        } else
        if (recognizer.state == UIGestureRecognizerStateEnded) {
            [self hideSlideMenu];
        }
    }
}

- (void)hideSlideMenu
{
    UIWindow* window = [[[UIApplication sharedApplication] delegate] window];
    window.backgroundColor = [UIColor clearColor];
    [UIView animateWithDuration:0.5 animations:^{
        [self.menuContainerV setTransform:CGAffineTransformMakeTranslation(-self.window.frame.size.width, 0)];
        [transparentBgView setAlpha:0];
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
        [self.menuContainerV setTransform:CGAffineTransformIdentity];

//        [[UIApplication sharedApplication] setStatusBarHidden:NO];
        hidden = YES;
        NSLog(@"Hide complete!");
    }];
}

- (BOOL)isShown
{
    return !hidden;
}

@end