Farklı saat şekillerini işleme

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

Not: Mobil uygulamadan aynı işlevi ve kullanıcı arayüzünü Wear OS'e taşımayın ve iyi bir kullanıcı deneyimi sunmaktır.

Uygulamanızı dikdörtgen bir avuç içi cihaz için tasarlarsanız ekranın köşelerine yakın içerikler yuvarlak saatlerde kırpılabilir. Kaydırılabilir dikey liste kullanıyorsanız Kullanıcı, içeriği ortalamak için kaydırabileceğinden bir sorun oluşturur. Ancak tek ekranlarda kötü bir kullanıcı deneyimi sağlar.

Düzeniniz için aşağıdaki ayarları kullanırsanız metinler cihazlarda düzgün gösterilmez aşağıdaki adımları izleyin: 


<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 Yuvarlak cihazları destekleyen Wear OS Kullanıcı Arayüzü Kitaplığı.

  • BoxInsetLayout kullanabilirsiniz kenarlarından kırpılmasını engelleyin.
  • WearableRecyclerView kullanabilirsiniz görüntülemek ve manipüle etmek istediğinizde eğri bir düzen oluşturabilirsiniz. Yuvarlak ekranlar için optimize edilmiş dikey öğe listesi.

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

BoxInsetLayout kullanma

Şekil 2. Yuvarlak ekranda pencere iç içe yerleştirilmiş.

Wear OS Kullanıcı Arayüzü Kitaplığı'ndaki BoxInsetLayout sınıfı, yuvarlak ekranlar için uygun bir düzen tanımlarsınız. Bu sınıfta şu işlemleri yapabilirsiniz: ekranın ortasında veya köşelerinde görünümleri kolayca hizalayabilirsiniz.

Şekil 2'deki gri kare, BoxInsetLayout öğesinin uygulandıktan sonra alt görüntüleme sayısını yuvarlak ekranlara otomatik olarak yerleştirebilir emin olun. Bu alanda görüntülenecek olan çocuk görünümler, layout_boxedEdges özelliğini aşağıdaki değerlerle belirtir:

  • top, bottom ve left ve right. Örneğin, "left|top" değeri, alt yayıncının sol ve üst kısımlarını konumlandırır karenin içinde kenarlara dokunun.
  • "all" değeri, alt yayıncının tüm içeriğini dosya içinde konumlandırır. gri kareyi seçin. Bu, proje başlatma belgesinde ConstraintLayout inceleyebilirsiniz.

Şekil 2'de gösterilen düzen <BoxInsetLayout> kullanır öğesi vardı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 karakterlerle işaretlenmiş bölümlerine dikkat edin:

  • android:padding="15dp"

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

  • android:padding="5dp"

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

  • app:layout_boxedEdges="all"

    Bu satır, ConstraintLayout öğesinin gösterilmesini sağlar alt öğeleri pencerenin tanımladığı alanın içine yerleştirilir ek yer işaretlerine sahip olması gerekir.

Eğri bir düzen kullan

Wear OS Kullanıcı Arayüzü Kitaplığı'ndaki WearableRecyclerView sınıfı yuvarlak ekranlar için optimize edilmiş eğri bir düzeni etkinleştirmenizi sağlar. uygulaması için bkz. Wear OS'te liste oluşturun.