¿Qué es CardView en Android? Todo lo que debes saber autor: Golap Gunjan Barman | Octubre de 2020

CardView fue informado por Google en 2014 como una parte Componentes de diseño de materiales en Android. Objetivo principal CardView el diseño de materiales proporciona una vista unificada de todas las interfaces de usuario basadas en tarjetas, lo que facilita a los desarrolladores la creación de interfaces integradas.

CardView es un FrameLayout con fondo de esquina redondeada y sombra.

En este blog, discutiremos qué opciones ofrece CardView en Android y cómo usarlas correctamente en la aplicación.

Discutamos esto ejemplo. En la siguiente imagen, verá una tarjeta blanca que contiene un contenedor de vista ImageView, dos TextViews, una ImageButton. Este es nuestro CardView. Como mencioné, CardView es un contenedor de visualización o ViewGroup quien heredó su naturaleza FrameLayout que se hereda del propio ViewGroup.

La personalización básica que proporciona CardView incluye Radio de esquina, Altitud, Max. Altitud, ContentPadding, CompatPadding, PreventCornerOverlapy devoto TarjetaDe FondoColor.

El siguiente XML le dará una idea de CardView y su personalización.

<?xml versión = “1.0” codificación = “utf-8”?>
<androidx.cardview.widget.CardView 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 = “250 ppp”
app: cardBackgroundColor = ”@ android: color / white”
aplicación: cardCornerRadius = ”5dp”
aplicación: cardMaxElevation = “1.5 dpi”
aplicación: cardElevation = “1dp”
app: contentPadding = “10dp”
app: contentPaddingBottom = ”0dp”
aplicación: cardPreventCornerOverlap = “true”
app: cardUseCompatPadding = “true”
Android: id = ”@ + id / cardView”
herramientas: contexto = ”. CardActivity ”
>

<Disposición relativa
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 / img”
Android: src = ”@ drawable / cardview”
android: contentDescription = ”CardImageViewDesc”
/>

<Vista de texto
Android: id = ”@ + id / textView”
android: layout_width = “match_parent”
android: layout_height = “wrap_content”
Android: layout_below = ”@ id / img”
android: layout_marginLeft = ”5dp”
android: layout_marginStart = ”5dp”
android: fontFamily = ”sans-serif”
android: gravity = “center_vertical”
android: text = ”@ string / gbandroid_blogs”
android: textSize = “17sp”
android: textStyle = “negrita”
android: textColor = ”@ android: color / black”
/>

<Vista de texto
android: layout_width = “match_parent”
android: layout_height = “wrap_content”
android: layout_below = ”@ id / textView”
android: layout_marginLeft = ”5dp”
android: layout_marginStart = ”5dp”
android: layout_marginTop = ”2dp”
android: fontFamily = ”sans-serif”
android: gravity = “center_vertical”
Android: text = ”@ string / www_gbandroidblogs_com”
android: textStyle = “cursiva”
android: textSize = “15sp”
/>

<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 / favorite”
Android: layout_below = ”@ id / img”
android: layout_marginRight = ”5dp”
android: layout_marginEnd = ”5dp”
android: contentDescription = “FavButtonDesc”
/>

</Disposición relativa>

</androidx.cardview.widget.CardView>

1. Agregue una dependencia de CardView al proyecto

La biblioteca CardView se puede agregar a un proyecto agregando las siguientes dependencias a adiccion en build.gradle (módulo: aplicación),

2. ¿Por qué RelativeLayout dentro de CardView?

Como ya sabemos, CardView es un ViewGroup, pero hereda de FrameLayout, que es la forma más simple de ViewGroup creada para procesar un fotograma a la vez. Es por eso que necesitamos usar RelativeLayout para mantener todas nuestras vistas juntas mientras funciona como una sola diapositiva CardView.

3. Color de fondo de CardView

De forma predeterminada, CardView viene con un color de fondo blanco para la tarjeta, que se puede cambiar de acuerdo con nuestros requisitos utilizando esta función.

La declaración cardBackgroundColor de muestra (blanca) en XML y Java se ve así,

app: cardBackgroundColor = ”@ android: color / white”

cardView.setCardBackgroundColor (Color.WHITE);

4. CardView Altitude

La propiedad CardView Elevation simplemente eleva la vista de la tarjeta en el eje z a una altura igual al valor pasado. Debido a que la altura vino con Android Lollipop, CardView Elevation en versiones anteriores usa un efecto de sombra para crear el efecto asociado. Agrega sangrías a los lados del contenido usando

maxCardElevation + (1 – cos45) * cornerRadius

y arriba y abajo usando

maxCardElevation * 1.5 + (1 – cos45) * cornerRadius

y luego aplica sombras a ese espacio.

En nuestro ejemplo, establecemos la altitud en 1 dp un maxElevation para 1,5 ppp. Ahora, si observa la sección de Java, verá que los valores pasados ​​a los métodos son diferentes de los valores de las propiedades XML. Esto se debe a que podemos definir la naturaleza del valor con XML, pero no con los métodos java, que esperan que el valor esté solo en píxeles (px) y, por lo tanto, necesitamos pasar el número de píxeles que componen el mismo dp que los valores XML.

aplicación: cardElevation = “1dp”

aplicación: cardMaxElevation = “1.5 dpi”

cardView.setCardElevation (3f); // o cardView.setCardElevation (dpToPx (1f));

cardView.setMaxCardElevation (4.5f); // o cardView.setMaxCardElevation (dpToPx (1.5f));

**** en Nexus 5, donde la densidad de píxeles es 3. (dpTopx, 1dp = 1 * 3 = 3px)

5. Radio de esquina de CardView

Radius CardView Corner Radius le da a CardView una esquina redondeada de un radio igual al valor que se le asigna.

Código de muestra para radio de esquina de 5 dpi:

aplicación: cardCornerRadius = ”5dp”

cardView.setRadius (15);

6. Complete el contenido de CardView

El relleno CardView se usa para crear espacio para dibujar sombras, por lo que usamos ContentPadding para agregar un relleno entre los bordes y las vistas secundarias. En nuestro ejemplo, usamos el relleno de contenido para establecer el relleno en todos los bordes en 10 dp y luego el relleno de contenido en la parte inferior en 0 dp para asegurarnos de que no haya relleno en la parte inferior.

app: contentPadding = “10dp”

app: contentPaddingBottom = ”0dp”

cardView.setContentPadding (30, 30, 30, 0);

7. CardView Use Compat Padding

Debido a que CardViews usa un relleno para dibujar sombras en las plataformas antes de Lollipop, el área de contenido cambia en las plataformas antes y después de Lollipop. Para garantizar que el área de contenido siga siendo la misma en todas las plataformas, se utiliza Compat Padding, que simplemente agrega relleno interno en Lollipop y después de las plataformas.

app: cardUseCompatPadding = “true”

cardView.setUseCompatPadding (verdadero);

8. CardView evita que las esquinas se superpongan

CardView evita recortar las vistas de los niños en las plataformas frente a Lollipop debido a la naturaleza poco común del recorte y, más bien, brinda la capacidad de distanciar el contenido de las esquinas redondeadas con Prevent Corner Overlap. La definición en XML y Java se ve así,

aplicación: cardPreventCornerOverlap = “true”

cardView.setPreventCornerOverlap (verdadero);

Eso es todo lo que es CardView y los atributos básicos de cardview. En el próximo blog veremos cómo implementar RecyclerView y CardView al mismo tiempo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *