Interface utilisateur

Ce document explique comment suivre le style Glass et implémenter les bonnes pratiques courantes en matière d'UI qui peuvent optimiser l'expérience de vos utilisateurs. Il couvre les éléments d'interface utilisateur suivants :

• Thème
• Mises en page XML
• Menus
• Pages à balayer

Thème

Le thème Glass que nous vous suggérons d'utiliser présente les caractéristiques suivantes :

• Affiche les activités en plein écran sans barre d'action.
• Applique un arrière-plan noir uni.
• Définit une couleur plus claire pour l'effet de bordure colorée.
• Applique une couleur de texte blanche.

Remarque : Pour en savoir plus sur la création de thèmes, consultez le guide de documentation pour les développeurs Android sur les styles et thèmes.

Voici les paramètres de thème recommandés pour Glass :

 <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
   <item name="android:windowBackground">@android:color/black</item>
   <item name="android:colorEdgeEffect">@android:color/white</item>
   <item name="android:textColor">@android:color/white</item>
 </style>

Mises en page XML

Voici les deux mises en page de base que vos fragments peuvent gonfler :

• Mise en page principale
• Mise en page avec colonne de gauche

Mise en page principale

Cette mise en page définit la marge intérieure et le pied de page standards suggérés pour une fiche. Placez vos propres vues dans le FrameLayout vide.

Voici un exemple de mise en page XML :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <FrameLayout
      android:id="@+id/body_layout"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_margin="@dimen/glass_card_margin"
      app:layout_constraintBottom_toTopOf="@id/footer"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent">

    <!-- Put your widgets inside this FrameLayout. -->

  </FrameLayout>

  <!-- The footer view will grow to fit as much content as possible while the
         timestamp view keeps its width. If the footer text is too long, it
         will be ellipsized with a 40dp margin between it and the timestamp. -->

  <TextView
      android:id="@+id/footer"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="@dimen/glass_card_margin"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@id/timestamp"
      app:layout_constraintStart_toStartOf="parent" />

  <TextView
      android:id="@+id/timestamp"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAlignment="viewEnd"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Mise en page avec colonne de gauche

Cette mise en page définit une colonne de gauche d'un tiers de la largeur et une colonne de droite de deux tiers de la largeur sous la forme de deux classes FrameLayout dans lesquelles vous pouvez placer vos vues. Consultez l'image ci-dessous à titre d'exemple.

Voici un exemple de mise en page XML :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <FrameLayout
      android:id="@+id/left_column"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:background="#303030"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_percent=".333">

    <!-- Put widgets for the left column inside this FrameLayout. -->

  </FrameLayout>

  <FrameLayout
      android:id="@+id/right_column"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_marginTop="@dimen/glass_card_two_column_margin"
      android:layout_marginStart="@dimen/glass_card_two_column_margin"
      android:layout_marginBottom="@dimen/glass_card_two_column_margin"
      android:layout_marginEnd="@dimen/glass_card_margin"
      app:layout_constraintBottom_toTopOf="@id/footer"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/left_column"
      app:layout_constraintTop_toTopOf="parent">

    <!-- Put widgets for the right column inside this FrameLayout. -->

  </FrameLayout>

  <!-- The footer view will grow to fit as much content as possible while the
         timestamp view keeps its width. If the footer text is too long, it
         will be ellipsized with a 40dp margin between it and the timestamp. -->

  <TextView
      android:id="@+id/footer"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="@dimen/glass_card_margin"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@id/timestamp"
      app:layout_constraintStart_toEndOf="@id/left_column" />

  <TextView
      android:id="@+id/timestamp"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginEnd="@dimen/glass_card_margin"
      android:layout_marginBottom="@dimen/glass_card_margin"
      android:ellipsize="end"
      android:singleLine="true"
      android:textAlignment="viewEnd"
      android:textAppearance="?android:attr/textAppearanceSmall"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Dimensions standards

Utilisez les éléments suivants en combinaison avec les mises en page précédentes ou vos propres mises en page pour créer un fichier qui respecte le style standard de Glass. Créez ce fichier sous le nom res/values/dimens.xml dans votre projet Android.

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <!-- The recommended margin for the top, left, and right edges of a card. -->
  <dimen name="glass_card_margin">40dp</dimen>

  <!-- The recommended margin between the bottom of the card and the footer. -->
  <dimen name="glass_card_footer_margin">50dp</dimen>

  <!-- The recommended margin for the left column of the two-column card. -->
  <dimen name="glass_card_two_column_margin">30dp</dimen>

</resources>

Menus

Nous vous suggérons d'utiliser RecyclerView pour créer des menus. Ils doivent être basés sur le fichier de menu Android standard des ressources du projet Android Studio. Android vous permet de remplacer la création de menu standard par votre propre implémentation. Pour cela, procédez comme suit :

1. Créez la mise en page avec RecyclerView et définissez-la comme vue pour votre Activity.
2. Définissez RecyclerView et son adaptateur pour utiliser la collection d'éléments de menu nouvellement créée.
3. Remplacez la méthode onCreateOptionsMenu.
   1. Développez votre menu et ajoutez votre nouvel élément à la collection pour chaque élément de menu.
   2. Appelez la méthode notifyDataSetChanged sur l'adaptateur.

   Kotlin

       override fun onCreateOptionsMenu(menu: Menu): Boolean {
           val menuResource = intent
               .getIntExtra(EXTRA_MENU_KEY, EXTRA_MENU_ITEM_DEFAULT_VALUE)
           if (menuResource != EXTRA_MENU_ITEM_DEFAULT_VALUE) {
               menuInflater.inflate(menuResource, menu)
               for (i in 0 until menu.size()) {
                   val menuItem = menu.getItem(i)
                   menuItems.add(
                       GlassMenuItem(
                           menuItem.itemId, menuItem.icon,
                           menuItem.title.toString()
                       )
                   )
                   adapter.notifyDataSetChanged()
               }
           }
           return super.onCreateOptionsMenu(menu)
       }
       

   Java

       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
         final int menuResource = getIntent()
             .getIntExtra(EXTRA_MENU_KEY, EXTRA_MENU_ITEM_DEFAULT_VALUE);
         if (menuResource != EXTRA_MENU_ITEM_DEFAULT_VALUE) {
           final MenuInflater inflater = getMenuInflater();
           inflater.inflate(menuResource, menu);
   
           for (int i = 0; i < menu.size(); i++) {
             final MenuItem menuItem = menu.getItem(i);
             menuItems.add(
                 new GlassMenuItem(menuItem.getItemId(), menuItem.getIcon(),
                     menuItem.getTitle().toString()));
             adapter.notifyDataSetChanged();
           }
         }
         return super.onCreateOptionsMenu(menu);
       }
       

4. Utilisez OnScrollListener avec LayoutManager et SnapHelper pour déterminer l'option sélectionnée.
5. Écoutez un geste TAP pour gérer l'événement de sélection d'un élément de menu.
6. Créez un Intent avec des informations sur l'élément de menu sélectionné.
7. Définissez un résultat pour cette activité et terminez-la.
8. Appelez startActivityForResult à partir du fragment ou de l'activité où vous souhaitez avoir un menu. Utilisez un geste TAP à cette fin.
9. Remplacez onActivityResult dans le fragment ou l'activité appelant pour gérer l'élément de menu sélectionné.

Consignes

Voici quelques suggestions pour configurer la mise en page de votre menu :

• Taille du texte : 64sp
• Couleur d'arrière-plan : #96000000
• Utilisez des icônes Material Design avec une taille de 64dpx64dp
• Définissez l'indicateur de thème windowIsTranslucent sur true.

L'image suivante est un exemple de mise en page de menu personnalisée :

Pour en savoir plus sur l'implémentation, consultez l'application exemple de carte.

Pages consultables par balayage de l'écran

L'écran et le pavé tactile de Glass fonctionnent ensemble pour afficher des cartes sur lesquelles vous pouvez balayer le doigt de manière pratique. Vous pouvez créer des pages balayables dans votre activité avec l'API Android standard ViewPager.

Consultez la documentation de formation Écran > Diapositive pour en savoir plus sur l'utilisation d'Android  ViewPager pour faire défiler les cartes ou les écrans.