debug is on the table: SlidingPaneLayout: um menu lateral estilo Facebook
Uma das coisas boas de mexer a muito tempo com uma tecnologia, é que as pessoas sempre perguntam a você, mas obviamente, nem sempre você sabe a resposta. Meu amigo Rodrigo Jardim (a.k.a. Praieiro), me perguntou se eu conhecia o SlidingPaneLayout, e eu nunca tinha visto o dito cujo. Mas ele permite implementarmos um padrão de interface gráfica amplamente utilizada nas aplicações Android: menus laterais. Abaixo, coloquei um screenshot de duas "pequenas" aplicações que usam essa abordagem.
Como podemos notar, o Facebook e o GMail são dois bons exemplos de grandes aplicações que usam essa abordagem. Nesse post vou mostrar como dar os primeiros passos para construir um menu desse tipo. Vamos começar pelo arquivo de layout da aplicação, mostrado abaixo.
android:id="@+id/left_pane"
<!-- Conteúdo da tela -->
android:id="@+id/rightPane"
android:background="#ff333333" >
android:text="MENU"
android:onClick="abrirMenu"/>
No SlidingPanelLayout temos apenas duas partes, a primeira (uma ListView) será o menu da aplicação. Enquanto que a segunda, será o conteúdo da tela em si. Abaixo temos o código da Activity.
implements OnItemClickListener, PanelSlideListener {
private SlidingPaneLayout mSlidingLayout;
// Colocando a Activity em tela cheia (opcional)
mSlidingLayout = (SlidingPaneLayout)
findViewById(R.id.sliding_pane_layout);
mSlidingLayout.setPanelSlideListener(this);
String[] opcoes = new String[] {
"Opção 1", "Opção 2", "Opção 3",
"Opção 4", "Opção 5" };
mList = (ListView) findViewById(R.id.left_pane);
mList.setAdapter(new ArrayAdapter<String>(
opcoes));
// Evento de clique do botão
public void abrirMenu(View v){
// Se estive aberto, feche. Senão abra.
if (mSlidingLayout.isOpen()){
mSlidingLayout.closePane();
mSlidingLayout.openPane();
// TODO Tratar opções de Menu (ListView) aqui!
// TODO Ao fechar o painel
// TODO Ao abrir o painel
// TODO Enquanto o painel desliza
O código acima é bem simples e está comentado.
O mais legal desse componente é que ao deslizar o dedo sobre a tela da esquerda para direita, o menu exibido (da direita para esquerda, ele fecha). Ou seja, o botão acima é opcional, mas indicado, como vemos nas aplicações em geral (como a do Facebook e Gmail) para facilitar a visualização do usuário.
Abaixo podemos ver nossa aplicações em execução com o menu lateral aberto.
É isso pessoal! Temos um menu no padrão de aplicações profissionais. Vale salientar que esse componente funciona em todas as versões do Android.
EDITADO em 29/11/2013
Várias pessoas me perguntaram (por email.... deixem os comentários aqui povo!) o que fazer com o clique do item da lista. O mais legal aqui é usar Fragments e sua stack. Ou seja, criar uma pilha de Fragments como o Android faz com as Activities. Ou seja, ao invés de irmos chamando Activities, chamamos Fragments e vamos empilhando-os no layout da direita.
Vamos ao exemplo... Crie a classe MeuFragment conforme abaixo:
public class MeuFragment extends Fragment {
public static MeuFragment newInstance(String s){
args.putString("texto", s);
MeuFragment f = new MeuFragment();
View layout = inflater.inflate(
R.layout.meu_fragment, container, false);
TextView txt = (TextView)
layout.findViewById(R.id.textView1);
txt.setText(getArguments().getString("texto"));
O arquivo de layout do Fragment acima, só tem um RelativeLayout com um TextView centralizado (nada de mais, vocês conseguem :)
Agora, no clique de cada um dos itens, instanciamos esse fragment passando o texto da opção clicada.
String opcao = (String)
mList.getAdapter().getItem(position);
MeuFragment f = MeuFragment.newInstance(opcao);
// Opcional: isso removerá o fragment anterior
// da pilha.
.replace(R.id.rightPane, f, "frag1")
O método addToBackStack vai adicionar o Fragment a uma pilha, dessa forma, ao clicar no botão back do aparelho, o fragment será removido automaticamente e anterior será exibido.
Fonte: http://androidtrainningcenter.blogspot.com.br/2013/06/slidingpanelayout-android-making.html
Postado por Nelson Glauber às 18:37
Marcadores: Android, Facebook, Gmail, Menu, SlidingPaneLayout, YouTube
É isso ai Galuber...ficou muito legal!
20 de junho de 2013 06:21
Esse glauber é um arrombado dos cavalos mesmo!
Pode ser dos póneis, que são menores? :)
26 de junho de 2013 04:04
Glauber! Obrigado pelo código!
Uma dúvida, nas opções do menu, eu tenho que usar a posição, certo? teria como você postar um exemplo usando esse menu, pra que a opção 5 seja o botão "sair" da aplicação? Seria de muita ajuda! Obrigado!
Não sei se entendi a dúvida, mas seria basicamente no onItemClick...
// Índice 4 = Opção 5
if (position == 4) finish();
19 de agosto de 2013 21:53
Ola muito bom amigo seu tutorial antes eu usava um framework mais esta solução e bem melhor um pergunra para colocar tb no lado esquerdo tipo tb nos dois lados como faria grato
10 de setembro de 2013 03:54
Glauber, Parabens pelos posts, vc eh fera...
seguinte, minha tela principal, eh um mapa, quando deslizo o mapa para a direita, ta abrindo o MENU. tem como deixar essa opção habilitada SOMENTE para quando o usuario clicar no botao? Obrigado!!
Nesse caso, acho melhor você colocar um botão ou algo para ativar o sliding.
22 de setembro de 2013 17:36
Como seria pra colocar uma imagem pra cada menu ?
7 de outubro de 2013 12:45
É normal a qualquer ListView. Você deve setar o adapter da ListView.
8 de outubro de 2013 11:36
Tem também outra biblioteca que é a SlidingMenu. Muito boa mesmo e bem mais simples de se utilizar, pois não é necessário ficar definindo o widget nos XML. Trabalha muito nem em conjunto com a Sherlock, e é bem pequena, apenas quatro classes. Gosto mais dela devido ao efeito final, que ao abrir o menu lateral também "empurra" a actionbar, isso a lib da Google não faz. Fica a dica.
3 de dezembro de 2013 02:19
Olá Glauber, existe também a biblioteca SlidingMenu. Na minha opinião é bem melhor que a da Google, pois além de não ser necessário definir o widget no XML, ela também "empurra" a actionbar. Fica a dica. Valeu.
3 de dezembro de 2013 02:21
Como eu faço para ativar o slidingmenulayout apenas por um botão específico e bloqueálo se o usuário arrastar na tela, pois estou usando uma map.
2 de abril de 2014 10:35
Na minha opinião, a melhor opção é o DrawerLayout...
Acho que isso resolve seu problema.
http://stackoverflow.com/questions/17025957/disable-gesture-listener-on-drawerlayout
Eu fiz tudo certinho aqui e tenho 5 opções no menu criado, e cada opção leva pra uma tela diferente. Como eu faria para associar cada item a tela correspondente?
Vlw, ótimo tutorial.
11 de junho de 2014 21:44
O ideal é carregar um fragment dinamicamente para cada opção do seu menu.
http://developer.android.com/guide/components/fragments.html#Adding
Se o fragmento aberto, precisar exibir mais detalhes, aí você abre outra Activity.
16 de junho de 2014 11:19
Como faço para cancelar o slider quando escorregar o dedo na tela, ou deixar somente ativo com o click do botão?