Listas personalizadas en Android

Twitter: @roboxito

Ahora veremos como crear una lista personalizada, esto es, dibujar en un renglón imágenes, textos y otros controles disponibles.Lo que nos permitirá mostrar mayor información y de una forma amigable al usuario.

lista personalizada en android

Comenzamos con un nuevo proyecto, y agregamos al Layout main.xml un textEdit de nombre myEditView,con texto “Nuevo elemento” y un ListView de nombre myListView.

Luego agregar al onCreate de nuestra clase principal en java (ej.  /ListaPersonalizada/src/com.listapersonalizada/MainActivity.java)  el siguiente código base:

	ListView myListView = (ListView)findViewById(R.id.myListView);
        final EditText myEditText = (EditText)findViewById(R.id.myEditText);
        final ArrayList< String> todoItems = new ArrayList< String>();
        final ArrayAdapter< String> aa;
        aa = new ArrayAdapter< String>(this,android.R.layout.simple_list_item_1,
        		todoItems);
        myListView.setAdapter(aa);
        myEditText.setOnKeyListener(new OnKeyListener() {
        	@Override
        	public boolean onKey(View v, int keyCode, KeyEvent event) {
        		if (event.getAction() == KeyEvent.ACTION_DOWN)
        			if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER)
        			{
        				todoItems.add(0, myEditText.getText().toString());
        				aa.notifyDataSetChanged();
        				myEditText.setText("");
        				return true;
        			}
        		return false;
        	}
        });

Al ejecutar podremos agregar el texto a la lista, presionando el botón central del teléfono.

El botón de hardware que nos permite mover el cursor.  Así tenemos una lista simple con elementos que vamos incluyendo.

Luego seguimos las instrucciones para crear un nuevo control, y usarlo repetidamente para formar la lista.

1. Crear una nueva clase java (archivo  /src/com.listapersonalizada/TodoListItemView.java),  TodoListItemView que se derive de TextView.  Incluir una función para que sobreescriba al método  onDraw ,  e implemente los constructores que llamarán a un nuevo método de inicialización.

package com.listapersonalizada;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;
	public class TodoListItemView extends TextView {
		public TodoListItemView (Context context, AttributeSet ats, int ds) {
			super(context, ats, ds);
			init();
		}
		public TodoListItemView (Context context) {
			super(context);
			init();
		}
		public TodoListItemView (Context context, AttributeSet attrs) {
			super(context, attrs);
			init();
		}
		private void init() {
		}
		@Override
		public void onDraw(Canvas canvas) {
			// Use the base TextView to render the text.
			super.onDraw(canvas);
		}
	}

2. Crear un nuevo archivo de recurso colors.xml en la carpeta res/values del proyecto. De tipo values con raíz resources y valores de color para el papel, margen, línea y colores del texto.

< ? xml version="1.0" encoding="utf-8" ? >
< resources>
< color name="notepad_paper">#AAFFFF99< /color>
< color name="notepad_lines">#FF0000FF< /color>
< color name="notepad_margin">#90FF0000< /color>
< color name="notepad_text">#AA0000FF< /color>
< /resources>

3. Crear un nuevo archivo de recurso dimens.xml , y agregarle nuevos valores para el ancho del margen del papel.

< ?xml version="1.0" encoding="utf-8"?>
< resources>
< dimen name="notepad_margin">30px< /dimen>
< /resources>

4. Con los recursos definidos, ya esta listo para personalizar la apariencia de TodoListItemView. Crear un nuevas instancias de variables privadas para almacenar los objetos Paint que usará para dibujar el fondo del papel y el margen. También crear variables para los valores del color del papel y ancho del margen. Rellenar en el método de inicialización para obtener  instancias de los recursos que creó en los dos últimos pasos y crear los objetos Paint.

private Paint marginPaint;
private Paint linePaint;
private int paperColor;
private float margin;
private void init() {
	// Get a reference to our resource table.
	Resources myResources = getResources();
	// Create the paint brushes we will use in the onDraw method.
	marginPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
	marginPaint.setColor(myResources.getColor(R.color.notepad_margin));
	linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
	linePaint.setColor(myResources.getColor(R.color.notepad_lines));
	// Get the paper background color and the margin width.
	paperColor = myResources.getColor(R.color.notepad_paper);
	margin = myResources.getDimension(R.dimen.notepad_margin);
}

5. Dibujar el papel, sobreescribiendo el método onDraw, y dibujar la imagen usando los objetos Paint que creó en el paso 4.Una vez que ha dibujado la imagen del papel, llame a la superclase del método onDraw, y dibuje el texto normalmente.

@Override
public void onDraw(Canvas canvas) {
	// Color as paper
	canvas.drawColor(paperColor);
	// Draw ruled lines
	canvas.drawLine(0, 0, getMeasuredHeight(), 0, linePaint);
	canvas.drawLine(0, getMeasuredHeight(),
	getMeasuredWidth(), getMeasuredHeight(),
	linePaint);
	// Draw margin
	canvas.drawLine(margin, 0, margin, getMeasuredHeight(), marginPaint);
	// Move the text across from the margin
	canvas.save();
	canvas.translate(margin, 0);
	// Use the TextView to render the text.
	super.onDraw(canvas);
	canvas.restore();
}

6.Eso completa la implementación de TodoListItemView. Para usarlo en la lista del To-Do Activity, necesita incluirlo en un nuevo layout y pasarlo al constructor del Array Adapter. Comenzar creando un nuevo recurso todolist_item.xml en la carpeta res/layout.

Esto especificará como cada uno de los elementos es mostrado. Para este ejemplo, su layout necesita consistir sólo del nuevo TodoListItemView, configúrelo para rellenar toda el área disponible.

< ?xml version="1.0" encoding="utf-8"? >
< com.listapersonalizada.TodoListItemView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:scrollbars="vertical" android:textColor="@color/notepad_text" android:fadingEdge="vertical" />

En la paleta de componentes, nuestro nuevo control aparecerá en el grupo Custom & Library views.

7. Ahora abra la clase MainActivity. El paso final es cambiar los parámetros pasados al ArrayAdapter en onCreate.  Reemplace la referencia al default android.R.layout.simple_list_item_1 con el nuevo R.layout.todolist_item layout creado en el paso 6.

final ArrayList< String> todoItems = new ArrayList< String>();
int resID = R.layout.todolist_item;
final ArrayAdapter< String> aa = new ArrayAdapter< String>(this, resID, todoItems);
myListView.setAdapter(aa);

Se incluye el código fuente aquí

Y el archivo instalable .apk aquí

 

Comparte ➜

No comments

Add yours