Beruflich Dokumente
Kultur Dokumente
En este tema vamos a crear un menú lateral que cumpla todo lo posible las
Dicha guía establece que el menú de navegación lateral debe pasar por
encima de la action bar y por debajo de la status bar (que será translúcida en
5.0 Lollipop (API 21), mientras que en versiones anteriores la status bar
actividad debemos hacer que el elemento raíz del layout XML sea del tipo
indicado):
llamarse ‘content.layout’.
• El layout del menú lateral, que entre otras cosas hará las veces de
(/res/layout/activity_main.xml):
1 <android.support.v4.widget.DrawerLayout
2 xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:tools="http://schemas.android.com/tools"
4 xmlns:app="http://schemas.android.com/apk/res-auto"
5 android:id="@+id/drawer_layout"
6 android:layout_width="match_parent"
7 android:layout_height="match_parent"
8 android:fitsSystemWindows="true"
9 tools:context=".MainActivity">
10
11 <!-- Layout real de la actividad -->
12 <include layout="@layout/content_layout" />
13
14 <!-- Layout del menú lateral (Navigation View) -->
15 <android.support.design.widget.NavigationView
16 android:id="@+id/navview"
17 android:layout_width="wrap_content"
18 android:layout_height="match_parent"
19 android:fitsSystemWindows="true"
20 android:layout_gravity="start"
21 app:headerLayout="@layout/header_navview"
22 app:menu="@menu/menu_navview" />
23
24 </android.support.v4.widget.DrawerLayout>
Varios detalles a destacar en el código anterior. En cuanto
componente:
peculiaridad.
posible. En este caso, para no complicar el ejemplo, vamos a utilizar tan sólo
una imagen de fondo y una etiqueta de texto, aunque aclarar que este layout
1
2
3
4
5
6
7 <FrameLayout
8 xmlns:android="http://schemas.android.com/apk/res/android"
9 android:layout_width="match_parent"
android:layout_height="match_parent">
1
0
<ImageView
1
android:layout_width="match_parent"
1
android:layout_height="200dp"
1
android:src="@drawable/navheader"
2
android:scaleType="centerCrop" />
1
3
<TextView
1
android:layout_width="wrap_content"
4
android:layout_height="wrap_content"
1 android:text="@string/usuario"
5 android:textAppearance="@style/TextAppearance.AppCompat.Large.Invers
1 e"
6 android:textStyle="bold"
1 android:layout_gravity="bottom"
7 android:layout_marginBottom="10dp"
1 android:layout_marginLeft="10dp" />
8 </FrameLayout>
1
9
2
0
2
1
Respecto al menú a utilizar, ya dijimos que se definirá utilizando la sintaxis
1 <menu xmlns:android="http://schemas.android.com/apk/res/android">
2 <group android:checkableBehavior="single">
3 <item
4 android:id="@+id/menu_seccion_1"
5 android:icon="@drawable/ic_menu"
6 android:title="@string/seccion_1"/>
7 <item
8 android:id="@+id/menu_seccion_2"
9 android:icon="@drawable/ic_menu"
10 android:title="@string/seccion_2"/>
11 <item
12 android:id="@+id/menu_seccion_3"
13 android:icon="@drawable/ic_menu"
14 android:title="@string/seccion_3"/>
15 </group>
16
17 <item
18 android:id="@+id/navigation_subheader"
19 android:title="@string/otras_opciones">
20 <menu>
21 <item
22 android:id="@+id/menu_opcion_1"
23 android:icon="@drawable/ic_menu"
24 android:title="@string/opcion_1"/>
25 <item
26 android:id="@+id/menu_opcion_2"
27 android:icon="@drawable/ic_menu"
28 android:title="@string/opcion_2"/>
29 </menu>
30 </item>
31 </menu>
Comentemos algunos detalles de la definición anterior. En primer lugar
pueda seleccionarse una de estas tres opciones al mismo tiempo (más tarde
forma de cabecera de sección dentro del menú, incluyendo incluso una línea
utilizaré un layout muy similar a los ya mostrados en los temas sobre la action
bar. Contendrá tan sólo un Toolbar, que estableceremos como action bar en
contenedor de los fragment que contendrán cada sección del menú lateral.
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical"
6 android:clickable="true"
7 tools:context=".MainActivity"
8 tools:showIn="@layout/activity_main">
9
10 <!-- Toolbar -->
11 <android.support.v7.widget.Toolbar
12 xmlns:app="http://schemas.android.com/apk/res-auto"
13 android:id="@+id/appbar"
14 android:layout_height="?attr/actionBarSize"
15 android:layout_width="match_parent"
16 android:minHeight="?attr/actionBarSize"
17 android:background="?attr/colorPrimary"
18 android:elevation="4dp"
19 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
20 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
21
22 <!-- Resto de la interfaz de usuario -->
23 <FrameLayout
24 android:id="@+id/content_frame"
25 android:layout_width="match_parent"
26 android:layout_height="match_parent" />
27
28 </LinearLayout>
Para que la toolbar se visualice correctamente habrá que definir por supuesto
o superior (API >= 21) debemos añadir a la definición del tema algunos
<resources>
1
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
2
<item name="colorPrimary">@color/colorPrimary</item>
3
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
4
<item name="colorAccent">@color/colorAccent</item>
5
6
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
7
<item
8 name="android:statusBarColor">@android:color/transparent</item>
9 </style>
10 </resources>
Definida la interfaz XML, nos centramos ya en la parte java de la actividad. En
cada una de las tres opciones del menú de navegación. En este paso no nos
vamos a complicar ya que no es el objetivo de este artículo. Voy a crear un
fragment por cada opción, que contenga tan sólo una etiqueta de texto
será tan simple y habrá que definir cada fragment para que se ajuste a las
necesidades de la aplicación.
<FrameLayout
1
xmlns:android="http://schemas.android.com/apk/res/android"
2
xmlns:tools="http://schemas.android.com/tools"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent"
5
tools:context="dam.miguel.android.a23navigationdrawer.Fragment1">
6
7
<TextView
8
android:layout_width="match_parent"
9 android:layout_height="match_parent"
10 android:text="@string/fragment1" />
11
12 </FrameLayout>
layout anterior:
1 import android.os.Bundle;
2 import android.support.v4.app.Fragment;
3 import android.view.LayoutInflater;
4 import android.view.View;
5 import android.view.ViewGroup;
6
7 public class Fragment1 extends Fragment {
8
9 public Fragment1() {
10 // Required empty public constructor
11 }
12
13 @Override
14 public View onCreateView(LayoutInflater inflater, ViewGroup container,
15 Bundle savedInstanceState) {
16 // Inflate the layout for this fragment
17 return inflater.inflate(R.layout.fragment_fragment1, container,
18 false);
19 }
}
Los dos fragments restantes serán completamente análogos al mostrado.
actividad principal.
1 drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
2 navView = (NavigationView)findViewById(R.id.navview);
3
4 navView.setNavigationItemSelectedListener(
5 new NavigationView.OnNavigationItemSelectedListener() {
6 @Override
7 public boolean onNavigationItemSelected(MenuItem menuItem) {
8
9 boolean fragmentTransaction = false;
10 Fragment fragment = null;
11
12 switch (menuItem.getItemId()) {
13 case R.id.menu_seccion_1:
14 fragment = new Fragment1();
15 fragmentTransaction = true;
16 break;
17 case R.id.menu_seccion_2:
18 fragment = new Fragment2();
19 fragmentTransaction = true;
20 break;
21 case R.id.menu_seccion_3:
22 fragment = new Fragment3();
23 fragmentTransaction = true;
24 break;
25 case R.id.menu_opcion_1:
26 Log.i("NavigationView", "Pulsada opción 1");
27 break;
28 case R.id.menu_opcion_2:
29 Log.i("NavigationView", "Pulsada opción 2");
30 break;
31 }
32
33 if(fragmentTransaction) {
34 getSupportFragmentManager().beginTransaction()
35 .replace(R.id.content_frame, fragment)
36 .commit();
37
38 menuItem.setChecked(true);
39 getSupportActionBar().setTitle(menuItem.getTitle());
40 }
41
42 drawerLayout.closeDrawers();
43
44 return true;
45 }
46 });
Comentemos un poco el código anterior.
Para las tres secciones principales lo que hacemos en primer lugar es crear
Por su parte, para las dos opciones finales del menú podemos realizar por
abrir una actividad independiente para mostrar una ayuda o las opciones de
la aplicación). En este caso de ejemplo nos limitamos a mostrar un mensaje
quedaría ajustar algunos detalles más para finalizar el trabajo. Los más
usuario abrirlo haciendo click en dicho icono (además del gesto de deslizar
dicha clase.
utilizado como ejemplo para este artículo (se llama ic_nav_menu, y debes
descargar el icono en todas sus resoluciones, desde las carpetas de
a setDisplayHomeAsUpEnabled().
1 @Override
2 protected void onCreate(Bundle savedInstanceState) {
3
4 //...
5
6 appbar = (Toolbar)findViewById(R.id.appbar);
7 setSupportActionBar(appbar);
8
9 getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_nav_menu);
10 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
11
12 //...
13 }
Adicionalmente, tendremos que capturar en el método
1 @Override
2 public boolean onOptionsItemSelected(MenuItem item) {
3
4 switch(item.getItemId()) {
5 case android.R.id.home:
6 drawerLayout.openDrawer(GravityCompat.START);
7 return true;
8 //...
9 }
10
11 return super.onOptionsItemSelected(item);
12 }
Llegados aquí, podemos ejecutar el proyecto y ver si todo funciona
anterior de este artículo (el menú se desliza por debajo de la status bar
@Override
public void onDrawerOpened(View drawerView) {
Cuando se abre el drawer
}
@Override
public void onDrawerClosed(View drawerView) {
Cuando se cierra el drawer
}
@Override
public void onDrawerStateChanged(int newState) {
Con cualquier cambio de estado
}});