CardViewCardView

El widget Cardview es un componente de interfaz de usuario que presenta el contenido de texto e imagen en vistas que son similares a las tarjetas. Esta guía explica cómo usar y personalizar CardView en aplicaciones de Xamarin.Android y mantener la compatibilidad con versiones anteriores con versiones anteriores de Android.The Cardview widget is a UI component that presents text and image content in views that resemble cards. This guide explains how to use and customize CardView in Xamarin.Android applications while maintaining backward compatibility with earlier versions of Android.

Información generalOverview

El Cardview widget, introducido en Android 5.0 (Lollipop), es un componente de interfaz de usuario que presenta el contenido de texto e imagen en vistas que son similares a las tarjetas.The Cardview widget, introduced in Android 5.0 (Lollipop), is a UI component that presents text and image content in views that resemble cards. CardView se implementa como un FrameLayout widget con esquinas redondeadas y una sombra.CardView is implemented as a FrameLayout widget with rounded corners and a shadow. Normalmente, un CardView se utiliza para presentar un elemento de fila única en un ListView o GridView grupo ver.Typically, a CardView is used to present a single row item in a ListView or GridView view group. Por ejemplo, la captura de pantalla siguiente es un ejemplo de una aplicación de reserva de viajes que implementa CardView-tarjetas de destino de viaje en un desplazamiento basadas en ListView:For example, the following screen shot is an example of a travel reservation app that implements CardView-based travel destination cards in a scrollable ListView:

Aplicación de ejemplo con un CardView para cada destino de viaje

Esta guía explica cómo agregar la CardView proyecto de paquete para su Xamarin.Android, cómo agregar CardView para el diseño y cómo personalizar la apariencia de CardView en la aplicación.This guide explains how to add the CardView package to your Xamarin.Android project, how to add CardView to your layout, and how to customize the appearance of CardView in your app. Además, esta guía proporciona una lista detallada de CardView atributos que se pueden cambiar, incluidos los atributos para ayudarle a usar CardView en versiones de Android anteriores a Android 5.0 Lollipop.In addition, this guide provides a detailed list of CardView attributes that you can change, including attributes to help you use CardView on versions of Android earlier than Android 5.0 Lollipop.

RequisitosRequirements

Se requiere lo siguiente para usar nuevo Android 5.0 y versiones posteriores características (incluido CardView) en aplicaciones de Xamarin:The following is required to use new Android 5.0 and later features (including CardView) in Xamarin-based apps:

  • Xamarin.Android – Xamarin.Android 4.20 o posterior debe estar instalado y configurado con Visual Studio o Visual Studio para Mac.Xamarin.Android – Xamarin.Android 4.20 or later must be installed and configured with either Visual Studio or Visual Studio for Mac.

  • SDK de Android – Android 5.0 (API 21) o posterior debe estar instalado a través de Android SDK Manager.Android SDK – Android 5.0 (API 21) or later must be installed via the Android SDK Manager.

  • Java JDK 1.8 – JDK 1.7 puede usarse si se está específicamente dirigidos a API nivel 23 y versiones anteriores.Java JDK 1.8 – JDK 1.7 can be used if you are specifically targetting API level 23 and earlier. Está disponible en JDK 1.8 Oracle.JDK 1.8 is available from Oracle.

La aplicación también debe incluir el Xamarin.Android.Support.v7.CardView paquete.Your app must also include the Xamarin.Android.Support.v7.CardView package. Para agregar el Xamarin.Android.Support.v7.CardView paquetes en Visual Studio para Mac:To add the Xamarin.Android.Support.v7.CardView package in Visual Studio for Mac:

  1. Abra el proyecto, haga clic en paquetes y seleccione agregar paquetes.Open your project, right-click Packages and select Add Packages.

  2. En el agregar paquetes cuadro de diálogo, busque CardView.In the Add Packages dialog, search for CardView.

  3. Seleccione Xamarin Support Library v7 CardView, a continuación, haga clic en Agregar paquete.Select Xamarin Support Library v7 CardView, then click Add Package.

Para agregar el Xamarin.Android.Support.v7.CardView paquetes en Visual Studio:To add the Xamarin.Android.Support.v7.CardView package in Visual Studio:

  1. Abra el proyecto, haga clic en el referencias nodo (en el el Explorador de soluciones panel) y seleccione administrar paquetes NuGet... .Open your project, right-click the References node (in the Solution Explorer pane) and select Manage NuGet Packages....

  2. Cuando el administrar paquetes de NuGet muestra el cuadro de diálogo, escriba CardView en el cuadro de búsqueda.When the Manage NuGet Packages dialog is displayed, enter CardView in the search box.

  3. Cuando Xamarin Support Library v7 CardView aparece, haga clic en instalar.When Xamarin Support Library v7 CardView appears, click Install.

Para obtener información sobre cómo configurar un proyecto de aplicación de Android 5.0, consulte configuración de un proyecto de Android 5.0.To learn how to configure an Android 5.0 app project, see Setting Up an Android 5.0 Project. Para obtener más información acerca de cómo instalar paquetes de NuGet, consulte Tutorial: Incluir NuGet en el proyecto.For more information about installing NuGet packages, see Walkthrough: Including a NuGet in your project.

Introducción a CardViewIntroducing CardView

El valor predeterminado CardView es similar a una tarjeta con esquinas redondeadas como mínimo y una leve sombrea blanco.The default CardView resembles a white card with minimally rounded corners and a slight shadow. En el siguiente ejemplo Main.axml diseño muestra un único CardView widget que contiene un TextView:The following example Main.axml layout displays a single CardView widget that contains a TextView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal">
        <TextView
            android:text="Basic CardView"
            android:layout_marginTop="0dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
    </android.support.v7.widget.CardView>
</LinearLayout>

Si usa este código XML para reemplazar el contenido existente de Main.axml, no olvide Comente cualquier código en MainActivity.cs que hace referencia a recursos en el XML anterior.If you use this XML to replace the existing contents of Main.axml, be sure to comment out any code in MainActivity.cs that refers to resources in the previous XML.

Este ejemplo de diseño crea un valor predeterminado CardView con una sola línea de texto, como se muestra en la siguiente captura de pantalla:This layout example creates a default CardView with a single line of text as shown in the following screen shot:

Captura de pantalla de CardView con un fondo blanco y línea de textoScreenshot of CardView with white background and line of text

En este ejemplo, se establece el estilo de la aplicación a la luz de Material de tema (Theme.Material.Light) para que el CardView bordes y sombras son más fáciles de ver.In this example, the app style is set to the light Material Theme (Theme.Material.Light) so that the CardView shadows and edges are easier to see. Para obtener más información acerca de las aplicaciones de creación de temas Android 5.0, consulte Material tema.For more information about theming Android 5.0 apps, see Material Theme. En la siguiente sección, se obtendrá información sobre cómo personalizar CardView para una aplicación.In the next section, we'll learn how to customize CardView for an application.

Personalizar CardViewCustomizing CardView

Puede modificar las opciones básicas CardView atributos para personalizar la apariencia de la CardView en la aplicación.You can modify the basic CardView attributes to customize the appearance of the CardView in your app. Por ejemplo, la elevación de la CardView puede aumentarse para convertir una sombra más grande (lo que hace que la tarjeta se parezca a float más alto por encima del fondo).For example, the elevation of the CardView can be increased to cast a larger shadow (which makes the card seem to float higher above the background). Además, se puede aumentar el radio de redondeo para hacer las esquinas de la tarjeta más redondeadas.Also, the corner radius can be increased to make the corners of the card more rounded.

En el siguiente ejemplo de diseño, una personalizada CardView se usa para crear una simulación de una fotografía de impresión (una "instantánea").In the next layout example, a customized CardView is used to create a simulation of a print photograph (a "snapshot"). Un ImageView se agrega a la CardView para mostrar la imagen y un TextView se coloca bajo el ImageView para mostrar el título de la imagen.An ImageView is added to the CardView for displaying the image, and a TextView is positioned below the ImageView for displaying the title of the image. En este ejemplo de diseño, el CardView tiene las siguientes personalizaciones:In this example layout, the CardView has the following customizations:

  • El cardElevation ha aumentado a 4dp para convertir una sombra más grande.The cardElevation is increased to 4dp to cast a larger shadow.
  • El cardCornerRadius ha aumentado a 5dp para que las esquinas aparezcan más redondeado.The cardCornerRadius is increased to 5dp to make the corners appear more rounded.

Dado que CardView es proporcionada por la biblioteca de compatibilidad de Android v7, sus atributos no están disponibles desde el android: espacio de nombres.Because CardView is provided by the Android v7 support library, its attributes are not available from the android: namespace. Por lo tanto, debe definir su propio espacio de nombres XML y usar ese espacio de nombres como el CardView prefijo del atributo.Therefore, you must define your own XML namespace and use that namespace as the CardView attribute prefix. En el siguiente ejemplo de diseño, usaremos esta línea para definir un espacio de nombres denominado cardview:In the layout example below, we will use this line to define a namespace called cardview:

    xmlns:cardview="http://schemas.android.com/apk/res-auto"

Puede llamar a este espacio de nombres card_view o incluso myapp si elige (es accesible únicamente dentro del ámbito de este archivo).You can call this namespace card_view or even myapp if you choose (it's accessible only within the scope of this file). Todo lo que elegir llamar a este espacio de nombres, debe usar como prefijo la CardView atributo que desea modificar.Whatever you choose to call this namespace, you must use it to prefix the CardView attribute that you want to modify. En este ejemplo de diseño, el cardview espacio de nombres es el prefijo de cardElevation y cardCornerRadius:In this layout example, the cardview namespace is the prefix for cardElevation and cardCornerRadius:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal"
        cardview:cardElevation="4dp"
        cardview:cardCornerRadius="5dp">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="240dp"
            android:orientation="vertical"
            android:padding="8dp">
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="190dp"
                android:id="@+id/imageView"
                android:scaleType="centerCrop" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#333333"
                android:text="Photo Title"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="5dp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Cuando se usa en este ejemplo de diseño para mostrar una imagen en una aplicación de visualización de fotografías, la CardView tiene la apariencia de una instantánea de la foto, como se muestra en la captura de pantalla siguiente:When this layout example is used to display an image in a photo viewing app, the CardView has the appearance of a photo snapshot, as depicted in the following screenshot:

CardView con una imagen y título debajo de la imagenCardView with an image and caption below the image

Esta captura de pantalla se toma de la RecyclerViewer aplicación de ejemplo que usa un RecyclerView widget para presentar una lista desplazable de CardView imágenes para visualizar fotos.This screenshot is taken from the RecyclerViewer sample app, which uses a RecyclerView widget to present a scrolling list of CardView images for viewing photos. Para obtener más información acerca de RecyclerView, consulte el RecyclerView guía.For more information about RecyclerView, see the RecyclerView guide.

Tenga en cuenta que un CardView puede mostrar más de una vista secundaria en su área de contenido.Notice that a CardView can display more than one child view in its content area. Por ejemplo, en el ejemplo de aplicación de visualización de fotografías de anterior, el área de contenido está formado por un ListView que contiene un ImageView y un TextView.For example, in the above photo viewing app example, the content area is comprised of a ListView that contains an ImageView and a TextView. Aunque CardView instancias a menudo se organizan verticalmente, también puede organizarlos horizontalmente (consulte crear un estilo de vista personalizado para una captura de pantalla de ejemplo).Although CardView instances are often arranged vertically, you can also arrange them horizontally (see Creating a Custom View Style for an example screenshot).

Opciones de diseño CardViewCardView Layout Options

CardView pueden personalizar los diseños estableciendo uno o varios atributos que afectan a su relleno, elevación, radio de redondeo y color de fondo:CardView layouts can be customized by setting one or more attributes that affect its padding, elevation, corner radius, and background color:

Diagrama de CardView atributosDiagram of CardView attributes

Cada atributo también se puede cambiar dinámicamente mediante una llamada a un homólogo CardView (método) (para obtener más información sobre CardView métodos, vea el referencia de clase CardView).Each attribute can also be changed dynamically by calling a counterpart CardView method (for more information on CardView methods, see the CardView class reference). Tenga en cuenta que estos atributos (excepto para el color de fondo) aceptan un valor de dimensión, que es un número decimal seguido de la unidad.Note that these attributes (except for background color) accept a dimension value, which is a decimal number followed by the unit. Por ejemplo, 11.5dp especifica 11,5 píxeles independientes de la densidad.For example, 11.5dp specifies 11.5 density-independent pixels.

RellenoPadding

CardView ofrece cinco atributos de relleno para colocar el contenido dentro de la tarjeta.CardView offers five padding attributes to position content within the card. Puede establecerlas en su diseño XML o puede llamar a métodos análogos en el código:You can set them in your layout XML or you can call analogous methods in your code:

Diagrama de CardView atributos de rellenoDiagram of CardView padding attributes

Los atributos de relleno son explicarse como sigue:The padding attributes are explained as follows:

  • contentPadding – Espaciado entre las vistas secundarias de interno el CardView y todos los bordes de la tarjeta.contentPadding – Inner padding between the child views of the CardView and all edges of the card.

  • contentPaddingBottom – Espaciado entre las vistas secundarias de interno el CardView y el borde inferior de la tarjeta.contentPaddingBottom – Inner padding between the child views of the CardView and the bottom edge of the card.

  • contentPaddingLeft – Espaciado entre las vistas secundarias de interno el CardView y el borde izquierdo de la tarjeta.contentPaddingLeft – Inner padding between the child views of the CardView and the left edge of the card.

  • contentPaddingRight – Espaciado entre las vistas secundarias de interno el CardView y el borde derecho de la tarjeta.contentPaddingRight – Inner padding between the child views of the CardView and the right edge of the card.

  • contentPaddingTop – Espaciado entre las vistas secundarias de interno el CardView y el borde superior de la tarjeta.contentPaddingTop – Inner padding between the child views of the CardView and the top edge of the card.

Los atributos de contenido de relleno son con respecto a los límites del área de contenido en lugar de a cualquier widget determinado que se encuentra dentro del área de contenido.Content padding attributes are relative to the boundary of the content area rather than to any given widget located within the content area. Por ejemplo, si contentPadding suficientemente se han aumentado en la aplicación de visualización de fotografías, la CardView desea recortar la imagen y el texto que aparece en la tarjeta.For example, if contentPadding were sufficiently increased in the photo viewing app, the CardView would crop both the image and the text shown on the card.

ElevaciónElevation

CardView ofrece dos atributos de elevación para controlar su elevación y, como resultado, el tamaño de su sombra:CardView offers two elevation attributes to control its elevation and, as a result, the size of its shadow:

Diagrama de atributos de elevación CardViewDiagram of CardView elevation attributes

Los atributos de elevación se explican los siguientes:The elevation attributes are explained as follows:

  • cardElevation – La elevación de la CardView (representa su eje Z).cardElevation – The elevation of the CardView (represents its Z axis).

  • cardMaxElevation – El valor máximo de la CardViewde elevación.cardMaxElevation – The maximum value of the CardView's elevation.

Los valores mayores de cardElevation aumentar el tamaño de la sombra para realizar CardView parecen float más alto por encima del fondo.Larger values of cardElevation increase the shadow size to make CardView seem to float higher above the background. El cardElevation atributo también determina el orden de dibujo de superposición de las vistas; es decir, el CardView se dibujará en otra vista que se superponen con un valor superior de elevación y versiones posteriores de todas las vistas que se superponen con un valor menor de elevación.The cardElevation attribute also determines the drawing order of overlapping views; that is, the CardView will be drawn under another overlapping view with a higher elevation setting and above any overlapping views with a lower elevation setting. El cardMaxElevation opción es útil para cuando la aplicación cambia dinámicamente a elevación – impide que la sombra extender más allá del límite que se define con esta configuración.The cardMaxElevation setting is useful for when your app changes elevation dynamically – it prevents the shadow from extending past the limit that you define with this setting.

Radio de redondeo y Color de fondoCorner Radius and Background Color

CardView ofrece los atributos que puede usar para controlar el radio de redondeo y su color de fondo.CardView offers attributes that you can use to control its corner radius and its background color. Estas dos propiedades permiten cambiar el estilo general de la CardView:These two properties allow you change the overall style of the CardView:

Diagrama de esquina CardView radious y atributos de color de fondoDiagram of CardView corner radious and background color attributes

Estos atributos son explicarse como sigue:These attributes are explained as follows:

  • cardCornerRadius – El radio de redondeo de las esquinas de la CardView.cardCornerRadius – The corner radius of all corners of the CardView.

  • cardBackgroundColor – El color de fondo de la CardView.cardBackgroundColor – The background color of the CardView.

En este diagrama, cardCornerRadius está establecido en un 10dp más redondeado y cardBackgroundColor está establecido en "#FFFFCC" (amarillo claro).In this diagram, cardCornerRadius is set to a more rounded 10dp and cardBackgroundColor is set to "#FFFFCC" (light yellow).

CompatibilidadCompatibility

Puede usar CardView en versiones de Android anteriores a Android 5.0 Lollipop.You can use CardView on versions of Android earlier than Android 5.0 Lollipop. Dado que CardView forma parte de la biblioteca de compatibilidad de Android v7, puede usar CardView con Android 2.1 (API de nivel 7) y versiones posteriores.Because CardView is part of the Android v7 support library, you can use CardView with Android 2.1 (API level 7) and higher. Sin embargo, debe instalar la Xamarin.Android.Support.v7.CardView paquete tal como se describe en requisitosdescritos anteriormente.However, you must install the Xamarin.Android.Support.v7.CardView package as described in Requirements, above.

CardView muestra un comportamiento ligeramente diferente en los dispositivos antes de Lollipop (API nivel 21):CardView exhibits slightly different behavior on devices before Lollipop (API level 21):

  • CardView usa una implementación mediante programación de instantáneas que agrega relleno adicional.CardView uses a programmatic shadow implementation that adds additional padding.

  • CardView no recorta vistas secundarias que se intersecan con el CardViewdel esquinas redondeadas.CardView does not clip child views that intersect with the CardView's rounded corners.

Para ayudarle a administrar estas diferencias de compatibilidad, CardView proporciona varios atributos adicionales que se pueden configurar en su diseño:To help in managing these compatibility differences, CardView provides several additional attributes that you can configure in your layout:

  • cardPreventCornerOverlap – Establezca este atributo en true agregar relleno cuando la aplicación se está ejecutando en anteriores versiones de Android (nivel de API 20 y versiones anterior).cardPreventCornerOverlap – Set this attribute to true to add padding when your app is running on earlier Android versions (API level 20 and earlier). Esta configuración evita CardView contenido desde que se cruzan con los CardViewdel esquinas redondeadas.This setting prevents CardView content from intersecting with the CardView's rounded corners.

  • cardUseCompatPadding – Establezca este atributo en true agregar relleno cuando la aplicación se ejecuta en las versiones de Android a o mayor que el nivel de API 21.cardUseCompatPadding – Set this attribute to true to add padding when your app is running in versions of Android at or greater than API level 21. Si desea usar CardView en dispositivos de círculo previo y que parecen iguales en círculo (o posterior), establezca este atributo en true.If you want to use CardView on pre-Lollipop devices and have it look the same on Lollipop (or later), set this attribute to true. Cuando este atributo está habilitado, CardView agrega relleno adicional para dibujar sombras cuando se ejecuta en dispositivos Lollipop previa.When this attribute is enabled, CardView adds additional padding to draw shadows when it runs on pre-Lollipop devices. Esto ayuda a salvar las diferencias en el margen de que se presentan cuando las implementaciones de instantáneas mediante programación previa Lollipop están en vigor.This helps to overcome the differences in padding that are introduced when pre-Lollipop programmatic shadow implementations are in effect.

Para obtener más información sobre cómo mantener la compatibilidad con versiones anteriores de Android, consulte mantener compatibilidad.For more information about maintaining compatibility with earlier versions of Android, see Maintaining Compatibility.

ResumenSummary

Esta guía presentan las nuevas CardView widget incluido en Android 5.0 (Lollipop).This guide introduced the new CardView widget included in Android 5.0 (Lollipop). Se ha demostrado el valor predeterminado CardView apariencia y se explica cómo personalizar CardView cambiando su elevación, redondeados de las esquinas, relleno de contenido y el color de fondo.It demonstrated the default CardView appearance and explained how to customize CardView by changing its elevation, corner roundness, content padding, and background color. Se enumeran los CardView atributos de diseño (con diagramas de referencia) y se explica cómo usar CardView en dispositivos Android anteriores a Android 5.0 Lollipop.It listed the CardView layout attributes (with reference diagrams), and explained how to use CardView on Android devices earlier than Android 5.0 Lollipop. Para obtener más información acerca de CardView, consulte el referencia de clase CardView.For more information about CardView, see the CardView class reference.