Empezando con RecyclerView en android

En este post veremos la implementación del una lista RecyclerView.

Empezando con RecyclerView en android

Hola programadores, aficionados y curiosos que encontraron este post. Un cordial saludo desde los laboratorios de cursania, hoy en nuestra sección "post de miércoles".


Implementaremos una lista RecyclerView.


1.- Importaremos las dependencia.


2.-Crearemos una Activity y nuestras clases para el desarrollo del recyclerview


3.-Una ves creada nuestra activity nos creara un layout por defecto. aparte de este crearemos un layout para los items.


4.-En nuestro activity_recycler_view le daremos un estilo, agregando sus controles.

xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/arvRvPersonal"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        android.support.v7.widget.RecyclerView>

RelativeLayout>


El cual se dejara la siguiente vista


Para nuestro layout recycler_item_personal tendrá el siguiente estilo

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@android:color/darker_gray"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:background="@android:color/white"
        android:layout_margin="2dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="UselessParent">

        <TextView
            android:text="@string/nombre"
            android:id="@+id/ripTvNombre"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:text="@string/apellido"
            android:id="@+id/ripTvApellido"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:text="@string/edad"
            android:id="@+id/ripTvEdad"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:text="@string/sueldo"
            android:id="@+id/ripTvSueldo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    LinearLayout>

LinearLayout>


Llevara los siguientes String

    <string name="nombre">Nombre : string>
    <string name="apellido">Apellidos : string>
    <string name="edad">Eda : string>
    <string name="sueldo">Sueldo : string>


El cual nos dejara la siguiente vista


5.- Espesaremos a implementar las clases


Crearemos una clase modelo llamada Personal y le definiremos sus propiedades.

public class Personal {
  private String nombre;
  private String apellidos;
  private int edad;
  private Double sueldo;

  public String getNombre() {
    return nombre;
  }

  public void setNombre(String nombre) {
    this.nombre = nombre;
  }

  public String getApellidos() {
    return apellidos;
  }

  public void setApellidos(String apellidos) {
    this.apellidos = apellidos;
  }

  public int getEdad() {
    return edad;
  }

  public void setEdad(int edad) {
    this.edad = edad;
  }

  public Double getSueldo() {
    return sueldo;
  }

  public void setSueldo(Double sueldo) {
    this.sueldo = sueldo;
  }

  public Personal() {
  }

  public Personal(String nombre, String apellidos, int edad, Double sueldo) {
    this.nombre = nombre;
    this.apellidos = apellidos;
    this.edad = edad;
    this.sueldo = sueldo;
  }
}


En la clase ViewHolderPersonal heredamos la clase RecyclerView.ViewHolder.

Definiremos variables para el manejo de los controles, las cuales cargaremos en el constructor.

La instancia que cargaremos a las variables serán los controles de nuestro layout recycler_item_personal, esto para poder modificar sus valores.

Crearemos el método bind el cual se encargara de modificar los valores de estos controles. Recibirá como parámetro un objeto de tipo Personal del cual tomara los valores para las variables.


public class ViewHolderPersonal extends RecyclerView.ViewHolder {
  //declaramos los controles
  TextView nombre, apellido, edad ,sueldo;

  public ViewHolderPersonal(View itemView) {
    super(itemView);
    nombre = itemView.findViewById(R.id.ripTvNombre);
    apellido= itemView.findViewById(R.id.ripTvApellido);
    edad  = itemView.findViewById(R.id.ripTvEdad);
    sueldo = itemView.findViewById(R.id.ripTvSueldo);
  }

  //enlazador
  @SuppressLint("SetTextI18n")
  void bind(Personal personal){
    nombre.setText("Nombre : " + personal.getNombre());
    apellido.setText("Apellid : " + personal.getApellidos());
    edad.setText("Edad : " + String.valueOf(personal.getEdad()));
    sueldo.setText("Sueldo : " + String.valueOf(personal.getSueldo()));
  }
}


Crearemos una clase adaptador para cargar el recyclerView.

Heredaremos un adaptador RecyclerView.Adapter de tipo ViewHolderPersonal el cual previamente creamos y modificamos.


Al realizar la herencia, nos pedirá que creemos un constructor y implementemos sus métodos base.


En el constructor de la clase solicitaremos una lista de objetos personal

En su método onCreateViewHolder, inflaremos el layout recycler_item_personal.

En su método onBindViewHolder, llamaremos al método bind que previamente definimos.

public class PersonalItemRecyclerView extends RecyclerView.Adapter<ViewHolderPersonal>{
  private List personalList;

  public PersonalItemRecyclerView(List personalList){
    this.personalList = personalList;
  }

  @Override
  public ViewHolderPersonal onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item_personal,parent,false);
    return new ViewHolderPersonal(view);
  }

  @Override
  public void onBindViewHolder(ViewHolderPersonal holder, int position) {
    holder.bind(personalList.get(position));
  }

  @Override
  public int getItemCount() {
    return personalList.size();
  }
}


Una vez definida nuestras clases, empezaremos a implementar las clases en nuestra actividad.


Crearemos las variables para la carga del recyclerView y una lista de objetos personal.

Cargaremos nuestra lista de objetos. y implementaremos nuestra clase PersonalItemRecyclerView

public class RecyclerViewActivity extends AppCompatActivity {
  RecyclerView recyclerView;

  RecyclerView.LayoutManager layoutManager;
  PersonalItemRecyclerView adapter;

  List personalList = new ArrayList<>();

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

    recyclerView = findViewById(R.id.arvRvPersonal);

    personalList.add(new Personal("Pablo","Gutierres",25,1200.0));
    personalList.add(new Personal("Aldair","Perez",32,900.0));
    personalList.add(new Personal("Juan","Rojas",26,850.0));
    personalList.add(new Personal("Pedro","Arias",23,1000.0));
    personalList.add(new Personal("Luis","Cruz",22,1200.0));

    layoutManager = new LinearLayoutManager(getApplicationContext());

    adapter = new PersonalItemRecyclerView(personalList);

    recyclerView.setHasFixedSize(true);

    recyclerView.setItemAnimator(new DefaultItemAnimator());

    recyclerView.setLayoutManager(layoutManager);

    recyclerView.setAdapter(adapter);

  }
}


Ejecutaremos nuestro proyecto en un emulador o en un equipo celular.


Bueno esto es todo por hoy programadores, aficionados y curiosos que encontraron este post.

Si tienes alguna duda no dudes en dejarnos tu comentario.

Si quieres mas contenido de este tipo regístrate. y podrás disfrutar de nuestros distintos contenidos.

Nos vemos el próximo miércoles.


Compartir:


0 Comentarios

Este curso no cuenta con comentarios aún; puedes ser el primero, escribenos tu duda, consulta, sugerencia o calificación.

Comentar ahora

Tutor

Tutor
Luis
Desarrollador de Software

Post Relacionados

Como usar FlexBox en ReactNative

En este post aprenderemos a utilizar FlexBox en ReacNative.


Calificación

4.5

5 Comentarios
Comentar ahora