RecyclerView

Reciclaje de vista en Android

RECYCLERVIEW

Este componente, basado en la clase RecyclerView, representa un contenedor en forma de lista, similar al ListView, pero más flexible y más eficiente. Este componente establece límites al número de elementos que aparecen en la vista y mediante el desplazamiento realiza un proceso de reciclaje, que consiste básicamente en ir eliminando unos elementos y cargando otros, obteniendo como resultado una carga de datos más optimizada.

A continuación, una aplicación básica ejemplo de RecyclerView, apoyándose en dos subclases: la subclase RecyclerView.Adapter() que relaciona el layout con una lista de objetos y la subclase RecyclerView.ViewHolder que se encarga de almacenar los datos en los distintos elementos de la lista. 

El layout principal define el elemento RecyclerView.

activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout xmlns:android="//schemas.android.com/apk/res/android"
  3. xmlns:app="//schemas.android.com/apk/res-auto"
  4. xmlns:tools="//schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. tools:context="xip.midominio.com.recyclerview.MainActivity">
  8. <android.support.v7.widget.RecyclerView
  9. android:id="@+id/recycler"
  10. android:layout_width="match_parent"
  11. android:layout_height="match_parent">
  12. </android.support.v7.widget.RecyclerView>
  13. </android.support.constraint.ConstraintLayout>

El MainActivity genera una lista de objetos tipo Datos mediante el método create(), declara el RecyclerView y establece el gestor de diseño (layout) y el adaptador (datosAdapter).

MainActivity.java

  1. package xip.midominio.com.recyclerview;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.support.v7.widget.LinearLayoutManager;
  5. import android.support.v7.widget.RecyclerView;
  6. import java.util.ArrayList;
  7. import xip.midominio.com.recyclerview.POJOS.Adapters.DatosAdapter;
  8. import xip.midominio.com.recyclerview.POJOS.Datos;
  9. public class MainActivity extends AppCompatActivity {
  10. RecyclerView recyclerDatos;
  11. ArrayList<Datos> datos;
  12. DatosAdapter datosAdapter;
  13. @Override
  14. protected void onCreate(Bundle savedInstanceState) {
  15. super.onCreate(savedInstanceState);
  16. setContentView(R.layout.activity_main);
  17. create();
  18. recyclerDatos = (RecyclerView)findViewById(R.id.recycler);
  19. LinearLayoutManager layout = new LinearLayoutManager(this);
  20. layout.setOrientation(LinearLayoutManager.VERTICAL);
  21. recyclerDatos.setLayoutManager(layout);
  22. datosAdapter = new DatosAdapter(this,datos);
  23. recyclerDatos.setAdapter(datosAdapter);
  24. }
  25. public void create(){
  26. datos = new ArrayList<>();
  27. datos.add(new Datos("1","Yogurt","Danone","Danone natural", 100,550,"Yogurt natural sin azúcar",null,0));
  28. datos.add(new Datos("2","Yogurt","Danone", "Yogurt melocotón trozitos",50,400,"Yogurt de melocotón con trocitos de Activia",null,0));
  29. datos.add(new Datos("3","Petisuisse","LIDL", "petisuisse fresa-platano",50,400,"PetitSuisse con sabor a fresa y plátano",null,0));
  30. datos.add(new Datos("4","Cafe","Genérico", "café molido tueste natural",5,100,"Café molido ",null,0));
  31. datos.add(new Datos("5","Yogurt","Milbona","Yogur fresa-morango", 200,550,"Yogurt sabor a fresa",null,0));
  32. datos.add(new Datos("6","Yogurt","Milbona", "Petit beber fresa-platano",71,301,"Yogurt para beber con sabor a fresa y plátano",null,0));
  33. datos.add(new Datos("7","Chocolate","Nestlé", "Kinder chocolate",150,300,"Huevo Kinder con chocolate blanco y sorpresa",null,0));
  34. datos.add(new Datos("8","Jamon cocido","CampoFrio", "Fiambre de jamon cocido",50,150,"Fiambre de jamón cocido en lonchas sandwich",null,0));
  35. datos.add(new Datos("9","Galletas","ARTIACH", "Marbú Dorada 0%",447,1873,"Galletas doradas al horno con acetite 100% girasol y 0% azúcares añadidos ",null,0));
  36. }
  37. }

Este layout se basa en el elemento CardView que es un tipo de vista presentada como una tarjeta. Está formado por una imagen y cuatro etiquetas de texto y cada uno ellos representa uno de los objetos de la lista.

datos_item.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.v7.widget.CardView
  3. xmlns:android="//schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="wrap_content"
  6. android:id="@+id/cardview">
  7. <LinearLayout
  8. xmlns:android="//schemas.android.com/apk/res/android"
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:orientation="horizontal"
  12. >
  13. <ImageView
  14. android:id="@+id/imageview"
  15. android:src="@drawable/ic_launcher_foreground"
  16. android:layout_width="100dp"
  17. android:layout_height="100dp" />
  18. <LinearLayout
  19. android:layout_width="match_parent"
  20. android:layout_height="150dp"
  21. android:orientation="vertical"
  22. android:layout_marginTop="10dp">
  23. <TextView
  24. android:id="@+id/nombre"
  25. android:text="Nombre"
  26. android:layout_width="match_parent"
  27. android:layout_height="wrap_content" />
  28. <TextView
  29. android:id="@+id/marca"
  30. android:text="Marca"
  31. android:layout_width="match_parent"
  32. android:layout_height="wrap_content" />
  33. <TextView
  34. android:id="@+id/modelo"
  35. android:text="Modelo"
  36. android:layout_width="match_parent"
  37. android:layout_height="wrap_content" />
  38. <TextView
  39. android:id="@+id/descripcion"
  40. android:text="Descripción"
  41. android:layout_width="match_parent"
  42. android:layout_height="wrap_content" />
  43. </LinearLayout>
  44. </LinearLayout>
  45. </android.support.v7.widget.CardView>

Este adaptador (hace de puente entre la vista y los datos) consta básicamente de tres bloques:

Por un lado, un constructor, que asigna el contexto y un elemento Lista de tipo Datos.

Por otro lado, ubicada al final del archivo, la clase ViewHolder, que mediante la herencia de RecyclerView.ViewHolder declara todos los elementos de una vista.

Por último, la herencia de la subclase RecyclerView.Adapter ofrece los tres métodos necesarios, onCreateViewHolder(),onBindViewHolder(), getItemCount(), que se encargan de asignar el layout y los valores de los elementos. 

DatosAdapter.java

  1. package xip.midominio.com.recyclerview.POJOS.Adapters;
  2. import android.content.Context;
  3. import android.support.v7.widget.CardView;
  4. import android.support.v7.widget.RecyclerView;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.ImageView;
  9. import android.widget.TextView;
  10. import java.util.List;
  11. import xip.midominio.com.recyclerview.POJOS.Datos;
  12. import xip.midominio.com.recyclerview.R;
  13. public class DatosAdapter extends RecyclerView.Adapter<DatosAdapter.ViewHolder>{
  14. Context context;
  15. List<Datos> listaDatos;
  16. public DatosAdapter(Context context,List<Datos> lista){
  17. this.context = context;
  18. this.listaDatos = lista;
  19. }
  20. @Override
  21. public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  22. View view = LayoutInflater.from(context).inflate(R.layout.datos_item,parent,false);
  23. ViewHolder viewHolder = new ViewHolder(view);
  24. return viewHolder;
  25. }
  26. @Override
  27. public void onBindViewHolder(ViewHolder holder, int position) {
  28. //holder.nombre.setText();
  29. nombre.setText("Nombre: "+listaDatos.get(position).getNombre());
  30. marca.setText("Marca: "+listaDatos.get(position).getMarca());
  31. modelo.setText("Modelo: "+listaDatos.get(position).getModelo());
  32. descripcion.setText(listaDatos.get(position).getDescripcion());
  33. }
  34. @Override
  35. public int getItemCount() {
  36. //return 0;
  37. return listaDatos.size();
  38. }
  39. CardView cardView;
  40. ImageView imageView;
  41. TextView nombre,marca,modelo,descripcion;
  42. public class ViewHolder extends RecyclerView.ViewHolder{
  43. public ViewHolder(View itemView){
  44. super(itemView);
  45. cardView = (CardView) itemView.findViewById(R.id.cardview);
  46. imageView = (ImageView) itemView.findViewById(R.id.imageview);
  47. nombre = (TextView) itemView.findViewById(R.id.nombre);
  48. marca = (TextView) itemView.findViewById(R.id.marca);
  49. modelo = (TextView) itemView.findViewById(R.id.modelo);
  50. descripcion = (TextView) itemView.findViewById(R.id.descripcion);
  51. }
  52. }
  53. }

Esta clase representa el modelo que define las propiedades junto a sus getter y sus setter que permiten obtener y establecer los valores respectivamente.

Datos.java

  1. package xip.midominio.com.recyclerview.POJOS;
  2. public class Datos {
  3. private String id,nombre,descripcion,imagen,marca,modelo;
  4. private int fav,energia,fuerza;
  5. public Datos (String id,String nombre,String marca,String modelo, int calorias,int fuerza,
  6. String descripcion, String imagen,int fav){
  7. this.id=id;
  8. this.nombre=nombre;
  9. this.modelo = modelo;
  10. this.marca = marca;
  11. this.energia= calorias;
  12. this.fuerza=fuerza;
  13. this.descripcion=descripcion;
  14. this.imagen=imagen;
  15. this.fav=fav;
  16. }
  17. public String getId() {
  18. return id;
  19. }
  20. public void setId(String id) {
  21. this.id = id;
  22. }
  23. public String getNombre() {
  24. return nombre;
  25. }
  26. public void setNombre(String nombre) {
  27. this.nombre = nombre;
  28. }
  29. public String getMarca() {
  30. return marca;
  31. }
  32. public void setMarca(String marca) {
  33. this.marca = marca;
  34. }
  35. public String getModelo() {
  36. return modelo;
  37. }
  38. public void setModelo(String modelo) {
  39. this.modelo = modelo;
  40. }
  41. public int getFuerza() {
  42. return fuerza;
  43. }
  44. public void setFuerza(int fuerza) {
  45. this.fuerza = fuerza;
  46. }
  47. public int getEnergia() {
  48. return energia;
  49. }
  50. public void setEnergia(int energia) {
  51. this.energia = energia;
  52. }
  53. public String getDescripcion() {
  54. return descripcion;
  55. }
  56. public void setDescripcion(String descripcion) {
  57. this.descripcion = descripcion;
  58. }
  59. public String getImagen() {
  60. return imagen;
  61. }
  62. public void setImagen(String imagen) {
  63. this.imagen = imagen;
  64. }
  65. public int getFav() {
  66. return fav;
  67. }
  68. public void setFav(int fav) {
  69. this.fav = fav;
  70. }
  71. }


Comentarios: 0

Para poder comentar es necesario iniciar sesión



Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso