{"id":1856,"date":"2019-07-03T12:40:54","date_gmt":"2019-07-03T17:40:54","guid":{"rendered":"https:\/\/naps.com.mx\/blog\/?p=1856"},"modified":"2019-11-14T12:58:59","modified_gmt":"2019-11-14T18:58:59","slug":"drawerlayout-que-llama-un-listview-en-android","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/drawerlayout-que-llama-un-listview-en-android\/","title":{"rendered":"DrawerLayout que llama un ListView en Android"},"content":{"rendered":"

Veremos un ejemplo de un DrawerLayout que llama un ListView para presentar una lista de datos. Adem\u00e1s se explica c\u00f3mo crear un Fragment, c\u00f3mo hacer un Adapter que utilice ViewHolder para nuestro ListView.<\/p>\n

\u00a0<\/span><\/p>\n

El resultado deseado es el siguiente:<\/p>\n

\"DrawerLayout<\/a>

DrawerLayout que llama un ListView en Android<\/p><\/div>\n

En el ejemplo anterior vimos c\u00f3mo crear un DrawerLayout o men\u00fa que ten\u00eda algunas opciones. Una de esas opciones era Recetas. Al dar clic a esa opci\u00f3n deseamos que abra un listado de nombres de recetas.\u00a0<\/span><\/p>\n

Consulta: Pasos para desarrollar un men\u00fa en una app Android<\/a><\/strong><\/p>\n

Si ya has realizado el ejemplo anterior, vamos a continuarlo.<\/p>\n

DrawerLayout que llama un ListView\u00a0<\/span><\/h2>\n

Paso 1. Crear un nuevo Fragment<\/h3>\n

Da clic derecho sobre el package Fragments, luego en New -> Fragment – Fragment (Blank)<\/p>\n

\"Crear<\/a><\/p>\n

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.<\/p>\n

Paso 2. A\u00f1adir un ListView<\/h3>\n

Abre el archivo fragment_recetas.<\/p>\n

A\u00f1adimos un componente ListView, desde c\u00f3digo o desde la vista Dise\u00f1o. El c\u00f3digo queda como sigue:<\/p>\n

<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"com.naps.gibgarcia.npsalud.Fragments.RecetasFragment\">\r\n\r\n    <!-- TODO: Update blank fragment layout -->\r\n\r\n    <ListView\r\n        android:id=\"@+id\/listview\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\" \/>\r\n\r\n<\/FrameLayout><\/pre>\n
Paso 3. Crear el archivo list_item_recetas.xml<\/h3>\n
\u00c9ste archivo nos permite dise\u00f1ar la forma en que se presentar\u00e1n los datos dentro del ListView. En nuestro caso deseamos mostrar un icono que ser\u00e1 el mismo para todos los elementos y el nombre de la receta.<\/p>\n
Da clic derecho sobre layout y selecciona New -> Layout resource file. Escribe el nombre del archivo: list_item_recetas de tipo LinearLayout.<\/p>\n
El c\u00f3digo de este archivo ser\u00e1 el siguiente:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:orientation=\"horizontal\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"30dp\">\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/imageView\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"center_vertical\"\r\n        android:layout_margin=\"15dp\"\r\n        android:alpha=\"0.6\"\r\n        app:srcCompat=\"@drawable\/ic_item_receta2\" \/>\r\n\r\n    <TextView\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_weight=\"1\"\r\n        android:textColor=\"#333\"\r\n        android:layout_gravity=\"center_vertical\"\r\n        android:text=\"TextView\" \/>\r\n\r\n<\/LinearLayout><\/pre>\n
A\u00f1adimos 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 \u00e9ste valor como gustes.<\/p>\n
Paso 4. Crear un ArrayList y enlazarlo con el ListView<\/h3>\n
Abre el archivo RecetasFragment.java<\/p>\n
Agrega las siguientes variables:<\/p>\n
private ListView listview;\r\nprivate ArrayList<String> names;\r\nprivate RecetasAdapter myAdapter;<\/pre>\n
En el m\u00e9todo onCreateView agrega el siguiente c\u00f3digo:\u00a0<\/span><\/p>\n
View view = inflater.inflate(R.layout.fragment_recetas, container, false);\r\nlistview = (ListView) view.findViewById(R.id.listview);\r\n\r\nnames = new ArrayList<String>();\r\nnames.add(\"Consom\u00e9 de verduras\");\r\nnames.add(\"At\u00fan con lechuga\");\r\nnames.add(\"Quesadilla\");\r\nnames.add(\"Filete de pescado\");\r\nnames.add(\"Ensalada\");\r\nnames.add(\"Sandwich de pollo\");\r\nnames.add(\"Brochetas de pollo\");\r\nnames.add(\"Rollitos de jam\u00f3n con queso\");\r\nnames.add(\"Consom\u00e9 de pollo\");\r\nnames.add(\"Sopa de calabaza\");\r\nnames.add(\"Sopa de verduras\");\r\nnames.add(\"Espaguetti entomatado\");\r\n\r\nmyAdapter = new RecetasAdapter(getContext(), R.layout.list_item_recetas, names);\r\nlistview.setAdapter(myAdapter);\r\n\r\nreturn view;<\/pre>\n
Nota que se modific\u00f3 la l\u00ednea que ven\u00eda inclu\u00edda.<\/p>\n
\u00c9ste c\u00f3digo hace referencia a una clase RecetasAdapter que vamos a crear a continuaci\u00f3n.<\/p>\n
Paso 5. Crear RecetasAdapter<\/h3>\n
\u00c9ste adapter nos permitir\u00e1 utilizar un dise\u00f1o propio (en nuestro caso deseamos que se vea un icono a la izquierda y el nombre de la receta a la derecha), adem\u00e1s, podremos utilizar el modelo ViewHolder para optimizar el rendimiento de la aplicaci\u00f3n.\u00a0<\/span><\/p>\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\u00f3n:<\/p>\n
\"\"<\/a><\/p>\n
El c\u00f3digo completo de la clase es el siguiente:<\/p>\n
public class RecetasAdapter extends BaseAdapter {\r\n\r\n    private Context context;\r\n    private int layout;\r\n    private ArrayList<String> names;\r\n\r\n    public RecetasAdapter(Context context, int layout, ArrayList<String> names){\r\n        this.context = context;\r\n        this.layout = layout;\r\n        this.names = names;\r\n    }\r\n\r\n    @Override\r\n    public int getCount() {\r\n        return this.names.size();\r\n    }\r\n\r\n    @Override\r\n    public Object getItem(int position) {\r\n        return this.names.get(position);\r\n    }\r\n\r\n    @Override\r\n    public long getItemId(int id) {\r\n        return id;\r\n    }\r\n\r\n    @Override\r\n    public View getView(int position, View convertView, ViewGroup viewGroup) {\r\n        ViewHolder holder;\r\n        if (convertView == null){\r\n            \/\/Inflamos la vista con nuestro propio layout\r\n            LayoutInflater layoutInflater = LayoutInflater.from(this.context);\r\n            convertView = layoutInflater.inflate(R.layout.list_item_recetas, null);\r\n            holder = new ViewHolder();\r\n            \/\/ Referenciamos el elemento a modificar y lo rellenamos\r\n            holder.nameTextView = (TextView) convertView.findViewById(R.id.textView);\r\n            convertView.setTag(holder);\r\n        }\r\n        else{\r\n            holder = (ViewHolder) convertView.getTag();\r\n        }\r\n\r\n        \/\/ Valor actual seg\u00fan la posici\u00f3n\r\n        String currentName  = names.get(position);\r\n        holder.nameTextView.setText(currentName);\r\n\r\n        \/\/Devolvemos la vista inflada\r\n        return convertView;\r\n    }\r\n\r\n    static class ViewHolder{\r\n        private TextView nameTextView; \/\/ Solo tenemos un textview\r\n    }\r\n}\r\n<\/pre>\n
Nota que en la definici\u00f3n de la clase RecetasAdapter se agrega extends BaseAdapter, pues es la clase de la que heredamos.<\/p>\n
Paso 6. Crear un Listener para el item Recetas del navigationView<\/h3>\n
Abre el archivo MainActivity.java y busca la l\u00ednea navigationView = (NavigationView)findViewById(R.id.navview);<\/strong><\/p>\n
Debajo de esa l\u00ednea vamos a agregar un Listener (un m\u00e9todo para detectar cuando se ha hecho clic sobre una opci\u00f3n del men\u00fa).<\/p>\n
Deber\u00e1s agregar \u00e9ste c\u00f3digo:<\/p>\n
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {\r\n            @Override\r\n            public boolean onNavigationItemSelected(@NonNull MenuItem item) {\r\n                Fragment fragment = null;\r\n                boolean fragmentTransaction = false;\r\n\r\n                switch (item.getItemId()){\r\n                    case R.id.menu_recetas:\r\n                        fragment = new RecetasFragment();\r\n                        fragmentTransaction = true;\r\n                        break;\r\n                }\r\n\r\n                if (fragmentTransaction){\r\n                    changeFragment (fragment , item );\r\n                    drawerLayout.closeDrawers();\r\n                }\r\n                return true;\r\n            }\r\n        });<\/pre>\n
 <\/p>\n
Si ya ten\u00edas el c\u00f3digo del listener, solo deber\u00e1s agregar las l\u00edneas:\u00a0<\/span><\/p>\n
case R.id.menu_recetas:<\/strong><\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>fragment = new RecetasFragment();<\/strong><\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>fragmentTransaction = true;<\/strong><\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>break;<\/strong><\/p>\n
Paso 7. Crear el m\u00e9todo changeFragment\u00a0<\/span><\/h3>\n
\u00c9ste m\u00e9todo nos permitir\u00e1 reemplazar los fragments que necesitemos. El c\u00f3digo va en MainActivity.java y es el siguiente:<\/p>\n
    private void changeFragment( Fragment fragment, MenuItem item){\r\n        getSupportFragmentManager()\r\n                .beginTransaction()\r\n                .replace(R.id.content_frame, fragment)\r\n                .commit();\r\n        item.setChecked(true);\r\n        getSupportActionBar().setTitle(item.getTitle());\r\n    }\r\n<\/pre>\n
Puedes comprobar que ahora disponemos de un DrawerLayout que llama un ListView y muestra sus datos.<\/p>\n
Referencias<\/h3>\n
    \n
  1. Android Developers (2019). Fragment<\/a>.<\/strong> Disponible en [https:\/\/developer.android.com\/reference\/android\/app\/Fragment] Consultado el [3-Jul-2019].<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Veremos un ejemplo de un DrawerLayout que llama un ListView para presentar una lista de datos. Adem\u00e1s se explica c\u00f3mo crear un Fragment, c\u00f3mo hacer un Adapter que utilice ViewHolder para nuestro ListView. \u00a0<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[234,55],"tags":[198,235,256,260,238,255],"class_list":["post-1856","post","type-post","status-publish","format-standard","hentry","category-aplicaciones-moviles","category-programacion-y-desarrollo","tag-android","tag-desarrollo-de-aplicaciones-moviles","tag-drawerlayout","tag-fragments","tag-listview","tag-menus"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1856"}],"version-history":[{"count":6,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1856\/revisions"}],"predecessor-version":[{"id":1894,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1856\/revisions\/1894"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}