Benutzeroberfläche

In diesem Dokument wird beschrieben, wie Sie den Glass-Stil einhalten und allgemeine Best Practices für die Benutzeroberfläche implementieren können, um die Nutzerfreundlichkeit zu optimieren. Folgende UI-Elemente werden behandelt:

• Design
• XML-Layouts
• Menüs
• Wischbare Seiten

Design

Das von uns empfohlene Glass-Design hat die folgenden Merkmale:

• Aktivitäten werden im Vollbildmodus ohne Aktionsleiste angezeigt.
• Hiermit wird ein einheitlich schwarzer Hintergrund angewendet.
• Legt die Farbe für den Farb-Kanten-Effekt heller fest.
• Wendet eine weiße Textfarbe an.

Hinweis:Weitere Informationen zum Erstellen von Designs finden Sie in der Android-Entwicklerdokumentation unter Styles and Themes.

Die folgenden Theme-Einstellungen werden für Glass empfohlen:

 <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>

XML-Layouts

Dies sind die beiden grundlegenden Kartenlayouts, die Ihre Fragmente aufblähen können:

• Hauptlayout
• Layout mit linker Spalte

Hauptlayout

In diesem Layout werden das empfohlene Standard-Padding und die Fußzeile für eine Karte definiert. Geben Sie Ihre eigenen Ansichten in das leere FrameLayout ein.

Hier sehen Sie ein Beispiel für ein XML-Layout:

<?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 mit linker Spalte

Dieses Layout definiert eine Spalte auf der linken Seite mit einer Breite von einem Drittel und eine Spalte auf der rechten Seite mit einer Breite von zwei Dritteln in Form von zwei FrameLayout-Klassen, in die Sie Ihre Ansichten einfügen können. Die folgende Abbildung zeigt ein Beispiel.

Hier sehen Sie ein Beispiel für ein XML-Layout:

<?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>

Standarddimensionen

Verwenden Sie die folgenden Elemente in Verbindung mit den vorherigen Layouts oder Ihren eigenen Layouts, um eine Datei zu erstellen, die dem Standardstil von Glass entspricht. Erstellen Sie diese Datei als res/values/dimens.xml in Ihrem Android-Projekt.

<?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

Wir empfehlen, Menüs mit RecyclerView zu erstellen. Sie sollten auf der Standard-Android-Menüdatei aus den Android Studio-Projektressourcen basieren. Unter Android können Sie die Standardmenüerstellung überschreiben und durch Ihre eigene Implementierung ersetzen. Führen Sie dazu die folgenden Schritte aus:

1. Erstellen Sie das Layout mit RecyclerView und legen Sie es als Ansicht für Ihr Activity fest.
2. Legen Sie RecyclerView und den zugehörigen Adapter so fest, dass die neu erstellte Sammlung von Menüelementen verwendet wird.
3. Überschreiben Sie die Methode onCreateOptionsMenu.
   1. Erweitern Sie das Menü und fügen Sie das neue Element für jedes Menüelement der Sammlung hinzu.
   2. Rufen Sie die Methode notifyDataSetChanged für den Adapter auf.

   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. Verwenden Sie OnScrollListener zusammen mit LayoutManager und SnapHelper, um zu ermitteln, welche Option ausgewählt wurde.
5. Warten Sie auf eine TAP-Geste, um das Ereignis für die Auswahl des Menüelements zu verarbeiten.
6. Erstellen Sie eine Intent mit Informationen zum ausgewählten Menüpunkt.
7. Legen Sie ein Ergebnis für diese Aktivität fest und schließen Sie sie ab.
8. Rufen Sie startActivityForResult im Fragment oder in der Aktivität auf, in der Sie ein Menü haben möchten. Verwenden Sie hierfür eine TAP-Geste.
9. Überschreiben Sie die onActivityResult im aufrufenden Fragment oder in der aufrufenden Aktivität, um das ausgewählte Menüelement zu verarbeiten.

Richtlinien

Hier finden Sie einige Vorschläge für die Einrichtung des Menüs:

• Textgröße: 64sp
• Hintergrundfarbe: #96000000
• Material Design-Symbole mit der Größe 64dpx64dp verwenden
• Legen Sie das Designflag windowIsTranslucent auf true fest.

Das folgende Bild zeigt ein Beispiel für ein benutzerdefiniertes Menülayout:

Einzelheiten zur Implementierung finden Sie in der Beispiel-App für Karten.

Wischbare Seiten

Das Glass-Display und das Touchpad arbeiten zusammen, um wischbare Karten auf bequeme Weise anzuzeigen. Mit der Standard-Android- ViewPager-API können Sie in Ihrer Aktivität wischbare Seiten erstellen.

Weitere Informationen zur Verwendung von Android  ViewPager zum Scrollen durch Karten oder Bildschirme finden Sie in der Schulungsdokumentation zum Bildschirm-Slide.