Farklı saat şekillerini işleme

Wear OS'teki uygulamalar diğer Android cihazlarla aynı düzen tekniklerini kullanır ancak saate özgü kısıtlamalarla tasarlanmaları gerekir.

Not: Bir mobil uygulamanın tam işlevselliğini ve kullanıcı arayüzünü Wear OS'e taşımayın ve iyi bir kullanıcı deneyimi beklemeyin.

Uygulamanızı, dikdörtgen el tipi bir cihaz için tasarlarsanız ekranın köşelerine yakın içerikler yuvarlak saatlerde kırpılabilir. Kullanıcılar içeriği ortalamak için kaydırabildiğinden, kaydırılabilir bir dikey liste kullanıyorsanız bu daha az sorun teşkil eder. Ancak bu durum, tek ekranlarda kötü bir kullanıcı deneyimine yol açabilir.

Düzeniniz için aşağıdaki ayarları kullanırsanız yuvarlak ekranlı cihazlarda metin doğru şekilde gösterilmez:


<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/very_long_hello_world"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bu sorunu çözmek için Wear OS Kullanıcı Arayüzü Kitaplığı'ndaki yuvarlak cihazları destekleyen düzenleri kullanın.

  • Görünümlerin yuvarlak ekran kenarlarına yakınlarda kırpılmasını önlemek için BoxInsetLayout kullanabilirsiniz.
  • Yuvarlak ekranlar için optimize edilmiş öğelerin dikey listesini görüntülemek ve değiştirmek istediğinizde, eğri bir düzen oluşturmak üzere WearableRecyclerView kullanabilirsiniz.

Uygulama tasarlama hakkında daha fazla bilgi için Wear OS tasarım yönergelerini okuyun.

BoxInsetLayout kullanma

2. Şekil. Yuvarlak ekranda pencere altları.

Wear OS Kullanıcı Arayüzü Kitaplığı'ndaki BoxInsetLayout sınıfı, yuvarlak ekranlar için çalışan bir düzen tanımlamanıza olanak tanır. Bu sınıf, görünümleri ekranın ortasına veya kenarlarına yakın yerlere kolayca hizalamanızı sağlar.

Şekil 2'deki gri karede, gerekli pencere ekleri uygulandıktan sonra BoxInsetLayout ürününün alt görünümlerini yuvarlak ekranlara otomatik olarak yerleştirebileceği alan gösterilmektedir. Bu alanın içinde gösterilmek üzere alt görünümler, aşağıdaki değerlerle layout_boxedEdges özelliğini belirtir:

  • top, bottom, left ve right kombinasyonu. Örneğin, "left|top" değeri, çocuğun sol ve üst kenarlarını şekil 2'deki gri karenin içinde konumlandırır.
  • "all" değeri, alt içeriğin tamamını Şekil 2'deki gri karenin içinde konumlandırır. Bu, içinde bir ConstraintLayout bulunan en yaygın yaklaşımdır.

Şekil 2'de gösterilen düzen, <BoxInsetLayout> öğesini kullanır ve yuvarlak ekranlarda çalışır:

<androidx.wear.widget.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="15dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_boxedEdges="all">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textAlignment="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/cancel" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:src="@drawable/ok" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.wear.widget.BoxInsetLayout>

Düzenin kalın olarak işaretlenmiş kısımlarına dikkat edin:

  • android:padding="15dp"

    Bu satır, <BoxInsetLayout> öğesine dolgu atar.

  • android:padding="5dp"

    Bu satır, iç ConstraintLayout öğesine dolgu atar.

  • app:layout_boxedEdges="all"

    Bu çizgi, ConstraintLayout öğesinin ve alt öğelerinin, yuvarlak ekranlarda pencere ekleriyle tanımlanan alanın içine yerleştirilmesini sağlar.

Eğri düzen kullanın

Wear OS Kullanıcı Arayüzü Kitaplığı'ndaki WearableRecyclerView sınıfı, yuvarlak ekranlar için optimize edilmiş kavisli bir düzeni etkinleştirebilmenizi sağlar. Uygulamanızda kaydırılabilir listeler için kavisli bir düzen etkinleştirmek için Wear OS'te liste oluşturma başlıklı makaleye göz atın.