Es muy común olvidar algún paso o detalle a la hora de hacer un trabajo sistematico dentro de la programación (o por lo menos yo, Mr memoria pez), por eso intento apuntar los pasos y anotaciones cada vez que aprendo algo nuevo, así voy a empezar a escribir esta serie de entradas en el blog para tambien compartirlo ya que seguramente le sea útil a alguien.
Esta primera entrada la voy a dedicar a explicar como podeis hacer vuestros ListView personalizados en Android, partiendo de que ya tenéis un conocimiento básico de Android (Java, Actividades, layout…).
- Para empezar la clase que contorla la actividad de nuestro listView tiene que extender de ListActivity
- Luego tenemos que crear el layout que va a contener nuestro listActivity, este debe tener un componente ListView el cual debe tener como id “@android:id/list“, os dejo todo el código de este layout:
- Ahora creamos el layout que indicara el estilo de cada fila, para este ejemplo voy a crear una fila sencilla donde aparece una imagen en el lado izquierdo, un texto superior el cual sería el título y abajo un texto mas pequeño donde podría ir una descripción o texto complementario.
- Ahora tenemos que crear nuestro propio adaptador, creamos una clase la cual extiende de BaseAdapter, en el constructor de esta clase debemos de pasarle el activity de la clase que lo llama y los array los cuales contienen la información de cada elemento que se va a mostrar en el ListView; en mi caso le voy a pasar dos arrays con elementos String, uno con una lista de nombres de países y otro con una lista de saludos en cada idioma de ese país; tambien le pasaré el array que contiene cada icono, en este caso las banderas de cada país, como es un recurso Drawable, se le pasa como un número entero, el cual hace referencia a la dirección de esa imagen.
Os dejo toda el código de la clase adaptador con todas sus funciones necesarias: - Cuando terminamos de crear nuestro adaptador, establecemos este adaptador a nuestra ListActivity con la siguiente línea, la cual incluimos dentro del método onCreate:
- Por último, lo más común es que nuestro ListView haga algo después de tocar alguna de ellas, para ello incluimos la función onListItemClick dentro de nuestra clase encargada de la actividad de la lista; en el caso de este ejemplo he añadido un toast el cual indica que posición de la lista has pulsado.
Aprovecho esto para dejaros todo el código de esta clase:
|
1 |
public class MainActivity extends ListActivity { |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<LinearLayout 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <ListView android:id="@android:id/list" android:layout_marginTop="5dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" > </ListView> </LinearLayout> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="?android:attr/listPreferredItemHeight"> <ImageView android:id="@+id/icon" android:layout_width="?android:attr/listPreferredItemHeight" android:layout_height="60dp" android:layout_alignParentLeft="true" android:src="@drawable/ic_launcher"/> <TextView android:id="@+id/text1" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_toRightOf="@id/icon" android:layout_alignParentTop="true" android:layout_marginLeft="5dp" android:textAppearance="?android:attr/textAppearanceMedium" android:textStyle="bold" android:singleLine="true" /> <TextView android:id="@+id/text2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Otro Texto" android:layout_marginRight="5dp" android:layout_toRightOf="@id/icon" android:layout_below="@id/text1" android:layout_alignParentBottom="true" android:gravity="center"/> </RelativeLayout> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
package com.example.ejemplocustomlistview; import android.app.Activity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; public class Adaptador extends BaseAdapter { private final Activity actividad; private final String[] lista; private final String[] desc; private final int[] img; public Adaptador(Activity actividad, String[] values, String[] desc2, int[] img) { super(); this.actividad = actividad; this.lista = values; this.desc = desc2; this.img = img; } public View getView(int position, View convertView, ViewGroup parent) { LayoutInflater inflater = actividad.getLayoutInflater(); /* Aquí debes de indicar el layout con el estilo que le vas a dar a la * fila*/ View view = inflater.inflate(R.layout.fila, null, true); /* Creamos un objeto por cada elemento de este layout * y guardamos cada objento dentro del el*/ TextView textView = (TextView) view.findViewById(R.id.text1); TextView textViewDesc = (TextView) view.findViewById(R.id.text2); ImageView imageView = (ImageView) view.findViewById(R.id.icon); /*A cada objeto se le da el valor que debe mostrar en cada fila*/ textView.setText(lista[position]); textViewDesc.setText(desc[position]); imageView.setImageResource(img[position]); return view; } public int getCount() { return lista.length; } public Object getItem(int arg0) { return lista[arg0]; } public long getItemId(int position) { return position; } } |
|
1 |
setListAdapter(new Adaptador(this, values, desc, img)); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import android.app.ListActivity; import android.os.Bundle; import android.view.View; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends ListActivity { String[] values = {"España", "Francia", "Italia", "Portugal"}; String[] desc = {"Buenos Dias", "bonjour", "Buongiorno", "Bom dia"}; int[] img = {R.drawable.s, R.drawable.f, R.drawable.i, R.drawable.p}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setListAdapter(new Adaptador(this, values, desc, img)); } @Override protected void onListItemClick(ListView listView, View view, int position, long id) { super.onListItemClick(listView, view, position, id); Toast.makeText(getApplicationContext(), "Fila " + position + " seleccionada", Toast.LENGTH_SHORT).show(); } } |
Aquí termina este pequeño tutorial de como crear las vistas en listas personalizadas, aunque no está optimizado, si por ejemplo aplicáramos un gran numero de imágenes podemos tener cierres forzados de la aplicación, o si por ejemplo queremos obtener la imágenes desde una URL tendríamos que agregar varias clases que nos ayuden a hacer esto de la forma mas óptima. En un siguiente tutorial le meteremos mas caña al ListView y explicaré como hacerlo de forma optimizada.
Tengo alojado este proyecto en GitHub junto con todos sus recursos (imagenes..), si quieres acceder haz click sobre la siguiente imagen:
Primer diseño web que le doy a este blog, basado en el theme para wordpress “Stumblr” con varias modificaciones y incorporación del banner superior
Algunas fotos que le hice a Jesús en un spot creado por los skater, el cual me han comentado que ha desaparecido definitivamente (R.I.P. Viveros)
Después de estar un tiempo sin editar, entre otras cosas porque mi otra cámara se fue a mejor vida, estuve mirando las cámaras DSLR la cuales se están haciendo muy famosas en esto de la edición de vídeo, me hice con una y esto fue lo que salió.
Diseño de la carta de menús para el restaurante La Suara, trabajo integro con Photoshop.
Unas de las primeras fotos que tiré recién me hice con la cámara 600D y objetivo 18-55 mm, típicas fotos nocturnas jugando con la velocidad de obturación.
© 2013 Daniel Ramírez
wp_footer();