Kullanıcı arayüzü

Bu belgede, Glass stiline nasıl uyulacağı ve kullanıcı deneyimini optimize edebilecek yaygın kullanıcı arayüzüyle ilgili en iyi uygulamaların nasıl uygulanacağı açıklanmaktadır. Aşağıdaki kullanıcı arayüzü öğelerini kapsar:

Tema

Kullanmanızı önerdiğimiz Glass temasının özellikleri şunlardır:

  • Etkinlikleri işlem çubuğu olmadan tam ekran olarak gösterir.
  • Tamamen siyah bir arka plan uygular.
  • Renk kenarı efektinin rengini daha açık hale getirir.
  • Beyaz metin rengi uygular.

Glass için önerilen tema ayarları şunlardır:

 <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 düzenleri

Parçalarınızın genişletebileceği iki temel kart düzeni şunlardır:

Ana düzen

Bu düzen, bir kart için önerilen standart dolguyu ve altbilgiyi tanımlar. Kendi görüşlerinizi boş FrameLayout içine yazın.

Ortadaki kutu, 560 x 240 piksel boyutunda olup ekranın iç kısmının büyük bir bölümünü kaplar. Alt kısımda ise 560 x 40 piksel boyutunda küçük bir çubuk bulunur. Ayrıca her köşede 40 x 40 piksellik dört küçük blok bulunur.

Örnek bir XML düzeni:

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

Sol sütun düzeni

Bu düzen, görünümlerinizi yerleştirebileceğiniz iki FrameLayout sınıfı şeklinde, solda genişliğin üçte biri kadar, sağda ise genişliğin üçte ikisi kadar bir sütun tanımlar. Örnek için aşağıdaki resme bakın.

Ana düzeni yana kaydıran 240 x 360 piksel boyutlarında bir sol sütun gösteriliyor. Boyutu sığacak şekilde sıkıştırılır. Ana alan 330 x 240 pikseldir ve 330 x 40 piksel boyutunda küçük bir alt çubuk bulunur. Sağdaki iki köşede 40 x 40 piksellik iki küçük kutu, sol sütunun alt köşelerinde 30 x 40 piksellik iki kutu ve ana düzenin sol tarafında 30 x 40 piksellik iki kutu (biri üstte, biri altta) yer alıyor.

Örnek bir XML düzeni:

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

Standart boyutlar

Glass'ın standart stiline uygun bir dosya oluşturmak için aşağıdakileri önceki düzenlerle veya kendi düzenlerinizle birlikte kullanın. Bu dosyayı Android projenizde res/values/dimens.xml olarak oluşturun.

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

Menü oluşturmak için RecyclerView kullanmanızı öneririz. Android Studio proje kaynaklarındaki standart Android menü dosyasına dayalı olmalıdır. Android, standart menü oluşturma işlemini geçersiz kılmanıza ve kendi uygulamanızla değiştirmenize olanak tanır. Bunun için, aşağıdaki adımları uygulayın:

  1. RecyclerView ile düzeni oluşturun ve Activity için görünüm olarak ayarlayın.
  2. RecyclerView ve bağdaştırıcısını, yeni oluşturulan menü öğeleri koleksiyonunu kullanacak şekilde ayarlayın.
  3. onCreateOptionsMenu yöntemini geçersiz kılın.
    1. Menünüzü genişletin ve her menü öğesi için koleksiyona yeni öğenizi ekleyin.
    2. Adaptörde notifyDataSetChanged yöntemini çağırın.

    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. Hangi seçeneğin belirlendiğini öğrenmek için OnScrollListener ile birlikte LayoutManager ve SnapHelper kullanın.
  5. Menü öğesi seçimi etkinliğini işlemek için TAP hareketini dinleyin.
  6. Seçili menü öğesiyle ilgili bilgiler içeren bir Intent oluşturun.
  7. Bu etkinlik için bir sonuç belirleyin ve etkinliği tamamlayın.
  8. Menü eklemek istediğiniz parçadan veya etkinlikten startActivityForResult işlevini çağırın. Bu amaçla TAP hareketini kullanın.
  9. Seçili menü öğesini işlemek için arama parçası veya etkinliğindeki onActivityResult işlevini geçersiz kılın.

Yönergeler

Menü düzeninizi ayarlamayla ilgili önerilerin listesini aşağıda bulabilirsiniz:

Aşağıdaki resimde, özelleştirilmiş bir menü düzeni örneği gösterilmektedir:

Bu basit resimde, ekranın ortasında &quot;MENU düzeni&quot; kelimelerinin ve yanında bir telefon simgesinin bulunduğu siyah bir arka plan gösteriliyor.

Uygulama ayrıntıları için Kart örneği uygulamasını inceleyin.

Kaydırılabilir sayfalar

Glass ekranı ve dokunmatik yüzeyi, kaydırılabilir kartları rahat bir şekilde görüntülemek için birlikte çalışır. Etkinliğinizde, standart Android ViewPager API'si ile kaydırılabilir sayfalar oluşturabilirsiniz.

Kartlar veya ekranlar arasında gezinmek için Android ViewPager özelliğini kullanma hakkında daha fazla bilgi edinmek için Ekranı kaydırma eğitim belgelerini ziyaret edin.