Interfaccia utente

Questo documento illustra come seguire lo stile di Glass e implementare le best practice comuni per la UI che possono ottimizzare l'esperienza utente. Sono inclusi i seguenti elementi dell'interfaccia utente:

Tema

Il tema Glass che ti suggeriamo di utilizzare ha le seguenti caratteristiche:

  • Mostra le attività a schermo intero senza barra delle azioni.
  • Applica uno sfondo nero in tinta unita.
  • Imposta il colore più chiaro per l'effetto bordo colorato.
  • Applica un colore del testo bianco.

Di seguito sono riportate le impostazioni del tema consigliate per 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>

Layout XML

Di seguito sono riportati i due layout di base delle schede che possono essere espansi dai frammenti:

Layout principale

Questo layout definisce il piè di pagina e il padding standard suggeriti per una scheda. Inserisci le tue visualizzazioni nel FrameLayout vuoto.

Il riquadro centrale occupa la maggior parte dell&#39;interno dello schermo con 560 x 240 pixel, con una piccola barra in basso di 560 x 40 pixel. Sono presenti anche quattro piccoli blocchi di 40 x 40 pixel, uno in ogni angolo

Ecco un esempio di layout 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>

Layout della colonna sinistra

Questo layout definisce una colonna a sinistra con larghezza di un terzo e una colonna a destra con larghezza di due terzi sotto forma di due classi FrameLayout in cui puoi inserire le tue visualizzazioni. Fai riferimento all'immagine che segue per vedere un esempio.

Mostra una colonna a sinistra di 240 x 360 pixel, che sposta il layout principale. Le dimensioni si adattano, l&#39;area principale è 330 x 240 pixel, con una piccola barra inferiore di 330 x 40 pixel. I due angoli a destra hanno due piccole caselle di 40 x 40 pixel e ci sono altre quattro caselle di 30 x 40 pixel, due negli angoli inferiori della colonna di sinistra e due sul lato sinistro del layout principale, una in alto e una in basso.

Ecco un esempio di layout 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>

Dimensioni standard

Utilizza quanto segue in combinazione con i layout precedenti o con i tuoi layout per creare un file che rispetti lo stile standard di Glass. Crea questo file come res/values/dimens.xml nel tuo progetto 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>

Ti consigliamo di utilizzare RecyclerView per creare i menu. Devono essere basati sul file di menu Android standard delle risorse del progetto Android Studio. Android ti consente di ignorare la creazione del menu standard e sostituirlo con la tua implementazione. Per farlo, segui questi passaggi:

  1. Crea il layout con RecyclerView e impostalo come visualizzazione per Activity.
  2. Imposta RecyclerView e il relativo adattatore in modo che utilizzino la raccolta di voci di menu appena creata.
  3. Esegui l'override del metodo onCreateOptionsMenu.
    1. Espandi il menu e aggiungi il nuovo elemento alla raccolta per ogni voce del menu.
    2. Chiama il metodo notifyDataSetChanged sull'adattatore.

    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. Utilizza OnScrollListener insieme a LayoutManager e SnapHelper per determinare quale opzione è stata selezionata.
  5. Ascolta un gesto TAP per gestire l'evento di selezione della voce di menu.
  6. Crea un Intent con informazioni sulla voce di menu selezionata.
  7. Imposta un risultato per questa attività e completala.
  8. Chiama startActivityForResult dal fragment o dall'attività in cui vuoi visualizzare un menu. Utilizza un gesto TAP per questo scopo.
  9. Esegui l'override di onActivityResult nel fragment o nell'attività di chiamata per gestire la voce di menu selezionata.

Linee guida

Di seguito è riportato un elenco di suggerimenti su come configurare il layout del menu:

L'immagine seguente è un esempio di layout del menu personalizzato:

Questa semplice immagine mostra uno sfondo nero con le parole &quot;Layout MENU&quot; centrate sullo schermo e un simbolo di telefono adiacente.

Per informazioni dettagliate sull'implementazione, consulta l'app di esempio per le schede.

Pagine scorrevoli

Il display e il touchpad di Glass funzionano insieme per mostrare le schede scorrevoli in modo pratico. Puoi creare pagine scorrevoli nella tua attività con l'API Android ViewPager standard.

Consulta la documentazione di formazione Scorrimento schermo per saperne di più su come utilizzare Android ViewPager per scorrere le schede o le schermate.