Control de lista ListView

Control de lista ListView – Uso básico

Este es un control muy utilizado.

Nuestra pantalla tiene un espacio limitado, pero con este control podemos mostrar más datos en la pantalla.

Deslizando el dedo hacia arriba o hacia abajo, puedes traer datos que están fuera de la pantalla hacia el área visible.

Uso básico

Crea un nuevo proyecto TestListView.

Agrega el siguiente código en la vista para incluir un ListView.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/listview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>Lenguaje del código: HTML, XML (xml)

Inicializar la fuente de datos

public class MainActivity extends AppCompatActivity {
    private  String[] courses = {"Introducción a Java", "Introducción a Android", "Introducción a C#", "Lenguaje C", "ASP.NET MVC"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, courses);

        ListView listView = (ListView) findViewById(R.id.listview1);
        listView.setAdapter(adapter);
    }
}Lenguaje del código: JavaScript (javascript)

Estos datos pueden descargarse de la web (por ejemplo, mediante una API web), leerse desde una base de datos o incluso definirse como un array de cadenas directamente en el código.

Los datos no se pueden pasar directamente a un ListView; se necesita un adaptador.

Android proporciona muchos adaptadores. Aquí usamos ArrayAdapter.

Usamos android.R.layout.simple_list_item_1 como diseño secundario para el ListView.

Este es un archivo de diseño integrado en Android que contiene solo un TextView para mostrar texto.

Control de lista ListView – Personalizar la interfaz

Mostrar solo texto es un poco demasiado simple

Podemos mostrar contenido más rico en los elementos de la lista.

Agregar una clase de entidad Book

package com.foxdevelop.www.testlistview;

public class Book {
    private String name;
    private int imageId;

    public  Book (String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}Lenguaje del código: PHP (php)

Agregar un archivo de diseño para libros

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="12dp"
        />
</LinearLayout>Lenguaje del código: HTML, XML (xml)

Adaptador personalizado

package com.foxdevelop.www.testlistview;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class BookAdapter extends ArrayAdapter<Book> {
    private  int resource;

    public BookAdapter(@NonNull Context context, int resource, @NonNull List<Book> objects) {
        super(context, resource, objects);
        this.resource = resource;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        Book book =  getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resource, parent, false);

        ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
        imageView.setImageResource(book.getImageId());

        TextView name = (TextView) view.findViewById(R.id.name);
        name.setText(book.getName());

        return view;
    }
}Lenguaje del código: JavaScript (javascript)

Inicializar la fuente de datos en onCreate de la actividad

package com.foxdevelop.www.testlistview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private List<Book> courses = new ArrayList<Book>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LoadBooks();
        BookAdapter adapter = new BookAdapter(MainActivity.this, R.layout.booklistview, courses);

        ListView listView = (ListView) findViewById(R.id.listview1);
        listView.setAdapter(adapter);
    }

    private  void LoadBooks() {
        courses.add(new Book("Primero en la historia del pensamiento humano", R.drawable.access));
        courses.add(new Book("Política de la clase explotadora", R.drawable.book));
        courses.add(new Book("Precioso documento del derecho antiguo indio", R.drawable.bookmarks));
        courses.add(new Book("Manual de derecho privado romano imperial", R.drawable.center));
        courses.add(new Book("El conocimiento es poder", R.drawable.date));
        courses.add(new Book("Mi código civil existirá para siempre", R.drawable.clock));
        courses.add(new Book("Obra clásica sobre la democracia estadounidense", R.drawable.ftp));
        courses.add(new Book("Libro de texto autorizado de derecho internacional occidental", R.drawable.notes));
        courses.add(new Book("Obra maestra más cercana a la verdad histórica", R.drawable.set));
        courses.add(new Book("Un espejo de la reforma religiosa", R.drawable.energy));
        courses.add(new Book("El secreto de la teología es la antropología", R.drawable.tux));
        courses.add(new Book("Obra famosa introducida en China hace más de 300 años", R.drawable.science));
        courses.add(new Book("Obra maestra inmortal que retrata a los hipócritas", R.drawable.joystick));
        courses.add(new Book("Universidad prestigiosa sin muros", R.drawable.center));
        courses.add(new Book("Primer plan utópico en la historia del pensamiento humano", R.drawable.access));
    }
}Lenguaje del código: JavaScript (javascript)

Al establecer

android:orientation=»horizontal»

puedes organizarlos horizontalmente.

Optimizar el rendimiento de ListView

Actualmente, cada vez que se abre la actividad, se vuelve a cargar la fuente de datos, lo que afecta la eficiencia. Al almacenar en caché la vista, podemos mejorar la velocidad.

Al verificar convertView, evitamos obtener la vista cada vez.

public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
    Book book =  getItem(position);
    View view;
    if (convertView == null) {
        view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
    } else {
        view = convertView;
    }

    ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
    imageView.setImageResource(book.getImageId());

    TextView name = (TextView) view.findViewById(R.id.name);
    name.setText(book.getName());

    return view;
}Lenguaje del código: PHP (php)

Almacenar en caché los controles

Define una clase para contener el control ImageView y el control TextView.

class ViewData {
    ImageView imageUI;
    TextView textViewUI;
}Lenguaje del código: JavaScript (javascript)

package com.foxdevelop.www.testlistview;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class BookAdapter extends ArrayAdapter<Book> {
    private  int resource;

    public BookAdapter(@NonNull Context context, int resource, @NonNull List<Book> objects) {
        super(context, resource, objects);
        this.resource = resource;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        Book book =  getItem(position);
        View view;
        ViewUI viewUI;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
            ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
            TextView textView = (TextView) view.findViewById(R.id.name);

            viewUI = new ViewUI();
            viewUI.imageUI = imageView;
            viewUI.textViewUI = textView;
            view.setTag(viewUI);
        } else {
            view = convertView;
            viewUI = (ViewUI) view.getTag();
        }

        viewUI.imageUI.setImageResource(book.getImageId());
        viewUI.textViewUI.setText(book.getName());
        return view;
    }

    class ViewUI {
        ImageView imageUI;
        TextView textViewUI;
    }
}Lenguaje del código: JavaScript (javascript)

Eventos de clic en ListView

Agregar eventos de clic a los elementos de listview.

Por ejemplo, podemos mostrar el título del libro cuando se hace clic en un elemento.

En el método onCreate de la actividad principal:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    LoadBooks();
    BookAdapter adapter = new BookAdapter(MainActivity.this, R.layout.booklistview, courses);

    final ListView listView = (ListView) findViewById(R.id.listview1);
    listView.setAdapter(adapter);

    // Evento de clic
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
            Book b = courses.get(i);
            Toast.makeText(MainActivity.this, b.getName(), Toast.LENGTH_LONG).show();
        }
    });
}Lenguaje del código: PHP (php)

Agregar dependencias en build.gradle

Configuration ‘compile’ is obsolete and has been replaced with ‘implementation’ and ‘api’.

Se eliminará a finales de 2018. Para más información: http://d.android.com/r/tools/update-dependency-configurations.html

Necesitamos agregar soporte para la biblioteca de dependencias

android.support.v7.widget.RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <android.support.v7.widget.RecyclerView
       android:id="@+id/testrecy"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   </android.support.v7.widget.RecyclerView>
</LinearLayout>Lenguaje del código: HTML, XML (xml)

Uso del control de desplazamiento RecyclerView – 1

ListView es muy potente y todavía se usa ampliamente hoy en día.

Sin embargo, su rendimiento es un poco deficiente y su extensibilidad es limitada.

Solo admite el desplazamiento vertical; el desplazamiento horizontal no es posible.

RecyclerView es una versión mejorada de ListView.

Puede lograr los mismos efectos que ListView y optimizar sus deficiencias.

RecyclerView es el recomendado oficialmente.

Uso básico

Primero, agrega lo siguiente en tu archivo gradle:

compile ‘com.android.support:recyclerview-v7:27.1.1’

En la sección anterior, agregamos otro RecyclerView.

<android.support.v7.widget.RecyclerView
    android:id="@+id/testrecy"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>Lenguaje del código: HTML, XML (xml)

Continuaremos con el ejemplo del libro.