RecyclerView con CardView en Android | de Golap Gunjan Barman | Noviembre de 2020

Diseño personalizado (CardView para RecyclerView)

Este diseño representa los elementos de RecyclerView. Para ver los elementos en RecyclerView, usamos cardView para qué. Los siguientes códigos representan el elemento recyclerView en el que usamos el widget cardView:

<androidx.cardview.widget.CardView xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = «match_parent»
android: layout_height = «300dp»
xmlns: app = «http://schemas.android.com/apk/res-auto»
aplicación: cardBackgroundColor = «@ android: color / white»
aplicación: cardCornerRadius = «8dp»
aplicación: cardElevation = «5dp»
aplicación: contentPadding = «10dp»
aplicación: contentPaddingBottom = «0dp»
aplicación: cardPreventCornerOverlap = «true»
aplicación: cardUseCompatPadding = «true»
android: id = «@ + id / cardView»>

<RelativeLayout
android: id = «@ + id / item»
android: layout_width = «match_parent»
android: layout_height = «match_parent»>

<ImageView
android: layout_width = «match_parent»
android: layout_height = «180dp»
android: scaleType = «centerCrop»
android: id = «@ + id / image»
android: src = «@ drawable / ic_launcher_background»
android: contentDescription = «CardImageViewDesc» />

<TextView
android: id = «@ + id / nombre»
android: layout_width = «match_parent»
android: layout_height = «wrap_content»
android: layout_below = «@ id / image»
android: layout_marginStart = «5dp»
android: fontFamily = «sans-serif»
android: gravity = «center_vertical»
android: text = «LOREM IPSUM»
android: textSize = «17sp»
android: textStyle = «negrita»
android: layout_marginTop = «8dp»
android: textColor = «@ android: color / black» />

<TextView
android: id = «@ + id / tag»
android: layout_width = «match_parent»
android: layout_height = «wrap_content»
android: layout_below = «@ id / nombre»
android: layout_marginLeft = «5dp»
android: layout_marginStart = «5dp»
android: layout_marginTop = «2dp»
android: fontFamily = «sans-serif»
android: gravity = «center_vertical»
android: text = «Lorem ipsum es un texto de marcador de posición comúnmente utilizado en las industrias de gráficos, impresión y publicación para obtener una vista previa de diseños y plantillas visuales».
android: textStyle = «cursiva»
android: textSize = «15sp»
android: maxLines = «2»
android: layout_toStartOf = «@ + id / imageButton» />

<ImageButton
android: id = «@ + id / imageButton»
android: layout_width = «wrap_content»
android: layout_height = «match_parent»
android: layout_alignParentEnd = «true»
android: layout_alignParentRight = «true»
android: background = «? attr / selectableItemBackgroundBorderless»
android: src = «@ drawable / ic_action_name»
android: layout_below = «@ id / image»
android: layout_marginRight = «5dp»
android: layout_marginEnd = «5dp»
android: contentDescription = «FavButtonDesc» />

Clase de modelo

los METRO.La clase odel es una clase Java personalizada que actúa como una estructura para contener información para cada elemento RecyclerView. El siguiente código explica nuestra clase de modelo:

paquete com.codewithgolap.cardviewnrecyclerview;

Modelo de clase pública {
int image;
Nombre de cadena, etiqueta;

modelo público () {
}

Modelo público (imagen int, nombre de cadena, etiqueta de cadena) {
this.image = imagen;
this.name = nombre;
this.tag = etiqueta;
}

public int getImage () {
devolver imagen;
}

public void setImage (int image) {
this.image = imagen;
}

public String getName () {
nombre de retorno;
}

setName public void (nombre de cadena) {
this.name = nombre;
}

public String getTag () {
etiqueta de devolución;
}

public void setTag (etiqueta de cadena) {
this.tag = etiqueta;
}
}

ViewHolder clase

ViewHolder es una clase java que almacena la referencia a las vistas de diseño de las tarjetas que se pueden modificar durante la ejecución del programa a partir de una lista de datos obtenidos de bases de datos en línea o agregados de alguna otra manera.

la clase pública CustomAdapter extiende RecyclerView.Adapter {
// crea una lista para pasar nuestra clase de modelo
Lista modelList;
Contexto de contexto;
CustomAdapter público (Lista modelList, Context context) {
this.modelList = modelList;
this.context = context;
}
@NonNull
@Paso superior
public MyViewHolder onCreateViewHolder (@NonNull ViewGroup parent, int viewType) {
// inflar nuestra vista personalizada
Ver Vista = LayoutInflater.from (parent.getContext ())
.inflate (R.layout.custom_layout, parent, false);
return new MyViewHolder (ver);
}
@Paso superior
public void onBindViewHolder (@NonNull MyViewHolder holder, int position) {
// vincular todas las vistas personalizadas según su ubicación
// para obtener las posiciones que llamamos nuestra clase Modelo
modelo final model = modelList.get (posición);
holder.name.setText (model.getName ());
holder.tag.setText (model.getTag ());
holder.imageView.setImageDrawable (context.getResources (). getDrawable (model.getImage ()));

}
@Paso superior
public int getItemCount () {
return modelList.size ();
}

// toda la vista personalizada se mantendrá aquí o se inicializará aquí dentro de MyViewHolder
class MyViewHolder extiende RecyclerView.ViewHolder {
ImageView imageView;
Nombre de TextView, etiqueta;
RelativeLayout relatedLayout;
public MyViewHolder (@NonNull View itemView) {
super (itemView);
imageView = itemView.findViewById (R.id.image);
nombre = itemView.findViewById (R.id.name);
etiqueta = itemView.findViewById (R.id.tag);
RelativoLayout = itemView.findViewById (R.id.item);
}
}
}

Clase MainActivity

Aquí llamamos a nuestros elementos que necesitamos mostrar en recyclingView, configuramos nuestro adaptador con recyclingView.

activity_main.xml:

<RelativeLayout 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»
herramientas: context = «. MainActivity»>

<androidx.recyclerview.widget.RecyclerView
android: layout_width = «match_parent»
android: layout_height = «match_parent»
android: id = «@ + id / recyclerView» />

MainActivity.java:

paquete com.codewithgolap.cardviewnrecyclerview;

importar androidx.appcompat.app.AppCompatActivity;
importar androidx.recyclerview.widget.LinearLayoutManager;
importar androidx.recyclerview.widget.RecyclerView;

importar android.os.Bundle;

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

public class MainActivity extiende AppCompatActivity {

Reciclador RecyclerView;
Lista modelList;
Adaptador RecyclerView.Adapter;

@Paso superior
protected void onCreate (Bundle SavedInstanceState) {
super.onCreate (SavedInstanceState);
setContentView (R.layout.activity_main);

modelList = new ArrayList ();
reciclador = findViewById (R.id.recyclerView);
reciclador.setHasFixedSize (verdadero);
reciclar.setLayoutManager (nuevo LinearLayoutManager (esto));
// llama a nuestros artículos
modelList.add (new Model (R.drawable.mount_everest, «Mount Everest», «Mount Everest) es la montaña más alta de la Tierra sobre el nivel del mar, ubicada en el subrango Mahalangur Himal del Himalaya. La frontera entre China y Nepal cruza su cumbre El punto. La elevación oficial actual de 8.848 m (29.029 pies), reconocida por China y Nepal, fue establecida por una prospección india de 1955 y confirmada por una prospección china de 1975. «));
modelList.add (nuevo Modelo (R.drawable.ktwo, «K2», «K2, a 8.611 metros (28.251 pies) sobre el nivel del mar, es la segunda montaña más alta del mundo, después del Monte Everest a 8.848 metros (29.029 ft) Se encuentra en la frontera entre China y Pakistán entre Baltistán en la región de Gilgit-Baltistán en el norte de Pakistán y el municipio de Dafdar en el condado autónomo de Taxkorgan Tajik en Xinjiang, China. «));
modelList.add (el nuevo modelo (R.drawable.kanchenjunga, «Kangchenjunga», «Kangchenjunga, también deletreado Kanchenjunga) es la tercera montaña más alta del mundo. Se eleva con una elevación de 8.586 m (28.169 pies) en una sección del Himalaya llamado Kangchenjunga Himal limita al oeste con el río Tamur, al norte con el Lhonak Chu y Jongsang La, y al este con el río Teesta. «));
modelList.add (nuevo modelo (R.drawable.lhotse, «Lhotse», «Lhotse es la cuarta montaña más alta del mundo a 8.516 metros (27.940 pies), después del Monte Everest, K2 y Kangchenjunga. El macizo del Everest, Lhotse está conectado con el último pico a través del Col. Sur. Lhotse significa “Pico Sur” en tibetano. «));
modelList.add (nuevo Modelo (R.drawable.makalu, «Makalu», «Makalu es la quinta montaña más alta del mundo con 8.485 metros (27.838 pies). Se encuentra en el Himalaya Mahalangur, 19 km (12 millas) al sureste del Monte Everest, en la frontera entre Nepal y la Región Autónoma del Tíbet, China. Uno de los ocho mil, Makalu es un pico aislado cuya forma es una pirámide de cuatro lados. «));
modelList.add (new Model (R.drawable.chooyu, «Cho Oyu», «es la sexta montaña más alta del mundo a 8.188 metros (26.864 pies) sobre el nivel del mar. Cho Oyu significa » Diosa turquesa «en tibetano La montaña es el pico principal más occidental de la subsección de Khumbu del Mahalangur Himalaya a 20 km al oeste del Monte Everest. La montaña está ubicada en la frontera entre China y Nepal. «));
modelList.add (new Model (R.drawable.dhaulagiri_mountain, «Dhaulagiri», «El macizo de Dhaulagiri en Nepal se extiende 120 km (70 millas) desde el río Kaligandaki en el oeste hasta el Bheri. Este macizo limita al norte y al sur Al oeste de los afluentes del río Bheri y al sureste del Myagdi Khola. Dhaulagiri es la séptima montaña más alta del mundo a 8.167 metros (26.795 pies) sobre el nivel del mar, y la montaña más alta dentro de las fronteras de un solo país (Nepal ). «));

// inicializa el adaptador con la lista de modelos y el contexto
adapter = new CustomAdapter (modelList, getApplicationContext ());
// establece el adaptador en recyclerView
reciclador.setAdapter (adaptador);
}
}