Material Goodies – Navigation View

Standard

Hello Malta, espero que estejam bem e dando os toques extra do material design as vossas apps. No post anterior onde comecei a serie Material Goodies, anunciei que re-escreveria o post onde falava sobre o tinting de drawables e o navigation drawer. O motivo que me leva a escrever este novo post, é que com a introdução da design support library, o post anterior fica mesmo a servir de exemplo para quem queira saber como cada parte do Navigation drawer foi feita  e como fazer o Tint (Mudar a cor durante a execução da app ) de drawables que será útil em outras aplicações. Antes do release do Navigation View, uma das formas mais fáceis de implementar o Navigation drawer era através da biblioteca criada pelo grande desenvolvedor Rudson Lima  que pode ser encontrada AQUI

Neste post, iremos ver sobre como utilizar o Navigation View disponível na desing support library para colocar um navigation drawer na nossa app de forma muito simples.

Para começar vamos criar um projecto normalmente como vimos aqui. Com o projecto criado, a primeira coisa que temos de fazer e ir ao ficheiro build.gradle dentro do modulo “app” e adicionar a dependência da design support library adicionando a seguinte linha a secção dependencies:

compile 'com.android.support:design:22.2.0'

De seguida, vamos abrir o ficheiro activity_main.xml e dentro dele colocar colocar os seguinte código :

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true">

    <!-- your content layout -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/container"
            />

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar"
            android:background="?attr/colorPrimary"
            />
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header_layout"
        app:menu="@menu/drawer_menu"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        />

</android.support.v4.widget.DrawerLayout>

Indo para os detalhes do ficheiro do layout acima,  podemos notar que ele tem como parent o DrawerLayout para que possamos fazer o slide in/ out do navigation drawer. Esta parte não vem como nenhuma novidade e sempre que for preciso utilizar o navigation drawer, o parent do layout principal tem de ser um DrawerLayout.

Dentro  do Drawer layout, temos dois filhos (childrens) onde um representa o que contem o conteudo da nossa activity neste exemplo representado por um FrameLayout que contem uma Toolbar e um outro FrameLayout para que possamos trocar fragments durante o tempo de execução e o outro , o navigation view que representa o nosso navigation drawer.

O Navigation View permite criar um Navigation Drawer sem envolver codigo java, bastando seguir os seguintes passos:

  1. Criar um ficheiro de menu dentro do directório res->menu que ira conter as opções que queremos  ter no Navigation Drawer. drawer_menu.xml
  2. definir que o navigation drawer ira mostrar os items no ficheiro criado no passo anteriror ao adicionar o atributo app:menu ao navigation view.
  3. (Opcional) criar um layout para o header do navigation drawer e definir no navigation drawer pelo atributo app:headerLayout. drawer_header_layout

E prontos. Em 3 passos ficamos com o Navigation drawer todo bonitinho e prontos para passar para a fase seguinte que e dar a vida a cada item clicado e colocar o indicador do navigation drawer no Toolbar.

Para esta ultima parte do tutorial , devemos abrir a class MainActivity e copiar o seguinte método que será invocado assim que a activity e criada no onCreate logo depois do metodo setContentView() :

public void setUpDrawerAndToolbar(){
    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    mToolbar.setTitle("Material Goodies");
    mToolbar.setNavigationIcon(R.drawable.ic_action_menu);
    mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
    mToolbar.setNavigationOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            mDrawerLayout.openDrawer(GravityCompat.START);
        }
    });

    mNavigationView = (NavigationView)findViewById(R.id.navigation_view);
    mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {

            int id = menuItem.getItemId();
            selecteOption(id);
            return false;
        }
    });
}
public void selecteOption( int id){

    String selectionTitle = "";
    switch (id){
        case R.id.action_first_choice:{
            selectionTitle = "First Choice";
            break;
        }
        case R.id.action_second_choice: {
            selectionTitle = "Second Choice";
            break;
        }
        case R.id.action_third_choice:{
            selectionTitle = "Third Choice";
            break;
        }
    }

    Toast.makeText(this,"Item clicado: "+selectionTitle,Toast.LENGTH_SHORT).show();
}

O primeiro método setUpDrawerAndToolbar é bastante simples e o que ele faz é:

  • pegar o Toolbar pelo Id definido no activity_main.xml
  • definir o titulo
  • Definir o navigation icon passando um drawable que neste caso e o icon do indicador do navigation drawer. Nota: Em casos  em que nossa activity tem um parent podemos definir de igual forma o icon da setinha que indica que podemos voltar para nossa parent Activity.
  • Pegar o DrawerLayout pelo id.
  • Definir um listener que ficara a espera de eventos de click no indicador para mostrar o navigation drawer.
  • Pegar o NavigationView pelo Id.
  • Definir um listener que fica a espera de eventos de clique em cada item do Menu representado pelo MenuItem. Para poder saber que item foi seleccionado, devemos pegar o id do menuItem seleccionado e depois comparar com os ids que nos definimos no xml como mostra a seguinte linha
    int id = menuItem.getItemId();

e o método selectOption que recebe um id e faz o switch case para encontrar o item clicado.

Deste modo, chegamos ao fim de mais um post do Material Goodies e de forma muito rápida e simples foi implementado o Navigation Drawer utilizando o Navigation View.

Obrigado e ate a próxima Malta 🙂

MG – Navigation View(Código)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s