Tutorial de ejemplo del cajón de navegación de Android

En este tutorial, implementaremos un cajón de navegación en nuestra aplicación de Android . El cajón de navegación de Android es un menú deslizante y es un componente importante de la interfaz de usuario. Verá el cajón de navegación en la mayoría de las aplicaciones de Android, es como las barras de menú de navegación en los sitios web.

Cajón de navegación de Android

El cajón de navegación de Android es un menú deslizante hacia la izquierda que se utiliza para mostrar los enlaces importantes de la aplicación. El cajón de navegación facilita la navegación entre esos enlaces. No está visible de forma predeterminada y debe abrirse deslizándose desde la izquierda o haciendo clic en su icono en la barra de acciones. En términos más generales, el cajón de navegación es un panel superpuesto que reemplaza a una pantalla de actividades que se dedicó específicamente a mostrar todas las opciones y enlaces de la aplicación. En este tutorial del cajón de navegación de Android, implementaremos el cajón de navegación utilizando la API de diseño de cajón presente en la biblioteca de soporte de Android. Mostraremos 3 vistas de fragmentos que se pueden abrir desde los elementos del cajón.

Estructura del proyecto del cajón de navegación de Android

Ejemplo de cajón de navegación de Android

Para implementar el cajón de navegación primero debemos agregarlo android.support.v4.widget.DrawerLayoutcomo raíz del diseño de la actividad como se muestra a continuación.activity_main.xml

android.support.v4.widget.DrawerLayout     xmlns_android="https://schemas.android.com/apk/res/android"    android_id="@+id/drawer_layout"    android_layout_width="match_parent"    android_layout_height="match_parent"     LinearLayout        android_layout_width="match_parent"        android_layout_height="match_parent"        android_orientation="vertical"    LinearLayout        android_id="@+id/container_toolbar"        android_layout_width="match_parent"        android_layout_height="wrap_content"        android_orientation="vertical"        include            android_id="@+id/toolbar"            layout="@layout/toolbar" /    /LinearLayout    FrameLayout        android_id="@+id/content_frame"        android_layout_width="match_parent"        android_layout_height="match_parent" /    /LinearLayout    ListView        android_id="@+id/left_drawer"        android_layout_width="240dp"        android_layout_height="match_parent"        android_layout_gravity="start"        android_background="#FFFFFF"        android_choiceMode="singleChoice"        android_divider="@android:color/darker_gray"        android_dividerHeight="1dp" //android.support.v4.widget.DrawerLayout

Las opciones de menú en el cajón de navegación se almacenan en forma de ListView. Cada opción se abre en FrameLayout. Aquí hemos utilizado una barra de herramientas en lugar de una barra de acciones . La barra de herramientas se introdujo desde Android 5.0 como una generalización de la barra de acciones. Nos brinda más control y flexibilidad para modificar y es más fácil de intercalar con otras vistas en la jerarquía. El diseño de la barra de herramientas se define en el diseño xml que se muestra a continuación.toolbar.xml

android.support.v7.widget.Toolbar xmlns_android="https://schemas.android.com/apk/res/android"    xmlns_local="https://schemas.android.com/apk/res-auto"    android_id="@+id/toolbar"    android_layout_width="match_parent"    android_layout_height="wrap_content"    android_minHeight="?attr/actionBarSize"    android_background="?attr/colorPrimary"    local_theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    local_popupTheme="@style/ThemeOverlay.AppCompat.Light" /

Necesitamos usar el tema Theme.AppCompat.NoActionBaren el archivo styles.xml cuando usamos barras de herramientas. El diseño de las filas de ListView en el panel de navegación se muestra a continuación.list_view_item_row.xml

RelativeLayout xmlns_android="https://schemas.android.com/apk/res/android"    android_layout_width="match_parent"    android_layout_height="wrap_content"    android_background="?android:attr/activatedBackgroundIndicator"    android_minHeight="?android:attr/listPreferredItemHeightSmall"    android_padding="10dp"     ImageView        android_id="@+id/imageViewIcon"        android_layout_width="wrap_content"        android_layout_height="wrap_content"        android_layout_alignParentLeft="true"        android_layout_alignParentTop="true"        android_paddingRight="10dp" /    TextView        android_id="@+id/textViewName"        android_layout_width="wrap_content"        android_layout_height="wrap_content"        android_layout_centerVertical="true"        android_layout_toRightOf="@+id/imageViewIcon"        android_paddingRight="10dp"        android_text="Item Name"        android_textColor="@android:color/black"        android_textAppearance="?android:attr/textAppearanceListItemSmall"        //RelativeLayout

Los elementos del cajón de navegación se colocan en una matriz de cadenas en el archivo strings.xml como se muestra a continuación.strings.xml

string-array name="navigation_drawer_items_array"        itemConnect/item        itemFixtures/item        itemTable/item    /string-array

La clase DataModel.java se utiliza para definir los objetos para los elementos de la lista del cajón.DataModel.java

package com.journaldev.navigationdrawer;public class DataModel {    public int icon;    public String name;    // Constructor.    public DataModel(int icon, String name) {        this.icon = icon;        this.name = name;    }}

Los elementos del cajón se almacenan en forma de ListView. Por lo tanto, necesitamos utilizar una clase adaptadora para proporcionar esos datos a la clase de actividad.DrawerItemCustomAdapter.java

package com.journaldev.navigationdrawer;import android.app.Activity;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView;public class DrawerItemCustomAdapter extends ArrayAdapterDataModel {    Context mContext;    int layoutResourceId;    DataModel data[] = null;    public DrawerItemCustomAdapter(Context mContext, int layoutResourceId, DataModel[] data) {        super(mContext, layoutResourceId, data);        this.layoutResourceId = layoutResourceId;        this.mContext = mContext;        this.data = data;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        View listItem = convertView;        LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();        listItem = inflater.inflate(layoutResourceId, parent, false);        ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);        TextView textViewName = (TextView) listItem.findViewById(R.id.textViewName);        DataModel folder = data[position];        imageViewIcon.setImageResource(folder.icon);        textViewName.setText(folder.name);        return listItem;    }}

El código fuente de MainActivity.java se proporciona a continuación.MainActivity.java

package com.journaldev.navigationdrawer;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.util.Log;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.ListView;public class MainActivity extends AppCompatActivity {    private String[] mNavigationDrawerItemTitles;    private DrawerLayout mDrawerLayout;    private ListView mDrawerList;    Toolbar toolbar;    private CharSequence mDrawerTitle;    private CharSequence mTitle;    android.support.v7.app.ActionBarDrawerToggle mDrawerToggle;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mTitle = mDrawerTitle = getTitle();        mNavigationDrawerItemTitles= getResources().getStringArray(R.array.navigation_drawer_items_array);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        mDrawerList = (ListView) findViewById(R.id.left_drawer);        setupToolbar();        DataModel[] drawerItem = new DataModel[3];        drawerItem[0] = new DataModel(R.drawable.connect, "Connect");        drawerItem[1] = new DataModel(R.drawable.fixtures, "Fixtures");        drawerItem[2] = new DataModel(R.drawable.table, "Table");        getSupportActionBar().setDisplayHomeAsUpEnabled(false);        getSupportActionBar().setHomeButtonEnabled(true);        DrawerItemCustomAdapter adapter = new DrawerItemCustomAdapter(this, R.layout.list_view_item_row, drawerItem);        mDrawerList.setAdapter(adapter);        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        mDrawerLayout.setDrawerListener(mDrawerToggle);        setupDrawerToggle();    }    private class DrawerItemClickListener implements ListView.OnItemClickListener {        @Override        public void onItemClick(AdapterView? parent, View view, int position, long id) {            selectItem(position);        }    }    private void selectItem(int position) {        Fragment fragment = null;        switch (position) {            case 0:                fragment = new ConnectFragment();                break;            case 1:                fragment = new FixturesFragment();                break;            case 2:                fragment = new TableFragment();                break;            default:                break;        }        if (fragment != null) {            FragmentManager fragmentManager = getSupportFragmentManager();            fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();            mDrawerList.setItemChecked(position, true);            mDrawerList.setSelection(position);            setTitle(mNavigationDrawerItemTitles[position]);            mDrawerLayout.closeDrawer(mDrawerList);        } else {            Log.e("MainActivity", "Error in creating fragment");        }    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        if (mDrawerToggle.onOptionsItemSelected(item)) {            return true;        }        return super.onOptionsItemSelected(item);    }    @Override    public void setTitle(CharSequence title) {        mTitle = title;        getSupportActionBar().setTitle(mTitle);    }    @Override    protected void onPostCreate(Bundle savedInstanceState) {        super.onPostCreate(savedInstanceState);        mDrawerToggle.syncState();    }    void setupToolbar(){        toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        getSupportActionBar().setDisplayShowHomeEnabled(true);    }    void setupDrawerToggle(){        mDrawerToggle = new android.support.v7.app.ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.app_name, R.string.app_name);        //This is necessary to change the icon of the Drawer Toggle upon state change.        mDrawerToggle.syncState();    }}

En el código anterior getSupportActionBar().setDisplayHomeAsUpEnabled(false);se utiliza para ocultar el botón Atrás predeterminado. En este código, hemos utilizado una DrawerItemClickListenerclase que carga el fragmento correspondiente del elemento de la lista en el que se hizo clic mediante un FragmentManager. Además, el título de la barra de herramientas se cambia al elemento de la lista en el que se hizo clic mediante setTitle(mNavigationDrawerItemTitles[position]);. Las clases de fragmentos y sus respectivos diseños se muestran a continuación.ConnectFragment.java

package com.journaldev.navigationdrawer;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class ConnectFragment extends Fragment {    public ConnectFragment() {    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View rootView = inflater.inflate(R.layout.fragment_connect, container, false);        return rootView;    }}

La disposición del fragmento anterior se define a continuación.fragment_connect.xml

RelativeLayout xmlns_android="https://schemas.android.com/apk/res/android"    xmlns_tools="https://schemas.android.com/tools"    android_layout_width="match_parent"    android_layout_height="match_parent"    android_orientation="vertical"    TextView        android_id="@+id/label"        android_layout_alignParentTop="true"        android_layout_marginTop="100dp"        android_layout_width="fill_parent"        android_layout_height="wrap_content"        android_gravity="center_horizontal"        android_textSize="45dp"        android_text="Connect"        android_textStyle="bold"/    TextView        android_layout_below="@id/label"        android_layout_centerInParent="true"        android_layout_width="fill_parent"        android_layout_height="wrap_content"        android_textSize="12dp"        android_layout_marginTop="10dp"        android_gravity="center_horizontal"        android_text="Edit fragment_connect.xml to change the appearance"        android_id="@+id/textView2" //RelativeLayout

Los otros dos elementos se definen exactamente de la misma manera que el anterior, por lo tanto, los omitiremos aquí.

Ejemplo de salida del cajón de navegación de Android

A continuación se muestra el resultado generado por nuestra aplicación de ejemplo de cajón de navegación para Android. Con esto finaliza el tutorial de ejemplo de cajón de navegación para Android. Puede descargar el proyecto final de cajón de navegación para Android desde el siguiente enlace.

Descargar proyecto de ejemplo de cajón de navegación de Android