Cómo crear vistas de recorte y sombras

Prueba el método de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a trabajar con temas en Compose.

Material Design introduce una elevación para los elementos de la IU. La elevación ayuda a los usuarios comprender la importancia relativa de cada elemento y centrar su atención en la tarea actual.

La elevación de una vista, representada por la propiedad Z, determina la la apariencia visual de su sombra. Las vistas con valores Z más altos tocan más grandes, sombras más suaves y ocluyen las vistas con valores Z más bajos. Sin embargo, el El valor Z de una vista no afecta su tamaño.

Imagen que muestra cómo la elevación de una vista produce una sombra.
Figura 1: Elevación en el eje Z y la sombra resultante.

El elemento superior de la vista elevada se encarga de dibujar las sombras. Están sujetos a recorte de vista estándar, y el elemento superior las recorta de forma predeterminada.

La elevación también es útil para crear animaciones donde los widgets suben temporalmente sobre el plano visual cuando realices acciones.

Para obtener más información, consulta Elevación en Material Design

Cómo asignar elevación a tus vistas

El valor Z de una vista tiene dos componentes:

  • Elevación: el componente estático
  • Traducción: el componente dinámico usado para animaciones

Z = elevation + translationZ

Los valores Z se miden en dp (píxeles independientes de la densidad).

Una imagen que muestra distintas sombras para distintas elevaciones en dp
Figura 2: Diferentes sombras para diferentes elevaciones en dp

Para establecer la elevación predeterminada (en reposo) de una vista, usa la tecla Atributo android:elevation en el diseño XML. Cómo configurar la elevación de una vista en el código de una actividad, usa la View.setElevation() .

Para establecer la traducción de una vista, usa la View.setTranslationZ() .

El ViewPropertyAnimator.z() y ViewPropertyAnimator.translationZ() te permiten animar la elevación de las vistas. Para obtener más información, consulta la Referencia de API para ViewPropertyAnimator y la propiedad de animación para desarrolladores.

También puedes usar StateListAnimator para especificar estas animaciones de manera declarativa. Esto es especialmente útil para casos en los que los cambios de estado activan animaciones, como cuando el usuario presiona un botón. Para obtener más información, consulta Vista animada cambia de estado con StateListAnimator.

Cómo personalizar las sombras y los contornos de la vista

Los límites del elemento de diseño de fondo de una vista determinan la forma predeterminada de su sombra. Los contornos representan la forma externa de un objeto gráfico y definir el área de la onda para la respuesta táctil.

Considera la siguiente vista, que se define con un elemento de diseño en segundo plano:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

El elemento de diseño en segundo plano está definido como un rectángulo con esquinas redondeadas:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

La vista proyecta una sombra con esquinas redondeadas, ya que el elemento de diseño en segundo plano define el contorno de la vista. Proporcionar un esquema personalizado anula la opción de la sombra de una vista.

Si deseas definir un esquema personalizado para una vista en tu código, haz lo siguiente:

  1. Amplía el alcance ViewOutlineProvider .
  2. Anula el getOutline() .
  3. Asigna el nuevo proveedor de contornos a tu vista con el View.setOutlineProvider() .

Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante la métodos en la Outline . El proveedor de contornos predeterminado para las vistas obtiene el esquema del el fondo de la vista. Para evitar que una vista proyecte una sombra, establece la proveedor de Outline a null.

Vistas de clips

Las vistas de recorte te permiten cambiar la forma de una vista. Puedes recortar vistas para coherencia con otros elementos de diseño o cambiar la forma de una vista de respuesta a la entrada del usuario. Puedes recortar una vista a partir de su área de contorno con el botón View.setClipToOutline() . Solo admiten contornos que son rectángulos, círculos y rectángulos redondos. recortes, según lo determine el Outline.canClip() .

Para recortar una vista a partir de un elemento de diseño, establece el elemento de diseño como fondo de la vista, como se muestra en el ejemplo anterior, y llamar el método View.setClipToOutline()

Recortar vistas es una operación costosa, así que no animes la forma que usas para recortar una vista. Para lograr este efecto, usa el revelar animación.