DrawerLayout que llama un ListView en Android

Veremos un ejemplo de un DrawerLayout que llama un ListView para presentar una lista de datos. Además se explica cómo crear un Fragment, cómo hacer un Adapter que utilice ViewHolder para nuestro ListView.

El resultado deseado es el siguiente:

DrawerLayout que llama un ListView en Android

En el ejemplo anterior vimos cómo crear un DrawerLayout o menú que tenía algunas opciones. Una de esas opciones era Recetas. Al dar clic a esa opción deseamos que abra un listado de nombres de recetas. 

Consulta: Pasos para desarrollar un menú en una app Android

Si ya has realizado el ejemplo anterior, vamos a continuarlo.

DrawerLayout que llama un ListView 

Paso 1. Crear un nuevo Fragment

Da clic derecho sobre el package Fragments, luego en New -> Fragment – Fragment (Blank)

Escribe el nombre del Fragment (RecetasFragment) y elige las opciones que ves en la imagen. Esto nos crea dos archivos, un java y un XML. Vamos a abrir el XML que se llama fragment_recetas.

Paso 2. Añadir un ListView

Abre el archivo fragment_recetas.

Añadimos un componente ListView, desde código o desde la vista Diseño. El código queda como sigue:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.naps.gibgarcia.npsalud.Fragments.RecetasFragment">

    <!-- TODO: Update blank fragment layout -->

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

Paso 3. Crear el archivo list_item_recetas.xml

Éste archivo nos permite diseñar la forma en que se presentarán los datos dentro del ListView. En nuestro caso deseamos mostrar un icono que será el mismo para todos los elementos y el nombre de la receta.

Da clic derecho sobre layout y selecciona New -> Layout resource file. Escribe el nombre del archivo: list_item_recetas de tipo LinearLayout.

El código de este archivo será el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="30dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="15dp"
        android:alpha="0.6"
        app:srcCompat="@drawable/ic_item_receta2" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textColor="#333"
        android:layout_gravity="center_vertical"
        android:text="TextView" />

</LinearLayout>

Añadimos el icono en un elemento ImageView, descargandolo y copiandolo sobre drawable. Ajustamos su valor de alpha para que no sea completamente de color negro, sino que tenga cierta transparencia. Puedes ajustar éste valor como gustes.

Paso 4. Crear un ArrayList y enlazarlo con el ListView

Abre el archivo RecetasFragment.java

Agrega las siguientes variables:

private ListView listview;
private ArrayList<String> names;
private RecetasAdapter myAdapter;

En el método onCreateView agrega el siguiente código: 

View view = inflater.inflate(R.layout.fragment_recetas, container, false);
listview = (ListView) view.findViewById(R.id.listview);

names = new ArrayList<String>();
names.add("Consomé de verduras");
names.add("Atún con lechuga");
names.add("Quesadilla");
names.add("Filete de pescado");
names.add("Ensalada");
names.add("Sandwich de pollo");
names.add("Brochetas de pollo");
names.add("Rollitos de jamón con queso");
names.add("Consomé de pollo");
names.add("Sopa de calabaza");
names.add("Sopa de verduras");
names.add("Espaguetti entomatado");

myAdapter = new RecetasAdapter(getContext(), R.layout.list_item_recetas, names);
listview.setAdapter(myAdapter);

return view;

Nota que se modificó la línea que venía incluída.

Éste código hace referencia a una clase RecetasAdapter que vamos a crear a continuación.

Paso 5. Crear RecetasAdapter

Éste adapter nos permitirá utilizar un diseño propio (en nuestro caso deseamos que se vea un icono a la izquierda y el nombre de la receta a la derecha), además, podremos utilizar el modelo ViewHolder para optimizar el rendimiento de la aplicación. 

Da clic derecho sobre el package Adapters, luego en New -> Java Class. Escribe el nombre de la clase RecetasAdapter como se ve a continuación:

El código completo de la clase es el siguiente:

public class RecetasAdapter extends BaseAdapter {

    private Context context;
    private int layout;
    private ArrayList<String> names;

    public RecetasAdapter(Context context, int layout, ArrayList<String> names){
        this.context = context;
        this.layout = layout;
        this.names = names;
    }

    @Override
    public int getCount() {
        return this.names.size();
    }

    @Override
    public Object getItem(int position) {
        return this.names.get(position);
    }

    @Override
    public long getItemId(int id) {
        return id;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {
        ViewHolder holder;
        if (convertView == null){
            //Inflamos la vista con nuestro propio layout
            LayoutInflater layoutInflater = LayoutInflater.from(this.context);
            convertView = layoutInflater.inflate(R.layout.list_item_recetas, null);
            holder = new ViewHolder();
            // Referenciamos el elemento a modificar y lo rellenamos
            holder.nameTextView = (TextView) convertView.findViewById(R.id.textView);
            convertView.setTag(holder);
        }
        else{
            holder = (ViewHolder) convertView.getTag();
        }

        // Valor actual según la posición
        String currentName  = names.get(position);
        holder.nameTextView.setText(currentName);

        //Devolvemos la vista inflada
        return convertView;
    }

    static class ViewHolder{
        private TextView nameTextView; // Solo tenemos un textview
    }
}

Nota que en la definición de la clase RecetasAdapter se agrega extends BaseAdapter, pues es la clase de la que heredamos.

Paso 6. Crear un Listener para el item Recetas del navigationView

Abre el archivo MainActivity.java y busca la línea navigationView = (NavigationView)findViewById(R.id.navview);

Debajo de esa línea vamos a agregar un Listener (un método para detectar cuando se ha hecho clic sobre una opción del menú).

Deberás agregar éste código:

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Fragment fragment = null;
                boolean fragmentTransaction = false;

                switch (item.getItemId()){
                    case R.id.menu_recetas:
                        fragment = new RecetasFragment();
                        fragmentTransaction = true;
                        break;
                }

                if (fragmentTransaction){
                    changeFragment (fragment , item );
                    drawerLayout.closeDrawers();
                }
                return true;
            }
        });

Si ya tenías el código del listener, solo deberás agregar las líneas: 

case R.id.menu_recetas:

                        fragment = new RecetasFragment();

                        fragmentTransaction = true;

                        break;

Paso 7. Crear el método changeFragment 

Éste método nos permitirá reemplazar los fragments que necesitemos. El código va en MainActivity.java y es el siguiente:

    private void changeFragment( Fragment fragment, MenuItem item){
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.content_frame, fragment)
                .commit();
        item.setChecked(true);
        getSupportActionBar().setTitle(item.getTitle());
    }

Puedes comprobar que ahora disponemos de un DrawerLayout que llama un ListView y muestra sus datos.

Referencias

1. Android Developers (2019). Fragment. Disponible en [https://developer.android.com/reference/android/app/Fragment] Consultado el [3-Jul-2019].

Tu comentario

opiniones