{"id":1610,"date":"2018-10-10T11:55:55","date_gmt":"2018-10-10T16:55:55","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=1610"},"modified":"2019-06-16T23:52:34","modified_gmt":"2019-06-17T04:52:34","slug":"uso-de-un-listview-en-android","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/uso-de-un-listview-en-android\/","title":{"rendered":"Uso de un ListView en Android para mostrar una lista de datos"},"content":{"rendered":"

Un ListView en Android es un objeto que nos permite mostrar una lista de elementos desplazables.\u00a0Veamos ejemplo de c\u00f3mo construirlo paso a paso.<\/span><\/strong><\/em><\/p>\n

<\/p>\n

En el siguiente ejemplo deseamos mostrar una lista compuesta por\u00a0 <\/span>5 estados de M\u00e9xico utilizando un ListView<\/strong><\/em> en Android.<\/p>\n

ListView<\/em> que muestra una lista de datos est\u00e1ticos<\/h2>\n

Paso 1<\/strong>. Crea un proyecto nuevo.<\/p>\n

Paso 2<\/strong>. Coloca un ListView usando la vista Dise\u00f1o.<\/p>\n

\"ListView<\/a>

ListView en Android<\/p><\/div>\n

Paso 3<\/strong>.\u00a0 <\/span>Crea las variables a utilizar<\/p>\n

Entre ellas, una variable de tipo ListView<\/strong><\/em> (en MainActivity<\/strong><\/em>)<\/p>\n

private ListView listview;\r\nprivate ArrayList<String> names;<\/pre>\n
Paso 4<\/strong>. Enlazar<\/p>\n
Enlaza la variable anterior con el elemento ListView<\/strong><\/em> de la vista Dise\u00f1o.\u00a0<\/span><\/p>\n
listview = (ListView) findViewById(R.id.listview);<\/pre>\n
Paso 5<\/strong>. Coloca los datos que quieras mostrar en un Array de Strings<\/p>\n
names = new ArrayList<String>(); \u00a0 \u00a0 \u00a0 \u00a0 \r\nnames.add(\"Veracruz\"); \u00a0 \u00a0 \u00a0 \u00a0 \r\nnames.add(\"Tabasco\"); \u00a0 \u00a0 \u00a0 \u00a0 \r\nnames.add(\"Chiapas\"); \u00a0 \u00a0 \u00a0 \u00a0 \r\nnames.add(\"Campeche\"); \u00a0 \u00a0 \u00a0 \u00a0 \r\nnames.add(\"Quintana Roo\u201d);<\/pre>\n
 <\/p>\n
Paso 6<\/strong>. Crea un adaptador y agr\u00e9gale la variable de Strings.<\/p>\n
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, names);\r\n<\/pre>\n
Paso 7<\/strong>. Indica que el listview utilizar\u00e1 ese adaptador.<\/p>\n
listview.setAdapter(adapter);<\/pre>\n
El resultado hasta aqu\u00ed es el siguiente:<\/p>\n
\"ListView<\/a>
ListView en Android<\/p><\/div>\n
 <\/p>\n
 <\/p>\n
Agregar un evento Click<\/em> a un ListView<\/em> en Android<\/h2>\n
Paso 1<\/strong>. Creamos un evento ClickListener.<\/p>\n
Paso 2<\/strong>. Sobreescribimos la funci\u00f3n onItemClick<\/p>\n
Pasamos la vista a mostrar, la posici\u00f3n del arreglo de nombres de estado. Si el usuario da clic se mostrar\u00e1 una peque\u00f1a ventana de texto mostrando el valor de esa determianda posici\u00f3n.<\/p>\n
listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {\r\n\u00a0 \u00a0 @Override\r\n\u00a0 \u00a0 public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 Toast.makeText(MainActivity.this, \"Has pulsado: \"+ names.get(position), Toast.LENGTH_LONG).show();\r\n\u00a0 \u00a0 \u00a0 }\r\n \u00a0 });<\/pre>\n
El resultado hasta aqu\u00ed es el siguiente<\/p>\n
\"ListView<\/a>
ListView en Android<\/p><\/div>\n
Personalizar un ListView<\/em> en Android<\/h2>\n
Vamos a Crear un Layout personalizado.\u00a0<\/span><\/p>\n
Paso 1<\/strong>. Da clic derecho en layout<\/em><\/strong> (est\u00e1 en la rama de app->res->layot), y selecciona New->Layout resource file.<\/p>\n
Paso 2.<\/strong> En la ventana que se abre, escribre como File name<\/strong>: list_item, y como Root element<\/strong>: LinearLayout. Pulse Ok.<\/p>\n
\"Ventana<\/a>
Ventana New Resource File<\/p><\/div>\n
Paso 3.<\/strong> Coloca un ImageView<\/strong><\/em> y un TextView<\/strong><\/em> en ese layout<\/strong><\/em>.<\/p>\n
Paso 4.<\/strong> Personaliza los componentes para ajustar la imagen a la izquierda del texto, vi\u00e9ndose as\u00ed:<\/p>\n
\"Layout<\/a>
Layout list_item<\/p><\/div>\n
El c\u00f3digo XML<\/strong> utilizado fue el siguiente:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n\u00a0 \u00a0 xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n\u00a0 \u00a0 android:orientation=\"horizontal\"\r\n\u00a0 \u00a0 android:layout_width=\"match_parent\"\r\n\u00a0 \u00a0 android:layout_height=\"80dp\">\r\n\u00a0 \u00a0 <ImageView\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:id=\"@+id\/imageView\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_width=\"wrap_content\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_height=\"wrap_content\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_gravity=\"center_vertical\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_margin=\"25dp\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 app:srcCompat=\"@android:drawable\/btn_star_big_on\" \/>\r\n\u00a0 \u00a0 <TextView\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:id=\"@+id\/textView\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_width=\"wrap_content\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_height=\"wrap_content\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_weight=\"1\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:textColor=\"#333\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:layout_gravity=\"center_vertical\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 android:text=\"TextView\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
Paso 5.<\/strong> Crea una nueva clase de Java llamada MyAdapter<\/strong><\/em>.\u00a0<\/span><\/p>\n
Ve al men\u00fa File->New->Java Class<\/p>\n
Como nombre de clase usa MyAdapter.<\/p>\n
Paso 6<\/strong>. C\u00f3digo de la clase MyAdapter.<\/p>\n
Esta clase crea un Adapter personalizado basado en el layout que creamos.\u00a0 <\/span>El c\u00f3digo es el siguiente:<\/p>\n
import android.content.Context;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.BaseAdapter;\r\nimport android.widget.TextView;\r\nimport java.util.ArrayList;\r\n\r\npublic class MyAdapter extends BaseAdapter {\r\n\u00a0 \u00a0 private Context context;\r\n\u00a0 \u00a0 private int layout;\r\n\u00a0 \u00a0 private ArrayList<String> names;\r\n\u00a0 \u00a0 public MyAdapter(Context context, int layout, ArrayList<String> names){\r\n\u00a0 \u00a0 \u00a0 \u00a0 this.context = context;\r\n\u00a0 \u00a0 \u00a0 \u00a0 this.layout = layout;\r\n\u00a0 \u00a0 \u00a0 \u00a0 this.names = names;\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 @Override\r\n\u00a0 \u00a0 public int getCount() {\r\n\u00a0 \u00a0 \u00a0 \u00a0 return this.names.size();\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 @Override\r\n\u00a0 \u00a0 public Object getItem(int position) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 return this.names.get(position);\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 @Override\r\n\u00a0 \u00a0 public long getItemId(int id) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 return id;\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 @Override\r\n\r\n\u00a0 \u00a0 public View getView(int position, View convertView, ViewGroup viewGroup) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Copiamos la vista\r\n\u00a0 \u00a0 \u00a0 \u00a0 View v = convertView;\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/Inflamos la vista con nuestro propio layout\r\n\u00a0 \u00a0 \u00a0 \u00a0 LayoutInflater layoutInflater = LayoutInflater.from(this.context);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 v= layoutInflater.inflate(R.layout.list_item, null);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Valor actual seg\u00fan la posici\u00f3n\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 String currentName\u00a0 = names.get(position);\r\n\u00a0 \u00a0 \u00a0 \u00a0\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Referenciamos el elemento a modificar y lo rellenamos\r\n\u00a0 \u00a0 \u00a0 \u00a0 TextView textView = (TextView) v.findViewById(R.id.textView);\r\n\u00a0 \u00a0 \u00a0 \u00a0 textView.setText(currentName);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/Devolvemos la vista inflada\r\n\u00a0 \u00a0 \u00a0 \u00a0 return v;\r\n\u00a0 \u00a0 }\r\n<\/pre>\n
 <\/p>\n
Paso 7<\/strong>. Enlazar con nuestro adaptador personalizado.<\/p>\n
En el MainActivity<\/strong><\/em>, agregamos las siguientes l\u00edneas:<\/p>\n
MyAdapter myAdapter = new MyAdapter(this, R.layout.list_item, names);\r\nlistview.setAdapter(myAdapter);<\/pre>\n
Y listo!<\/p>\n
\"ListView<\/a>
ListView personalizado en Android<\/p><\/div>\n
Referencias:<\/h3>\n
1. Android (2018). Vista de lista<\/strong>. Disponible en [https:\/\/developer.android.com\/guide\/topics\/ui\/layout\/listview?hl=es-419<\/a>]<\/p>\n","protected":false},"excerpt":{"rendered":"
Un ListView en Android es un objeto que nos permite mostrar una lista de elementos desplazables.\u00a0Veamos ejemplo de c\u00f3mo construirlo paso a paso.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[234],"tags":[198,235,238],"class_list":["post-1610","post","type-post","status-publish","format-standard","hentry","category-aplicaciones-moviles","tag-android","tag-desarrollo-de-aplicaciones-moviles","tag-listview"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1610","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=1610"}],"version-history":[{"count":12,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1610\/revisions"}],"predecessor-version":[{"id":1657,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1610\/revisions\/1657"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}