Jaki jest najlepszy sposób na stworzenie menu sidewipe, takiego jak w nowej aplikacji Facebooka na iOS?

Wygląda na to, że menu przesuwne w bok stają się coraz powszechniejszym elementem interfejsu, ponieważ w każdej aplikacji na iPhone'a gromadzi się więcej informacji. Facebook włączył go do swojej najnowszej wersji, a nowa aplikacja Gmail wydaje się również zawierać go . Zastanawiałem się, czy ktoś miał przemyślenia na temat najbardziej wydajnego sposobu tworzenia czegoś takiego, ponieważ staje się on coraz powszechniejszym elementem interfejsu. Chociaż mam własne przemyślenia na temat tego, jak to zbudować, jestem ciekawy, co myślą inni ludzie.

Niedawno natknąłem się na to, tak naprawdę nie patrzyłem na kod ani nie testowałem kontrolki, ale wygląda na to, że może to być bardzo przyzwoity punkt wyjścia.

jtrevealsidebar

Edycja: Czytelnik powinien również spojrzeć na inne odpowiedzi :)

Jest do tego świetna biblioteka autorstwa Toma Adriaenssena: Inferis / ViewDeck

Jest bardzo łatwy w użyciu i ma dość dużą liczbę zwolenników.

EDYTOWAĆ:

Jeśli szukasz czegoś nieco lżejszego , sprawdź: wzajemny mobilny / MMDrawerController

Nie ma wszystkich funkcji ViewDeck, ale jest prostszy w modyfikowaniu i rozszerzaniu.

Stworzyłem do tego bibliotekę. Nazywa się MFSideMenu .

Obejmuje między innymi obsługę iPhone'a i iPada, portretu + krajobrazu, menu po lewej lub prawej stronie, UITabBarController i gestów przesuwania.

Sprawdź MMDrawerController:

MMDrawerController

Nie mogliśmy znaleźć biblioteki, która nam się podobała, więc po prostu stworzyliśmy własną.

Klucz pomysł , że trzeba zestaw ramek self.navigationController.view lub centrum . Są dwa zdarzenia , z którymi musisz sobie poradzić. (1) bar Przycisk Naciśnięcie pozycji . (2) gest przesuwania z powodu przeciągnięcia.

Możesz wysłać kontroler widoku w tło w następujący sposób:

[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);
            }];
        }
    }
}

Jeszcze lepszy jest JASidePanels . Łatwa implementacja i działa zarówno na iPhonie, jak i iPadzie.

Link do Github: JASidePanels

Wdrożenie Facebooka umieszcza UIPanGestureRecognizer na UINavigationBar. W ten sposób pozwalając złapać przeciągnięcia tam, gdzie jest to potrzebne.

Pozwala to na takie rzeczy, jak bezpośrednie rozpoznawanie kierunku dotyku w x / z, a także prędkości, z jaką się pojawiały.

Również taki rodzaj majstrowania przy UIViews (więcej niż jeden na ekranie na raz z ewidentnie różnymi zadaniami -> a więc różnymi kontrolerami) powinien (kuszę się powiedzieć, że musi) korzystać z nowych funkcji iOS ViewController-Containment. Każda implementacja bez tego jest po prostu zła, ponieważ majstruje przy hierarchii widoków w sposób niezamierzony przez Apple.

Na marginesie: jeśli naprawdę ciekawi cię, jak można to zrobić tak blisko Facebooka, jak to tylko możliwe, sprawdź projekt, który otwieram, pochodzący z Github PKRevealController .

Istnieją dziesiątki różnych bibliotek, które programiści stworzyli, aby zaimplementować nawigację w stylu Facebook / Path dla aplikacji na iOS. Mogę wymienić je wszystkie, ale ponieważ poprosiłeś o najlepszy, oto moje dwie opcje, których używam do implementacji menu nawigacji z bocznym przesuwaniem:

1) ECSlidingViewController Jest bardzo łatwy w implementacji i używaniu również scenorysów. Nie miałem żadnych problemów z jego implementacją, nie otrzymałem żadnych błędów ani niczego w tym stylu. Link, który podałem, zawiera prawie wszystkie wyjaśnienia, jak z niego korzystać.

2) SWRevealViewController Ta biblioteka jest łatwa w użyciu i TUTAJ można znaleźć samouczek , który pokazuje, jak ją wdrożyć wraz z wszystkimi wyjaśnieniami wraz z obrazami. Możesz po prostu postępować zgodnie z samouczkiem i podziękować mi później.

Inną opcją jest użycie Scringo . Daje ci boczne menu, takie jak w aplikacjach youtube / facebook, a także wszelkiego rodzaju wbudowane funkcje w menu, które możesz dodać (np. Czat, zapraszanie znajomych itp.)

Dodanie menu bocznego polega po prostu na wywołaniu [ScringoAgent startSession ...], a całą konfigurację można przeprowadzić na stronie.

Zobacz tutaj, bardzo dobry punkt wyjścia: wysuń nawigację, taką jak Facebook i ścieżka

To pytanie jest dość popularne, ale wszystko sprowadzało się do łatwego importowania i używania dla mnie ... Oto czego używam ... SWRevealController .

Dziwię się, że ludzie za tym tęsknią ... To naprawdę WSPANIAŁE !!! i łatwy w użyciu. Deweloper zawiera nawet kilka przykładowych projektów, które pozwalają zobaczyć, jak używać go w różnych scenariuszach.

Doskonały przewodnik po tym, jak opracować własną nawigację typu Slide-Out-Navigation w językach Swift i Objective-C.

Cel C

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

Szybki

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

Zarówno Gmail, jak i Facebook intensywnie wykorzystują widoki internetowe, więc trudno powiedzieć, co to jest kod natywny, a co renderowany HTML. Jednak patrząc na interfejs, wygląda na to, że umieścili UITableView o szerokości węższej niż szerokość ekranu (320 punktów) pod UIView, który zawiera zawartość, którą chcą wyświetlić. Wybranie różnych wierszy widoku tabeli prawdopodobnie powoduje zamianę widoku podrzędnego widoku zawartości.

Przynajmniej tak bym podszedł do problemu. Trudno dyktować, co to powinno być. Po prostu wskocz i zacznij eksperymentować!

Jeśli chcesz, zrobiłem to repozytorium na githubie GSSlideMenu To pozwala na stworzenie menu w stylu Facebooka, ALE z "wstecz" webView (generalnie wszystkie repozytoria, które znalazłem, mają tableView jako widok "z tyłu").

to jest dokładnie klon paska bocznego facebooka: biblioteka GHSidebarNav

bardzo łatwy w użyciu. instrukcja jest w środku

widok po prawej stronie mógłby znajdować się wewnątrz podklasy UIScrollView. W tej podklasie można zastąpić, - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)eventaby zwrócić TAK tylko wtedy, gdy użytkownik dotknął widoku podrzędnego. W ten sposób możesz umieścić swój przezroczysty widok UIScrollView nad dowolnym innym widokiem i przejść przez każde zdarzenie dotykowe, które ma miejsce poza widokiem podrzędnym; a materiały do ​​przewijania otrzymujesz za darmo.

Na przykład:

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

lub:

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

Spróbuj dodać swoje menu (do którego przesuń palcem, aby przejść) pod głównym widokiem. Rozpocznij subskrybowanie wydarzeń dotykowych w widoku.

Zaimplementuj touchesMoved:i sprawdź, czy pierwszy gesturejest pionowy (przewiń widok główny, jeśli to konieczne), czy poziomy (tutaj chcesz pokazać menu). Jeśli jest pozioma, zacznij wywoływać inną metodę, - (void)scrollAwayMainView:(NSUInteger)pixelsza każdym razem, gdy touchesMoved:zostanie wywołana, oblicz liczbę pikseli oddalonych od punktu początkowego, w którym powinien znajdować się główny widok, i przekaż tę liczbę do metody. W tej implementacji metod uruchom następujący kod:

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

Sprawdź moje rozwiązanie na to pytanie:

Jak stworzyć niestandardowe menu slajdów bez biblioteki innej firmy?

Jedna klasa, którą musisz tylko podklasować i wypełnić treścią.

Oto klasa. Aby uzyskać więcej informacji, zobacz powyższy 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