Uygulamanız, mümkün olduğunda ek alandan yararlanarak her boyuttaki Wear OS cihazlarda iyi çalışmalı ve küçük ekranlarda da iyi görünmeye devam etmelidir. Bu kılavuzda, bu kullanıcı deneyimini elde etmeye yönelik öneriler sunulmaktadır.
Uyarlanabilir düzenlerin tasarım ilkeleri hakkında daha fazla bilgi için tasarım kılavuzunu okuyun.
Horology'yi kullanarak duyarlı düzenler oluşturma
Düzenlerde yüzdeye dayalı kenar boşlukları bulunmalıdır. Compose varsayılan olarak mutlak değerlerde çalıştığından, aşağıdaki özelliklere sahip Horology Kitaplığı'ndaki bileşenleri kullanın:
- Yatay kenar boşlukları, cihazın ekran boyutunun belirli bir yüzdesine göre doğru şekilde ayarlanır.
- Üst ve alt boşluklar doğru ayarlandı. Bu durum, önerilen üst ve alt boşluklar kullanılan bileşenlere bağlı olduğundan bazı zorluklara yol açar. Örneğin,
Chip
bir listede kullanıldığındaText
bileşeninden farklı bir boşluk içermelidir. TimeText
kenar boşlukları doğru ayarlandı.
Aşağıdaki kod snippet'i, çeşitli Wear OS ekran boyutlarında mükemmel görünen içerikler oluşturmak için Horology'nin ScalingLazyColumn
düzeni sürümünü kullanır:
import com.google.android.horologist.compose.layout.ScalingLazyColumn
val columnState = rememberResponsiveColumnState(
contentPadding = ScalingLazyColumnDefaults.padding(
first = ItemType.Text,
last = ItemType.SingleButton
)
)
ScreenScaffold(scrollState = columnState) {
ScalingLazyColumn(
columnState = columnState,
modifier = Modifier.fillMaxSize()
) {
item {
ResponsiveListHeader(contentPadding = firstItemPadding()) {
Text(text = "Header")
}
}
// ... other items
item {
Button(...)
}
}
}
Bu örnekte ayrıca ScreenScaffold
]3 ve AppScaffold
gösterilmektedir.
Bunlar, doğru kaydırma davranışının ve TimeText
konumlandırmasının sağlanması için Uygulama ile bağımsız ekranlar (gezinme rotaları) arasında koordinasyon sağlar.
Üst ve alt dolgu için aşağıdakilere de dikkat edin:
- Doğru dolgunun belirlenmesi için ilk ve son
ItemType
spesifikasyonu. Text
başlıklarının dolgu olmaması gerektiğinden, listedeki ilk öğe içinResponsiveListHeader
kullanımı.
Tüm spesifikasyonları Figma tasarım kitlerinde bulabilirsiniz. Daha fazla ayrıntı ve örnek için aşağıdaki makaleleri inceleyin:
- Horology kitaplığı, Wear OS için optimize edilmiş ve farklılaştırılmış uygulamalar oluşturmaya yardımcı olacak bileşenler sağlar.
- ComposeStarter örneği - bu kılavuzda özetlenen ilkeleri gösteren bir örnek.
- JetCaster örneği: Horology kitaplığını kullanarak farklı ekran boyutlarıyla çalışacak bir uygulama geliştirmenin daha karmaşık bir örneği.
Uygulamanızda kaydırma düzenlerini kullanma
Ekranlarınızı uygularken varsayılan seçenek olarak bu sayfanın önceki bölümlerinde gösterildiği gibi bir kaydırma düzeni kullanın. Bu sayede kullanıcılar, ekran tercihlerinden veya Wear OS cihazın ekran boyutundan bağımsız olarak uygulamanızın bileşenlerine erişebilir.
![Farklı cihaz boyutlarının ve yazı tipi ölçeklendirmenin etkisi](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=2&hl=tr)
Farklı cihaz boyutlarının ve yazı tipi ölçeklendirmenin etkisi.
İletişim kutuları
Önemli bir neden olmadığı sürece iletişim kutuları kaydırılabilir olmalıdır.
Horology tarafından sağlanan ResponsiveDialog
bileşenine aşağıdakiler eklenir:
- Varsayılan olarak kaydırılır.
- Yüzdeye dayalı kâr marjlarını düzeltin.
- Daha fazla dokunma hedefi sağlamak için alan izin verdiğinde genişliklerini ayarlayan düğmeler.
![Horology'de uyarlanabilir diyalog davranışı](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=2&hl=tr)
Varsayılan olarak kaydırma sağlayan duyarlı iletişim kutuları ve kullanılabilir alana uyarlanan düğmeler.
Özel ekranlar kaydırılmayan düzenler gerektirebilir
Bazı ekranlar, kaydırılmayan düzenlere uygun olabilir. Örneğin, medya uygulamalarındaki ana oynatıcı ekranı ve fitness uygulamasındaki antrenman ekranı verilebilir.
Bu durumlarda, Figma tasarım kitlerinde sağlanan standart kılavuza bakın ve doğru kenar boşluklarını kullanarak ekranın boyutuna duyarlı bir tasarım uygulayın.
Kesme noktalarıyla farklı deneyimler sunun
Daha büyük ekranlarla, ek içerik ve özellikler sunabilirsiniz. Bu tür farklılaştırılmış bir deneyim uygulamak için ekran boyutu ayrılma noktalarını kullanın ve ekran boyutu 225 dp'yi aştığında farklı bir düzen gösterin:
const val LARGE_DISPLAY_BREAKPOINT = 225
@Composable
fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT
// ... use in your Composables:
if (isLargeDisplay()) {
// Show additional content.
} else {
// Show content only for smaller displays.
}
Tasarım kılavuzunda bu fırsatlar daha fazla gösterilmiştir.
Önizlemeleri kullanarak ekran ve yazı tipi boyutu kombinasyonlarını test edin
Önizlemeler oluşturma, çeşitli Wear OS ekran boyutları için uygulama geliştirmenize yardımcı olur. Aşağıdakileri görmek için hem cihazları hem de yazı tipi ölçeklendirme önizleme tanımlarını kullanın:
- Ekranlarınızın boyutlandırmanın ekstrem yönlerine (örneğin, en küçük ekranla eşlenmiş en büyük yazı tipi) nasıl göründüğü.
- Farklılaştırılmış deneyiminizin ayrılma noktalarında nasıl davrandığı.
Önizlemeleri, uygulamanızdaki tüm ekranlarda WearPreviewDevices
ve WearPreviewFontScales
kullanarak uygulayın.
@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
ListScreen()
}
Ekran görüntüsü testi
Ekran görüntüsü testleri, önizleme testinin ötesinde bir dizi mevcut donanım boyutuyla karşılaştırmalı olarak test yapmanıza olanak tanır. Bu özellik, özellikle bu cihazlara hemen erişilemediğinde faydalıdır ve sorunun diğer ekran boyutlarında görünmediği durumlar için geçerlidir.
Ekran görüntüsü testi, kod tabanınızdaki belirli konumlardaki regresyonları belirlemenize de yardımcı olur.
Örneklerimiz, ekran görüntüsü testi için Roborazzi'yi kullanır:
- Proje ve uygulama
build.gradle
dosyalarınızı Roborazzi kullanacak şekilde yapılandırın. - Uygulamanızdaki her ekran için bir ekran görüntüsü testi oluşturun. Örneğin, ComposeStarter örneğinde
GreetingScreen
testiGreetingScreenTest
konumunda görüldüğü gibi uygulanır:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Dikkat edilmesi gereken bazı önemli noktalar:
FixedTimeSource
,TimeText
öğesinin değişmediği ve yanlışlıkla testlerin başarısız olmasına neden olan ekran görüntüleri oluşturmanıza olanak tanır.WearDevice.entries
, testlerin temsili bir ekran boyutu aralığında çalıştırılması için en popüler Wear OS cihazların tanımlarını içerir.
Altın görseller oluştur
Ekranlarınız için görüntü oluşturmak üzere bir terminalde aşağıdaki komutu çalıştırın:
./gradlew recordRoborazziDebug
Resimleri doğrulayın
Mevcut görüntülerdeki değişiklikleri doğrulamak için aşağıdaki komutu bir terminalde çalıştırın:
./gradlew verifyRoborazziDebug
Ekran görüntüsü testinin tam bir örneği için ComposeStarter örneğine bakın.