Material Design introduit l'élévation pour les éléments d'interface utilisateur. L'élévation permet aux utilisateurs de comprendre l'importance relative de chaque élément et de se concentrer sur la tâche en cours.
L'élévation d'une vue, représentée par la propriété Z, détermine l'apparence visuelle de son ombre. Les affichages dont les valeurs Z sont élevées projettent des ombres plus grandes et plus douces, et masquent les vues dont les valeurs Z sont basses. Cependant, la valeur Z d'une vue n'affecte pas sa taille.
Les ombres sont dessinées par le parent de la vue en hauteur. Ils sont soumis au rognage de la vue standard et sont rognés par défaut par le parent.
L'élévation est également utile pour créer des animations dans lesquelles les widgets s'élèvent temporairement au-dessus du plan de vue lors de l'exécution d'actions.
Pour en savoir plus, consultez la section Élévation dans Material Design.
Attribuer une élévation aux vues
La valeur Z d'une vue est composée de deux éléments:
- Élévation: composant statique
- Traduction: composant dynamique utilisé pour les animations
Z = elevation + translationZ
Les valeurs Z sont mesurées en dp (pixels indépendants de la densité).
Pour définir l'élévation par défaut (au repos) d'une vue, utilisez l'attribut android:elevation dans la mise en page XML. Pour définir l'élévation d'une vue dans le code d'une activité, utilisez la méthode View.setElevation().
Pour définir la traduction d'une vue, utilisez la méthode View.setTranslationZ().
Les méthodes ViewPropertyAnimator.z() et ViewPropertyAnimator.translationZ() vous permettent d'animer l'élévation des vues. Pour en savoir plus, consultez la documentation de référence de l'API pour ViewPropertyAnimator et le guide du développeur sur l'animation des propriétés.
Vous pouvez également utiliser un StateListAnimator pour spécifier ces animations de manière déclarative. Cela est particulièrement utile dans les cas où les changements d'état déclenchent des animations, par exemple lorsque l'utilisateur appuie sur un bouton.
Pour en savoir plus, consultez Animer les changements d'état d'une vue à l'aide de StateListAnimator.
Personnaliser les ombres et les contours de la vue
Les limites du drawable d'arrière-plan d'une vue déterminent la forme par défaut de son ombre. Les contours représentent la forme extérieure d'un objet graphique et définissent la zone d'ondulation pour le retour tactile.
Prenons l'exemple de la vue suivante, définie avec un drawable d'arrière-plan:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
Le drawable d'arrière-plan est défini comme un rectangle avec des angles arrondis:
<!-- 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 vue projette une ombre avec des angles arrondis, car le drawable d'arrière-plan définit le contour de la vue. En fournissant un contour personnalisé, vous remplacez la forme par défaut de l'ombre d'une vue.
Pour définir un contour personnalisé pour une vue dans votre code, procédez comme suit:
- Étendez la classe
ViewOutlineProvider. - Remplacez la méthode
getOutline(). - Attribuez le nouveau fournisseur de contour à votre vue avec la méthode
View.setOutlineProvider().
Vous pouvez créer des contours ovales et rectangulaires avec des angles arrondis à l'aide des méthodes de la classe Outline. Le fournisseur de contours par défaut pour les vues obtient le contour à partir de l'arrière-plan de la vue. Pour empêcher une vue de projeter une ombre, définissez son fournisseur de contour sur null.
Vues générées par des clips
Le découpage d'une vue vous permet de modifier sa forme. Vous pouvez couper des vues pour assurer leur cohérence avec d'autres éléments de conception ou pour modifier leur forme en réponse à une entrée utilisateur. Vous pouvez rogner une vue selon sa zone de contour à l'aide de la méthode View.setClipToOutline(). Seuls les contours composés de rectangles, de cercles et de rectangles ronds sont compatibles avec le rognage, comme déterminé par la méthode Outline.canClip().
Pour rogner une vue selon la forme d'un drawable, définissez le drawable comme arrière-plan de la vue (comme illustré dans l'exemple précédent) et appelez la méthode View.setClipToOutline().
Le découpage de vues est une opération coûteuse. Par conséquent, n'animez pas la forme que vous utilisez pour découper une vue. Pour obtenir cet effet, utilisez l'animation d'affichage.