¿Cuál es la mejor manera de desarrollar un menú lateral como el de la nueva aplicación iOS de Facebook?

Parece que los menús de desplazamiento lateral se están convirtiendo en un elemento de interfaz más común a medida que se acumula más información en cada aplicación de iPhone. Facebook lo ha incluido en su última versión y la nueva aplicación de Gmail parece incluirlo también . Me preguntaba si alguien tenía ideas sobre la forma más eficiente de desarrollar algo como esto, ya que se está convirtiendo en un elemento de interfaz más común. Si bien tengo mis propios pensamientos sobre cómo construir esto, tengo curiosidad por escuchar lo que piensan otras personas.

Recientemente me encontré con esto, en realidad no miré el código ni probé el control, pero parece que puede ser un punto de partida muy decente.

jtrevealsidebar

Editar: el lector también debe echar un vistazo a las otras respuestas :)

Hay una gran biblioteca para esto de Tom Adriaenssen: Inferis / ViewDeck

Es muy fácil de usar y tiene muchos seguidores.

EDITAR:

Para algo un poco más liviano, consulte: mutualmobile / MMDrawerController

No tiene todas las características de ViewDeck, pero es más fácil de modificar y ampliar.

Creé una biblioteca para esto. Se llama MFSideMenu .

Entre otras cosas, incluye soporte para iphone + ipad, vertical + horizontal, menú en el lado izquierdo o derecho, UITabBarController y gestos panorámicos.

Echa un vistazo a MMDrawerController:

MMDrawerController

No pudimos encontrar una biblioteca que nos gustara, así que simplemente creamos la nuestra.

La idea clave de que tiene que establecer el marco o centro de self.navigationController.view . Hay dos eventos que debes manejar. (1) barButtonItem press . (2) gesto de desplazamiento debido al deslizamiento.

Puede enviar el controlador de vista al fondo de esta manera:

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

Aún mejor es JASidePanels . Se implementa fácilmente y funciona tanto para iPhone como para iPad.

Enlace de Github: JASidePanels

La implementación de Facebook coloca un UIPanGestureRecognizer en el UINavigationBar. Por lo tanto, permite atrapar golpes donde sea necesario.

Eso permite hacer cosas como reconocer la dirección táctil en x / z directamente, así como la velocidad con la que ocurrieron.

Además, este tipo de retoques con UIViews (más de uno en la pantalla a la vez con tareas evidentemente diferentes -> por lo tanto, diferentes controladores) deberían (estoy tentado a decir que deben) usar las nuevas características ViewController-Containment de iOS. Cada implementación sin eso es simplemente mala, ya que juega con la jerarquía de vistas de una manera no prevista por Apple.

En una nota al margen: si tiene curiosidad sobre cómo se puede hacer lo más cerca posible de Facebook, consulte el proyecto que abrí en Github PKRevealController .

Hay decenas de bibliotecas diferentes que los desarrolladores han creado para implementar la navegación de estilo Facebook / Path para aplicaciones iOS. Puedo enumerarlos todos, pero como usted ha pedido el mejor, aquí están mis dos opciones que uso para implementar el menú de navegación de deslizamiento lateral:

1) ECSlidingViewController Es muy fácil de implementar y usar Storyboards también. No tuve problemas para implementarlo ni recibí ningún error ni nada por el estilo. El enlace que proporcioné tiene casi toda la explicación para poder usarlo.

2) SWRevealViewController Esta biblioteca es fácil de usar y puede encontrar un tutorial AQUÍ , que muestra cómo implementarlo con toda la explicación junto con las imágenes. Puedes seguir el tutorial y agradecerme más tarde.

Otra opción es usar Scringo . Le ofrece un menú lateral como en las aplicaciones de youtube / facebook, y también todo tipo de funciones integradas en el menú que puede elegir agregar (por ejemplo, chat, invitar amigos, etc.)

Agregar el menú lateral es simplemente llamando a [ScringoAgent startSession ...] y toda la configuración se puede hacer en el sitio.

Consulte aquí, un muy buen punto de partida: deslice la navegación hacia afuera como Facebook y Path

Esta pregunta es bastante popular, pero todo se redujo a una fácil importación y uso para mí ... Esto es lo que uso ... SWRevealController .

Me sorprende que la gente se lo pierda ... ¡Realmente es GENIAL! y fácil de usar El desarrollador incluso incluye algunos proyectos de ejemplo que le permiten ver cómo usarlo en diferentes escenarios.

Una excelente guía sobre cómo desarrollar su propia navegación Slide-Out en Swift y Objective-C.

C objetivo

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

Rápido

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

Tanto Gmail como Facebook hacen un uso intensivo de las vistas web, por lo que es difícil decir qué es el código nativo y qué se representa en HTML. Sin embargo, al mirar la interfaz, parece que han colocado un UITableView con un ancho más estrecho que el ancho de la pantalla (320pt) debajo de una UIView que contiene el contenido que desean mostrar. La selección de diferentes filas de vistas de tabla probablemente intercambia una subvista de la vista de contenido.

Al menos, así es como abordaría el problema. Es difícil dictar lo que debería ser. ¡Simplemente salta y comienza a experimentar!

Si lo desea, hice este repositorio en github GSSlideMenu Le permite crear un menú al estilo de Facebook PERO con una vista web "posterior" (generalmente todos los repositorios que he encontrado tienen una vista de tabla como la vista "posterior").

este es exactamente el clon de la barra lateral de Facebook: biblioteca GHSidebarNav

Muy fácil de usar. la instrucción está en

la vista de la derecha podría estar dentro de una subclase de UIScrollView. En esta subclase puedes anular- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event para devolver SÍ solo si el usuario tocó la subvista. De esta manera, puede colocar su UIScrollView transparente sobre cualquier otra vista y pasar por cualquier evento táctil que tenga lugar fuera de la subvista; y obtienes material de desplazamiento gratis.

Por ejemplo:

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

o:

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

Intenta agregar tu menú (que deslizas para acceder) debajo de la vista principal. Comience a suscribirse a eventos táctiles en la vista.

Implemente touchesMoved:y verifique si el primero gesturees vertical (desplazar la vista principal, si es necesario) u horizontal (aquí desea mostrar el menú). Si es horizontal, comience a invocar otro método, - (void)scrollAwayMainView:(NSUInteger)pixelscada vez que touchesMoved:se llame, calculando el número de píxeles lejos del punto de inicio que debería ser la vista principal y pasando ese número al método. En esa implementación de métodos, ejecute el siguiente código:

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

Mira mi solución para esta pregunta:

¿Cómo crear un menú de diapositivas personalizado sin una biblioteca de terceros?

Una sola clase que solo necesita subclasificar y completar con contenido.

Aquí está la clase. Para más detalles, vea el enlace de arriba.

#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