Alpha Code Labs | Video Tutoriales y Aplicaciones M&oacuteviles

ListView con Adaptador

Un ListView es una vista que agrupa un conjunto de elementos en forma vertical y nos permite visualizarlos mediante una barra de desplazamiento. Los elementos de la lista pueden ser cargados desde un archivo XML o mediante un adaptador que contendrá los datos en un vector de cadenas.

Crear cadenas de texto y colecciones (arrays) que contendrán los adaptadores

Archivo strings.xml

<resources>
<string name="app_name">tutorial</string>
<string name="action_settings">Settings</string>
<string name="lista_off">Ver Lista de CDs</string>
<string name="lista_on">Ver Lista de Libros</string>
<string name="titulo_lista_libros">Seleccione un Libro</string>
<string name="titulo_lista_cds">Seleccione un CD</string>
<string-array name="array_libros">
<item>El poder del ahora</item>
<item>El alquimista</item>
<item>La guerra del arte</item>
<item>1984</item>
<item>El principito</item>
<item>Moby-Dick</item>
</string-array>
<string-array name="array_cds">
<item>Esperando el milagro</item>
<item>Amapola del 66</item>
</string-array>
</resources>

Crear Layout utilizado en MainActivity.java

A continuación vamos a crear un LinearLayout con la estructura necesaria para nuestro ejemplo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.alphacodelabs.tutorial.MainActivity"
tools:showIn="@layout/activity_main">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv_titulo"
android:text="@string/titulo_lista_libros"
android:textSize="20sp"
android:typeface="sans"
android:textStyle="bold"/>

<ListView
android:id="@+id/listaLibros"
android:layout_width="match_parent"
android:layout_height="150dp"
android:entries="@array/array_libros" />


<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:id="@+id/imagenLista"
android:scaleType="centerInside"
android:layout_gravity="center_horizontal" />

<ToggleButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textOn="@string/lista_on"
android:textOff="@string/lista_off"
android:onClick="CambiarLista"/>

</LinearLayout>

Agregar ListView y adaptadores a MainActivity.java

Agregamos a nuestro ListView, la funcionalidad necesaria para cambiar el adaptador cuando presionemos el botón y ejecutemos el método CambiarLista y el método setOnItemClickListener para visualizar la imagen dependiendo del elemento seleccionado en el ListView.

ListView listView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    listView = (ListView)findViewById(R.id.listaLibros);

    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            switch (parent.getItemAtPosition(position).toString()){
                case "El poder del ahora":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.ahora);
                    break;
                case "El alquimista":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.alquimista);
                    break;
                case "La guerra del arte":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.arte);
                    break;
                case "1984":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.milnueve);
                    break;
                case "El principito":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.principito);
                    break;
                case "Moby-Dick":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.moby);
                    break;
                case "Esperando el milagro":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.milagro);
                    break;
                case "Amapola del 66":
                    ((ImageView) findViewById(R.id.imagenLista)).setImageResource(R.drawable.amapola);
                    break;
                default:
                    break;
            }
        }
    });


}

public void CambiarLista(View v) {

    if(((ToggleButton)v).isChecked()){
        ((TextView)findViewById(R.id.tv_titulo)).setText(getResources().getString(R.string.titulo_lista_cds));
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.array_cds));
        listView.setAdapter(adapter);
    }else{
        ((TextView)findViewById(R.id.tv_titulo)).setText(getResources().getString(R.string.titulo_lista_libros));
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.array_libros));
        listView.setAdapter(adapter);
    }
}

Aquí te dejamos el video tutorial de ListView con Adaptador.