Qual é a melhor maneira de desenvolver um menu lateral como o do novo aplicativo para iOS do Facebook?

Parece que os menus de deslizar lateral estão se tornando um elemento de interface mais comum à medida que mais informações são amontoadas em cada aplicativo do iPhone. O Facebook o incluiu em sua versão mais recente e o novo aplicativo do Gmail parece incluí-lo também . Eu queria saber se alguém pensou sobre a maneira mais eficiente de desenvolver algo assim, pois está se tornando um elemento de interface mais comum. Embora tenha meus próprios pensamentos sobre como construir isso, estou curioso para ouvir o que as outras pessoas pensam.

Recentemente, deparei com isso, na verdade, não olhei o código ou testei o controle, mas parece que pode ser um ponto de partida muito decente.

jtrevealsidebar

Edit: O leitor também deve dar uma olhada nas outras respostas :)

Há uma ótima biblioteca para isso de Tom Adriaenssen: Inferis / ViewDeck

É muito fácil de usar e possui muitos seguidores.

EDITAR:

Para algo um pouco mais leve, confira: mutualmobile / MMDrawerController

Ele não possui todos os recursos do ViewDeck, mas é mais simples de modificar e estender.

Eu criei uma biblioteca para isso. É chamado MFSideMenu .

Entre outras coisas, inclui suporte para iphone + ipad, retrato + paisagem, menu no lado esquerdo ou direito, UITabBarController e gestos de panorâmica.

Confira o MMDrawerController:

MMDrawerController

Não conseguimos encontrar uma biblioteca de que gostávamos, então lançamos a nossa.

A ideia principal de que você deve definir o quadro ou o centro de self.navigationController.view . Há dois eventos que você precisa manipular. (1) barButtonItem pressione . (2) gesto de movimento panorâmico por deslizar.

Você pode enviar o controlador de exibição para o plano de fundo da seguinte maneira:

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

Ainda melhor é o JASidePanels . Facilmente implementado e funciona para iPhone e iPad.

Link do Github: JASidePanels

A implementação do Facebook coloca um UIPanGestureRecognizer na UINavigationBar. Permitindo assim pegar golpes onde é necessário.

Isso permite fazer coisas como, reconhecer a direção do toque em x / z diretamente, bem como a velocidade com que ocorreram.

Também esse tipo de mexer com UIViews (mais de uma na tela por vez, com tarefas evidentemente diferentes -> portanto, diferentes controladores) deve (estou tentado a dizer que deve) usar os novos recursos do ViewController-Containment do iOS. Toda implementação sem isso é simplesmente ruim, pois mexe com a hierarquia de visualizações de uma maneira não pretendida pela Apple.

Em uma nota lateral: Se você está realmente curioso para saber como isso pode ser feito o mais próximo possível do Facebook, confira o projeto que eu abro no Github PKRevealController .

Existem dezenas de bibliotecas diferentes que os desenvolvedores criaram para implementar a navegação no estilo Facebook / Path para aplicativos iOS. Posso listar todos eles, mas como você pediu o melhor, aqui estão minhas duas opções que eu uso para implementar o menu de navegação do furto lateral:

1) ECSlidingViewController É muito fácil de implementar e usar Storyboards também. Não tive problemas ao implementá-lo, nem recebi erros ou algo assim. O link que forneci tem praticamente toda a explicação para usá-lo.

2) SWRevealViewController Esta biblioteca é fácil de usar e você pode encontrar um tutorial AQUI , que mostra como implementá-lo com todas as explicações e imagens. Você pode apenas seguir o tutorial e me agradecer mais tarde.

Outra opção é usar o Scringo . Ele fornece um menu lateral, como nos aplicativos do youtube / facebook, e também todos os tipos de recursos integrados no menu que você pode adicionar (por exemplo, conversar, convidar amigos, etc.)

Adicionar o menu lateral é simplesmente chamando [ScringoAgent startSession ...] e toda a configuração pode ser feita no site.

Consulte aqui um bom ponto de partida: deslize a navegação como o facebook e o caminho

Essa questão é bastante popular, mas tudo se resume à importação e uso fáceis para mim ... Aqui está o que eu uso ... SWRevealController .

Estou surpreso que as pessoas tenham saudades ... É realmente ótimo !!! e fácil de usar. O desenvolvedor ainda inclui alguns projetos de exemplo que permitem ver como usá-lo em diferentes cenários.

Um excelente guia sobre como desenvolver sua própria navegação deslizante em Swift e Objective-C.

Objetivo-C

• 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 o Gmail quanto o Facebook fazem uso pesado de visualizações da Web, por isso é difícil dizer o que é código nativo e o que é renderizado em HTML. No entanto, olhando para a interface, parece que eles colocaram um UITableView com uma largura mais estreita que a largura da tela (320pt) embaixo de um UIView que contém o conteúdo que eles querem exibir. A seleção de linhas diferentes da visualização de tabela provavelmente alterna uma subvisão da visualização de conteúdo.

Pelo menos, é assim que eu abordaria o problema. É difícil ditar o que deveria ser. Basta entrar e começar a experimentar!

Se você quiser, eu fiz esse repositório no github GSSlideMenu. Permite criar um menu no estilo do Facebook, MAS com um webView "de volta" (geralmente todos os repositórios que encontrei têm um tableView como o "back").

este é exatamente o clone da barra lateral do facebook: biblioteca GHSidebarNav

muito fácil de usar. instruções estão em

a visualização à direita pode estar dentro de uma subclasse de UIScrollView. Nesta subclasse, você pode substituir - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)eventpara retornar YES apenas se o usuário tocou na subview. Dessa forma, você pode colocar seu UIScrollView transparente sobre qualquer outra visualização e passar por qualquer evento de toque que ocorra fora da subvisão; e você obtém material de rolagem de graça.

Por exemplo:

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

ou:

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

Tente adicionar seu menu (que você desliza para acessar) abaixo da tela principal. Comece a se inscrever para tocar em eventos na exibição.

Implemente touchesMoved:e verifique se o primeiro gestureé vertical (role a tela principal, se necessário) ou horizontal (aqui você deseja mostrar o menu). Se for horizontal, comece a chamar outro método, - (void)scrollAwayMainView:(NSUInteger)pixelssempre que touchesMoved:for chamado, calcule o número de pixels a partir do ponto de partida da visualização principal e passe esse número para o método. Na implementação desses métodos, execute o seguinte código:

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

Confira minha solução para esta pergunta:

Como criar um menu de slides personalizado sem uma biblioteca de terceiros.

Uma classe única que você só precisa subclassificar e preencher com conteúdo.

Aqui está a turma. Para mais detalhes, consulte o link acima.

#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