Tutorial de textos ListView personalizados de Android
Tutorial de textos ListView personalizados de Android
Última actualización: 30 de abril de 2013
En este tutorial, aprenderá cómo crear una vista de lista personalizada con textos en sus aplicaciones de Android. El uso de un adaptador personalizado le permite personalizar los diseños de elementos de vista de lista. Crearemos una vista de lista para mostrar textos y, al hacer clic en el elemento de la vista de lista, se mostrarán los resultados seleccionados en una nueva actividad. Vamos a empezar…
Cree un nuevo proyecto en Eclipse File > New > Android Application Project. Complete los detalles y nombre su proyecto CustomListView .
Nombre de la aplicación: CustomListView
Nombre del proyecto: CustomListView
Nombre del paquete: com.androidbegin.customlistview
Abra su MainActivity .java y pegue el siguiente código.
Actividad principal .java
paquete com.androidbegin.customlistview;
importar android.os.Bundle;
importar android.app.Actividad;
importar android.content.Intent;
importar android.widget.AdapterView;
importar android.widget.AdapterView.OnItemClickListener;
importar android.widget.ListView;
importar android.view.View;
clase pública MainActivity extiende Actividad {
// Declarar Variables
Lista de vista de lista;
Adaptador ListViewAdapter;
Cadena[] rango;
Cadena[] país;
Cadena [] población;
@Anular
public void onCreate (Paquete guardadoInstanceState) {
super.onCreate(estadoDeInstanciaGuardado);
// Obtener la vista de listview_main.xml
setContentView(R.layout.listview_main);
// Genera datos de muestra en arreglos de cadenas
rango = new String[] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" };
país = new String[] { "China", "India", "Estados Unidos",
"Indonesia", "Brasil", "Pakistán", "Nigeria", "Bangladesh",
"Rusia", "Japón" };
población = new String[] { "1,354,040,000", "1,210,193,422",
"315.761.000", "237.641.326", "193.946.886", "182.912.000",
"170.901.000", "152.518.015", "143.369.806", "127.360.000" };
// Localice ListView en listview_main.xml
lista = (ListView) findViewById(R.id.listview);
// Pasar los resultados a la clase ListViewAdapter
adaptador = new ListViewAdapter(MainActivity.this, rango, país, población);
// Vincula el adaptador a ListView
list.setAdapter(adaptador);
// Capturar clic en el elemento ListView
list.setOnItemClickListener(nuevo OnItemClickListener() {
@Anular
public void onItemClick(AdapterView<?> parent, View view,
posición int, identificación larga) {
Intent i = new Intent(MainActivity.this, SingleItemView.class);
// Pasar todo el rango de datos
i.putExtra("rango", rango);
// Pasar todos los datos del país
i.putExtra("país", país);
// Pasar toda la población de datos
i.putExtra("poblacion", poblacion);
// Pasar la posición de clic del elemento de la vista de lista
i.putExtra("posición", posición);
// Abrir SingleItemView.java Actividad
iniciarActividad(i);
}
});
}
}
En esta actividad, creamos arreglos de cadenas con datos de muestra y los pasamos a la clase ListViewAdapter. Al hacer clic en el elemento de vista de lista, se pasará la posición seleccionada y las matrices de cadenas a una nueva actividad.
A continuación, cree un diseño gráfico XML para su MainActivity. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML listview_main.xml y pegue el siguiente código.
A continuación, cree un adaptador de vista de lista personalizado. Vaya a Archivo > Nuevo > Clase y asígnele el nombre ListViewAdapter .java. Seleccione su paquete llamado com.androidbegin.customlistview y haga clic en Finalizar .
Abra su ListViewAdapter .java y pegue el siguiente código.
ListViewAdapter .java
paquete com.androidbegin.customlistview;
importar android.content.Context;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;
importar android.widget.BaseAdapter;
importar android.widget.TextView;
clase pública ListViewAdapter extiende BaseAdapter {
// Declarar Variables
contexto contexto;
Cadena[] rango;
Cadena[] país;
Cadena [] población;
LayoutInflater inflador;
ListViewAdapter público (contexto contextual, rango de cadena [], país de cadena [],
Cadena [] población) {
este.contexto = contexto;
this.rango = rango;
este.país = país;
esta.poblacion = poblacion;
}
@Anular
public int getCount() {
return rango.longitud;
}
@Anular
objeto público getItem (posición int) {
devolver nulo;
}
@Anular
getItemId largo público (posición int) {
devolver 0;
}
public View getView (posición int, View convertView, ViewGroup parent) {
// Declarar Variables
TextView txtrank;
TextView txtpaís;
TextView txtpoblación;
inflador = (LayoutInflater) contexto
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
Ver itemView = inflater.inflate(R.layout.listview_item, parent, false);
// Localice las vistas de texto en listview_item.xml
txtrank = (TextView) itemView.findViewById(R.id.rank);
txtcountry = (TextView) itemView.findViewById(R.id.country);
txtpopulation = (TextView) itemView.findViewById(R.id.population);
// Captura la posición y configura las TextViews
txtrank.setText(rango[posición]);
txtpaís.setText(país[posición]);
txtpoblacion.setText(poblacion[posicion]);
volver itemView;
}
}
En esta clase de adaptador de vista de lista personalizada, las matrices de cadenas se pasan a ListViewAdapter y se establecen en TextViews seguidas de las posiciones.
A continuación, cree un diseño gráfico XML para su elemento de vista de lista. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML listview_item.xml y pegue el siguiente código.
vista_de_lista_elemento .xml
<?versión xml="1.0" codificación="utf-8"?>
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
android_layout_width="fill_parent"
android_layout_height="fill_parent" >
<Vista de texto
android_id="@+id/etiqueta de clasificación"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="@cadena/etiqueta de clasificación" />
<Vista de texto
android_id="@+id/rango"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_toRightOf="@+id/ranklabel" />
<Vista de texto
android_id="@+id/etiqueta del país"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/ranklabel"
android_text="@cadena/etiqueta del país" />
<Vista de texto
android_id="@+id/país"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/rango"
android_layout_toRightOf="@+id/etiqueta del país" />
<Vista de texto
android_id="@+id/etiqueta de población"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/etiqueta del país"
android_text="@cadena/etiqueta de población" />
<Vista de texto
android_id="@+id/población"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/país"
android_layout_toRightOf="@+id/etiqueta de población" />
</RelativeLayout>
Producción:
A continuación, cree una nueva actividad para mostrar los resultados al hacer clic en el elemento de vista de lista. Vaya a Archivo > Nuevo > Clase y asígnele el nombre SingleItemView .java. Seleccione su paquete llamado com.androidbegin.customlistview y haga clic en Finalizar .
Abra su SingleItemView .java y pegue el siguiente código.
Vista de elemento único .java
paquete com.androidbegin.customlistview;
importar android.app.Actividad;
importar android.content.Intent;
importar android.os.Bundle;
importar android.widget.TextView;
La clase pública SingleItemView extiende la actividad {
// Declarar Variables
TextView txtrank;
TextView txtpaís;
TextView txtpoblación;
Cadena[] rango;
Cadena[] país;
Cadena [] población;
posición int;
@Anular
public void onCreate (Paquete guardadoInstanceState) {
super.onCreate(estadoDeInstanciaGuardado);
setContentView(R.layout.singleitemview);
// Recuperar datos de MainActivity al hacer clic en el elemento de vista de lista
Intención i = getIntent();
// Obtener la posición de clic del elemento de vista de lista
posición = i.getExtras().getInt("posición");
// Obtener la lista de rango
rango = i.getStringArrayExtra("rango");
// Obtener la lista de países
país = i.getStringArrayExtra("país");
// Obtener la lista de población
población = i.getStringArrayExtra("población");
// Localiza las vistas de texto en singleitemview.xml
txtrank = (TextView) findViewById(R.id.rank);
txtcountry = (TextView) findViewById(R.id.country);
txtpopulation = (TextView) findViewById(R.id.population);
// Cargar el texto en TextViews seguido de la posición
txtrank.setText(rango[posición]);
txtpaís.setText(país[posición]);
txtpoblacion.setText(poblacion[posicion]);
}
}
En esta actividad, las cadenas se recuperan de ListViewAdapter mediante el uso de conjuntos de intención de TextViews.
A continuación, cree un diseño gráfico XML para su SingleItemView. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML singleitemview.xml y pegue el siguiente código.
vista de elemento único .xml
<?versión xml="1.0" codificación="utf-8"?>
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
xmlns_herramientas="http://esquemas.android.com/herramientas"
android_layout_width="fill_parent"
android_layout_height="fill_parent" >
<Vista de texto
android_id="@+id/etiqueta de clasificación"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="@cadena/etiqueta de clasificación" />
<Vista de texto
android_id="@+id/rango"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_toRightOf="@+id/ranklabel" />
<Vista de texto
android_id="@+id/etiqueta del país"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/ranklabel"
android_text="@cadena/etiqueta del país" />
<Vista de texto
android_id="@+id/país"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/rango"
android_layout_toRightOf="@+id/etiqueta del país" />
<Vista de texto
android_id="@+id/etiqueta de población"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/etiqueta del país"
android_text="@cadena/etiqueta de población" />
<Vista de texto
android_id="@+id/población"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/país"
android_layout_toRightOf="@+id/etiqueta de población" />
</RelativeLayout>
A continuación, cambie el nombre y los textos de la aplicación. Abra su strings.xml en su carpeta res > valores y pegue el siguiente código.
