Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

C贸mo realizar un ListView personalizado

29 noviembre, 2016

Lo normal es que nos encontremos con que necesitamos meter m谩s de un dato en cada linea de nuestra linea, en este caso no nos sirve un adaptador de un solo dato como en ListView simple.

Ahora vamos a rellenar un listview con dos textos y una imagen. Para hacerlo vamos a implementar nuestro propio adaptador que vamos a definir bas谩ndonos en el BaseAdapter.

Archivos

  • ListView_Personalizado.java
  • main.xml
  • listview_fila.xml
  • icono.png

ListView_Personalizado.java

package wikicode.es.ListView_Personalizado;
 
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
 
public class ListView_Personalizado extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
 
		setContentView(R.layout.main);
 
		ListView l = (ListView) findViewById(R.id.ListView01);
 
		l.setAdapter(new miAdapter(this));
    }
 
    private static class miAdapter extends BaseAdapter {
 
		private LayoutInflater mInflater;
 
		private static final String[][] data = {{"A","1"}, {"B","2"}, {"C","3"}, {"D","4"}, {"E","5"}};
 
		public miAdapter(Context context) {
 
			mInflater = LayoutInflater.from(context);
 
		}
 
		public View getView(int position, View convertView, ViewGroup parent) {
 
 
			TextView text;
 
			TextView text2;
 
			ImageView img1;
 
 
			if (convertView == null) {
 
				convertView = mInflater.inflate(R.layout.listview_fila, null);
 
			} 
 
			text = (TextView) convertView.findViewById(R.id.TextView01);
 
			text2 = (TextView) convertView.findViewById(R.id.TextView02);
 
			img1 = (ImageView) convertView.findViewById(R.id.ImageView01);
 
			text.setText(data[position][0]);
 
			text2.setText(data[position][1]);
 
			img1.setImageResource(R.drawable.icono);
 
 
			return convertView;
 
		}
 
 
		public int getCount() {
 
			return data.length;
 
		}
 
 
		public Object getItem(int position) {
 
			return position;
 
		}
 
 
		public long getItemId(int position) {
 
			return position;
 
		}
	}
}

main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
	<TextView  
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	    android:text="WikiCode - ListView Personalizado" 
    />
 
    <ListView
    	android:id="@+id/ListView01" 
		android:layout_height="fill_parent"
 		android:layout_width="fill_parent"
    >
    </ListView>
</LinearLayout>

listview_fila.xml

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
>
	<ImageView
		android:id="@+id/ImageView01" 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
	>
 
	</ImageView>
 
	<TextView 
		android:id="@+id/TextView01" 
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginLeft="10px"
		android:textColor="#FFFF00"
	>
	</TextView>
 
	<TextView 
		android:id="@+id/TextView02"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:layout_marginLeft="10px" 
		android:textColor="#0099CC"
	>
	</TextView>
</LinearLayout>