Slide de estilo do Android para Facebook

O novo aplicativo do Facebook e sua navegação são muito legais. Eu estava apenas tentando ver como ele pode ser emulado no meu aplicativo.

Alguém tem uma idéia de como isso pode ser alcançado?

Ao clicar no botão superior esquerdo, a página desliza e a seguinte tela é exibida:

Vídeo do youtube

Eu já brinquei com isso, e a melhor maneira de encontrar foi usar um FrameLayout e colocar um HorizontalScrollView (HSV) personalizado na parte superior do menu. Dentro do HSV estão as visualizações do aplicativo, mas há uma visualização transparente como o primeiro filho. Isso significa que, quando o HSV tiver deslocamento de rolagem zero, o menu será exibido (e ainda será clicável surpreendentemente).

Quando o aplicativo é iniciado, rolamos o HSV para o deslocamento da primeira visualização visível do aplicativo e, quando queremos mostrar o menu, rolamos para trás para revelar o menu através da visualização transparente.

O código está aqui e os dois botões inferiores (chamados HorzScrollWithListMenu e HorzScrollWithImageMenu) na atividade Iniciar mostram os melhores menus que eu poderia criar:

Demonstração do menu deslizante do Android

Captura de tela do emulador (rolagem intermediária):

Captura de tela do dispositivo (rolagem completa). Observe que meu ícone não é tão largo quanto o ícone do menu do Facebook; portanto, a visualização do menu e a visualização 'app' não estão alinhadas.

Implementei a navegação de slides do tipo facebook neste projeto de biblioteca .

Você pode facilmente incorporá-lo ao seu aplicativo, interface do usuário e navegação. Você precisará implementar apenas uma Atividade e um Fragmento, informar a biblioteca sobre ela - e a biblioteca fornecerá todas as animações e navegação desejadas.

Dentro do repositório, você pode encontrar um projeto demo, com como usar a lib para implementar uma navegação semelhante ao facebook. Aqui está um pequeno vídeo com registro do projeto de demonstração .

Além disso, essa lib deve ser compatível com o padrão ActionBar, porque se baseia nas transações de atividades e TranslateAnimations (não nas transações de fragmentos e nas visualizações personalizadas).

No momento, o maior problema é fazê-lo funcionar bem no aplicativo, compatível com os modos retrato e paisagem. Se você tiver algum comentário, forneça-o via github.

Tudo de bom,
Alex

Aqui está outra lib e parece ser o melhor na minha opinião. Eu não escrevi ..

ATUALIZAR:

Esse código parece funcionar melhor para mim e move toda a Actionbar de maneira semelhante ao aplicativo G +.

Como o Google conseguiu fazer isso? Deslize o ActionBar no aplicativo Android

Eu acho que o aplicativo do facebook não está escrito em código nativo (por código nativo, quero dizer, usando layouts no Android), mas eles usaram o webview para ele e usaram algumas bibliotecas de interface do usuário javascript, como o sencha . Pode ser facilmente alcançado usando a estrutura sencha.

Aqui está mais uma biblioteca de código aberto (muito boa)!

A boa característica deste é que ele é facilmente integrado ao ActionBarSherlock.

Aqui está o link do projeto github

Aqui está o link de download do Google Play

Acabei de implementar uma visão semelhante para o meu próprio projeto. Você pode conferir aqui

Aqui está a tela do aplicativo de amostra com base na biblioteca que escrevi:

É fácil usar essa visualização personalizada como elemento do layout XML. Aqui está um exemplo:

    <shared.ui.actionscontentview.ActionsContentView
      android:id="@+id/content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:actions_layout="@layout/actions"
      app:content_layout="@layout/content" />

Se você tiver alguma dúvida sobre o uso da biblioteca ActionsContentView, posso escrever um pequeno artigo nos projetos Wiki.

Algumas vantagens desta biblioteca:

• capacidade de deslizar a visualização por toque
• é fácil ajustar o tamanho da barra de ações em XML
• suporte para todas as versões do Android SDK a partir de 2.0 ou superior

Há uma limitação:

• todas as vistas de rolagem horizontal não funcionarão nos limites dessa vista

Atenciosamente, Steven

Com a revisão 13 do pacote de suporte do Android (maio de 2013), existe o DrawerLayout para criar uma Gaveta de Navegação que pode ser puxada da borda de uma janela. E, a gaveta de navegação é um padrão de design agora.

biblioteca de suporte v4

padrão de design de gaveta de navegação

Fez um resumo de uma implementação existente e a transformou em um projeto de biblioteca mais um aplicativo de exemplo. Também foi adicionada a análise XML, bem como a detecção automática de uma barra de ação possivelmente presente, para que funcione com o nativo e também com uma barra de ação de suporte, como ActionBarSherlock.

Este também desliza a barra de ação!

A coisa toda é um projeto de biblioteca junto com um aplicativo de exemplo e é descrito em Um menu deslizante para Android, como aplicativos do Google e do Facebook . Agradecimentos a scirocco pela idéia e código iniciais!

Isso é simples e elegante: https://github.com/akotoe/android-slide-out-menu.git

Instantâneo:

Eu acho que a biblioteca não mencionou:

jfeinstein10 / SlidingMenu

github url:https://github.com/jfeinstein10/SlidingMenu

• funciona bem com a barra de ação ActionBarSherlock, que ajuda na compatibilidade com versões anteriores !
• Suporte slide direito e não apenas deslize via botão!

Ainda não posso comentar a resposta dada por @Paul Grime. De qualquer forma, enviei no seu projeto do github a correção para o problema de flicker ....

Vou postar a correção aqui, talvez alguém precise. Você só precisa adicionar duas linhas de código. O primeiro abaixo da chamada anim.setAnimationListener:

anim.setFillAfter(true);

E o segundo após a chamada app.layout ():

app.clearAnimation();

Espero que isto ajude :)

Eu implementei isso com o AbsoluteLayout e um simples controlador de slide que move a exibição para um deslocamento negativo para ocultar.

Se alguém estiver interessado, eu posso limpar o código / layout e postar. Sei que o AbsoluteLayout está obsoleto, mas foi uma implementação muito direta. Vista esquerda / Vista direita e, quando "deslizar para abrir", mova a vista esquerda de um deslocamento -X para a largura do dispositivo - o que você deseja exibir na Vista direita

Olá, este é o melhor aplicativo de demonstração de amostra que fornece o menu de slides do Facebook. Verifique o código aqui

Como parte da minha ACL (Biblioteca Comum Android), implementei o próprio SideBar. Vantagens principais:

1. A barra lateral pode ser definida em qualquer posição: esquerda, superior, inferior, direita
2. Tanto a vista principal quanto a deslizante são clicáveis
3. A barra lateral pode ser parcialmente mostrada
4. Atributos estilizados do SideBar facilitam a mudança de estilo
5. Artefato no repositório maven
6. Parte de uma grande biblioteca

Código fonte: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

Uso: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

Recentemente, trabalhei na minha versão de implementação do menu deslizante. Ele usa a popular biblioteca Android J.Feinstein SlidingMenu.

Por favor, verifique o código fonte no GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

Faça o download do aplicativo diretamente no dispositivo e tente:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

O código deve ser auto-explicativo por causa dos comentários. Espero que seja útil! ;)

Eu encontrei uma maneira mais simples para isso e seu trabalho. Use a gaveta de Navegação simples e chame drawer.setdrawerListner () e use o método mainView.setX () no método drawerSlide abaixo ou copie meu código.

arquivo xml

 <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

  <ImageView
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:id="@+id/menu"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="10dp"
      android:src="@drawable/black_line"
      />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="200dp"
    android:background="#181D21"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    </RelativeLayout>
 </android.support.v4.widget.DrawerLayout>

arquivo java

   public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
RelativeLayout mainView;
ImageView menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    menu=(ImageView)findViewById(R.id.menu);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mainView=(RelativeLayout)findViewById(R.id.content_frame);

    menu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            drawerLayout.openDrawer(Gravity.LEFT);
        }
    });

    drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            mainView.setX(slideOffset * 300);
        }

        @Override
        public void onDrawerOpened(View drawerView) {

        }

        @Override
        public void onDrawerClosed(View drawerView) {

        }

        @Override
        public void onDrawerStateChanged(int newState) {

        }
    });
 }
}

Obrigado

Vou fazer algumas suposições ousadas aqui ...

Suponho que eles tenham um layout que represente o menu que não está visível. Quando o botão do menu é tocado, eles animam o layout / visualização na parte superior para sair do caminho e simplesmente ativam a visibilidade do layout do menu. Eu não pensei nisso causando qualquer tipo de problemas com o índice z nas visualizações, ou como eles controlam isso.

O Android adicionou a gaveta de navegação. Consulte este

ligação

Aqui está o guia de design e desenvolvimento encontrado na documentação oficial do Android, sem a necessidade de adicionar uma biblioteca externa não oficial. Somente a biblioteca de suporte do Android fará. Encontre os links aqui.

projetar e desenvolver .

O aplicativo do Facebook para Android pode ser construído com fragmentos . O menu é um fragmento, a Atividade em profundidade (Feed de notícias / Eventos / Amigos etc.) é o outro fragmento. Basicamente, um layout de 'mestre e detalhes' de um tablet em um telefone.

Para informações, como a biblioteca de compatibilidade começa na 1.6 e esse aplicativo do Facebook também está sendo executado em dispositivos com Android 1.5, isso não pôde ser feito com os fragmentos.

A maneira de fazer isso é: Crie uma atividade "base" BaseMenuActivity, onde você coloca toda a lógica do onItemClickListener para sua lista de menus e define a animação 2 ("abrir" e "fechar"). No final / início das animações, você mostra / oculta o layout da BaseMenuActivity (vamos chamá-lo menu_layout). O layout para esta atividade é simples, é apenas uma lista com itens + uma parte transparente à direita da sua lista. Esta parte poderá ser clicada e sua largura será a mesma do seu "botão mover". Com isso, você poderá clicar nesse layout para iniciar a animação e deixar o layout do conteúdo deslizar para a esquerda e exibir a tela inteira. Para cada opção (ou seja, item da lista de menus), você cria uma "ContentActivity" que estende a BaseMenuActivity. Então, quando você clica em um item da lista, inicia sua ItemSelectedContentActivity com o menu visível (que será fechado assim que sua atividade for iniciada). Os layouts para cada ContentActivity são FrameLayout e incluem o e. Você só precisa mover o content_layout e tornar o menu_layout visível quando quiser.

Essa é uma maneira de fazer isso, e espero ter sido claro o suficiente.

Eu tenho brincado com isso nos últimos dias e encontrei uma solução bastante simples no final e que funciona antes do Honeycomb. Minha solução foi animar a tela que eu quero deslizar ( FrameLayoutpara mim) e ouvir o final da animação (nesse ponto, para compensar a posição esquerda / direita da tela). Colei minha solução aqui: Como animar a tradução de um View

Após uma pesquisa por várias horas, achei a solução de Paul Grime provavelmente a melhor. Mas tem muita funcionalidade. Portanto, pode ser difícil estudar para iniciantes. Por isso, gostaria de fornecer minha implementação, derivada da ideia de Paul, mas é mais simples e deve ser fácil de ler.

implementação da barra de menus lateral usando o código java sem XML

Eu não vi o incrível SimonVT / android-menudrawer mencionado em qualquer lugar nas respostas acima. Então aqui está um link

https://github.com/SimonVT/android-menudrawer

É super fácil de usar e você pode colocá-lo à esquerda, direita, superior ou inferior. Muito bem documentado com código de amostra e licença Apache 2.0.

Em junho de 2012, o Google adicionou "modelos" no plug-in do Eclipse ADT e existe um modelo chamado "fluxo mestre / detalhes" que faz exatamente isso (com base em fragmentos)