Farklı saat şekillerini işleme

Compose yöntemini deneyin

Wear OS'te Jetpack Compose, Wear OS için önerilen kullanıcı arayüzü araç setidir.

Wear OS'te Oluştur'u deneyin →

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

Not: Mobil uygulamadaki işlevselliği ve kullanıcı arayüzünü Wear OS'e birebir aktarıp iyi bir kullanıcı deneyimi beklemeyin.

Uygulamanızı dikdörtgen bir elde taşınabilir cihaz için tasarlarsanız ekranın köşelerine yakın içerikler yuvarlak kol saatlerinde kırpılabilir. Kaydırılabilir dikey liste kullanıyorsanız kullanıcı içeriği ortalamak için kaydırabildiğinden bu durum daha az sorun yaratır. Ancak tek ekranlarda kötü bir kullanıcı deneyimine neden olabilir.

Düzeniniz için aşağıdaki ayarları kullanırsanız metin, yuvarlak ekranlı cihazlarda yanlış görüntülenir:

<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ığında yuvarlak cihazları destekleyen düzenleri kullanın.

• Görüntülerin yuvarlak ekranların kenarlarında kırpılmasını önlemek için BoxInsetLayout kullanabilirsiniz.
• Yuvarlak ekranlar için optimize edilmiş dikey bir öğe listesini görüntülemek ve bu öğelerle etkileşim kurmak istediğinizde kavisli bir düzen oluşturmak için WearableRecyclerView kullanabilirsiniz.

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

BoxInsetLayout kullanma

Şekil 2. Yuvarlak ekranda pencere iç kısımları.

Wear OS kullanıcı arayüzü kitaplığındaki BoxInsetLayout sınıfı, yuvarlak ekranlarda ç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 kolayca hizalamanıza olanak tanır.

Şekil 2'deki gri kare, BoxInsetLayout gerekli pencere iç kısımlarını uyguladıktan sonra alt görünümlerini yuvarlak ekranlara otomatik olarak yerleştirebileceği alanı gösterir. Bu alanın içinde gösterilmek için alt görünümler, layout_boxedEdges özelliğini aşağıdaki değerlerle belirtir:

• top, bottom, left ve right kombinasyonu. Örneğin, a "left|top" değeri, şekil 2'deki gri karenin içinde alt öğenin sol ve üst kenarlarını konumlandırır.
• "all" değeri, alt yayıncının tüm içeriğini Şekil 2'deki gri karenin içine yerleştirir. Bu, ConstraintLayout içeren 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 harflerle 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çteki ConstraintLayout öğesine dolgu atar.

• app:layout_boxedEdges="all"

  Bu satır, ConstraintLayout öğesinin ve alt öğelerinin, yuvarlak ekranlardaki pencere iç kısımları tarafından tanımlanan alanın içine yerleştirilmesini sağlar.

Kavisli düzen kullanma

Wear OS kullanıcı arayüzü kitaplığındaki WearableRecyclerView sınıfı, yuvarlak ekranlar için optimize edilmiş kavisli bir düzene geçmenizi sağlar. Uygulamanızdaki kaydırılabilir listeler için kavisli düzeni etkinleştirmek istiyorsanız Wear OS'te liste oluşturma başlıklı makaleye bakın.