Benutzeroberfläche

In diesem Dokument erfahren Sie, wie Sie den Glass-Stil befolgen und gängige Best Practices für die Benutzeroberfläche implementieren, mit denen Sie die Nutzung optimieren können. Sie umfasst die folgenden Elemente der Benutzeroberfläche:

Theme

Das Glass-Design, das Sie verwenden, hat folgende Eigenschaften:

  • Zeigt Aktivitäten im Vollbildmodus ohne Aktionsleiste an.
  • Hiermit wird ein einheitlich schwarzer Hintergrund angewendet.
  • Legt die Helligkeit des Farbrandeffekts fest.
  • Wendet eine weiße Textfarbe an.

Im Folgenden finden Sie die empfohlenen Designeinstellungen für 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>

XML-Layouts

Hier sind die beiden grundlegenden Kartenlayouts, die deine Fragmente aufblähen können:

Hauptlayout

Mit diesem Layout werden der vorgeschlagene Standardabstand und die Fußzeile für eine Karte festgelegt. Fügen Sie Ihre eigenen Ansichten in das leere FrameLayout ein.

Der mittlere Bereich des Bildschirms nimmt den Großteil des Bildschirms mit 560 x 240 Pixeln ein, unten befindet sich eine kleine Leiste mit 560 x 40 Pixeln. Außerdem gibt es vier kleine Blöcke mit 40 x 40 Pixeln, einen in jeder Ecke

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 der linken Spalte

Bei diesem Layout wird eine linke Spalte mit einer Breite von drei Dritteln und eine rechte Spalte von zwei Dritteln in Form von zwei FrameLayout-Klassen definiert, in die Sie Ihre Ansichten einfügen können. Das folgende Bild zeigt ein Beispiel.

Eine linke Spalte mit 240 x 360 Pixeln wird angezeigt, wodurch das Hauptlayout verschoben wird. Seine Größe passt sich an die jeweilige Größe an. Der Hauptbereich ist 330 x 240 Pixel, mit einem kleinen unteren Balken, der 330 x 40 Pixel groß ist. Die rechten beiden Ecken haben zwei kleine Felder mit den Abmessungen 40 x 40 Pixel und 4 weitere, 30 x 40 Pixel große, 2 in den unteren Ecken der linken Spalte und 2 auf der linken Seite des Hauptlayouts, eine oben und eine unten.

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 Folgendes in Verbindung mit den vorherigen Layouts oder Ihren eigenen Layouts, um eine Datei zu erstellen, die dem Glass-Standardstil entspricht. Erstelle diese Datei in deinem Android-Projekt als res/values/dimens.xml.

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

Wir empfehlen die Erstellung von Menüs mithilfe von RecyclerView. Sie sollten auf der Standard-Android-Menüdatei aus den Android Studio-Projektressourcen basieren. Mit Android können Sie die Standardmenüerstellung überschreiben und durch Ihre Implementierung ersetzen. Das funktioniert so:

  1. Erstellen Sie das Layout mit RecyclerView und legen Sie es als Ansicht für Activity fest.
  2. Legen Sie RecyclerView und den zugehörigen Adapter fest, um die neu erstellte Menüauswahl zu verwenden.
  3. Überschreiben Sie die Methode onCreateOptionsMenu.
    1. Fülle dein Menü auf und füge deiner Sammlung das neue Element für jeden Menüpunkt 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 bestimmen, welche Option ausgewählt wurde.
  5. Es wird auf eine TAP-Geste gewartet, um das Ereignis zur Auswahl des Menüpunkts zu verarbeiten.
  6. Erstelle ein Intent-Element mit Informationen zum ausgewählten Menüpunkt.
  7. Lege ein Ergebnis für diese Aktivität fest und beende sie.
  8. Rufe startActivityForResult aus dem Fragment oder der Aktivität auf, für das du ein Menü erstellen möchtest. Verwende dazu eine TAP-Geste.
  9. Überschreiben Sie die onActivityResult im aufrufenden Fragment oder in der Aktivität, um den ausgewählten Menüpunkt zu verarbeiten.

Richtlinien

Im Folgenden finden Sie eine Liste mit Vorschlägen zum Einrichten des Menülayouts:

Die folgende Abbildung zeigt ein Beispiel für ein angepasstes Menülayout:

Dieses einfache Bild zeigt einen schwarzen Hintergrund mit dem Wort „MENU Layout“ in der Mitte des Bildschirms und einem Telefonsymbol daneben.

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

Wischbare Seiten

Dank des Glass-Displays und des Touchpads lassen sich Karten ganz einfach wischen. Mit der Standard-Android-ViewPager API kannst du in deiner Aktivität Swipe-Seiten erstellen.

Weitere Informationen dazu, wie Sie mit Android ViewPager durch Karten oder Bildschirme scrollen können, finden Sie in der Trainingsdokumentation zu Bildschirmfolien.