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
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
veright
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 birConstraintLayout
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.