Uygulamanız, ek alan kazanır ve küçük ekranlarda da mükemmel görünür. 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ılavuzundan yararlanabilirsiniz.
Horology'yi kullanarak duyarlı düzenler oluşturma
Düzenlerde yüzdeye dayalı kenar boşlukları bulunmalıdır. Compose'un işleyiş şekli mutlak değerlerde varsayılan olarak ayarlamak yerine Aşağıdaki özelliklere sahip Horology Library:
- Yatay kenar boşlukları, cihaz ekranının belirli bir yüzdesine göre doğru şekilde ayarlandı seçin.
- Üst ve alt boşluklar doğru ayarlandı. Bu durum, daha iyi çözümler bulmak için
önerilen üst ve alt boşluklar, gösterilen bileşenlere
kullanılır. Örneğin,
Chip
,Text
için farklı aralıklara sahip olmalıdır bileşeni için bir değer ifade eder. TimeText
kenar boşlukları doğru ayarlandı.
Aşağıdaki kod snippet'i, Horology'nin
Çeşitli cihazlarda mükemmel görünen içerikler oluşturmak için ScalingLazyColumn
düzeni
Wear OS ekran boyutları:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
Bu örnekte ScreenScaffold
ve AppScaffold
da gösterilmektedir.
Bunlar, uygulama ile bağımsız ekranlar arasındaki koordinasyondur
(gezinme rotaları) doğru kaydırma davranışını ve
TimeText
konumlandırması.
Üst ve alt dolgu için aşağıdakilere de dikkat edin:
- Doğru Search Ads 360'ı belirlemek için ilk ve son
ItemType
dolgu. - Listedeki ilk öğe için
ResponsiveListHeader
kullanılması,Text
üstbilgilerinde dolgu olmamalıdır.
Tüm spesifikasyonları Figma tasarım kitlerinde bulabilirsiniz. Daha fazla ve örnekler için şu bölüme bakın:
- Horoloji kütüphanesi - derlemeye yardımcı olacak bileşenler sağlar optimize edilmiş ve farklılaştırılmış uygulamaları için de geçerlidir.
- ComposeStarter örneği - bu kılavuzda özetlediğimiz gibidir.
- JetCaster örneği - bir sunucu oluşturma için daha karmaşık bir örnek, uygulamasını geliştirdiniz.
Uygulamanızda kaydırma düzenlerini kullanma
Varsayılan seçenek olarak bu sayfanın önceki bölümlerinde gösterildiği gibi bir kaydırma düzeni kullanın göz önünde bulundurmanız gerekir. Bu sayede kullanıcılar, uygulamanızın bileşenlerine erişebilir ekran boyutundan veya Wear OS cihazın ekran boyutundan bağımsız olarak.
![Farklı cihaz boyutlarının ve yazı tipi ölçeklendirmenin etkisi](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=9&hl=tr)
Farklı cihaz boyutlarının etkisi yardımcı oluyor.
İ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şeni,
takip etmek için:
- Varsayılan olarak kaydırılır.
- Yüzdeye dayalı kâr marjlarını düzeltin.
- Genişliği, alan izin verdiği ölçüde ayarlayan düğmeler. dokunun.
![Horology'de uyarlanabilir diyalog davranışı](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=9&hl=tr)
Varsayılan olarak kaydırma sağlayan ve uyarlanan düğmeler içeren duyarlı iletişim kutuları kullanabilirsiniz.
Özel ekranlar kaydırılmayan düzenler gerektirebilir
Bazı ekranlar, kaydırılmayan düzenlere uygun olabilir. Birkaç örnek bir medya uygulamasındaki ana oynatıcı ekranını, antrenman ekranını da fitness uygulaması.
Bu gibi durumlarda Figma tasarım kitleri kullanın ve boyuta duyarlı bir tasarım uygulayın. doğru kenar boşluklarını kullanarak görüntüleyebilirsiniz.
Kesme noktalarıyla farklı deneyimler sunun
Daha büyük ekranlarla, ek içerik ve özellikler sunabilirsiniz. Alıcı: ekran boyutu ayrılma noktaları kullanmak için bir veya daha fazla Ekran boyutu 225 dp'yi aştığında farklı bir düzen gösteriliyor:
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ızda büyük yazı tipi gibi boyutların aşırılıklarına nasıl bakılır? en küçük ekranla eşleştirilir.
- Farklılaştırılmış deneyiminizin ayrılma noktalarında nasıl davrandığı.
Önizlemeleri WearPreviewDevices
ve
Uygulamanızdaki tüm ekranlar için WearPreviewFontScales
.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Ekran görüntüsü testi
Ekran görüntüsü testleri, önizleme testinin yanı sıra çok çeşitli uygulamalarla donanım boyutlarından yararlanır. Bu özellik, özellikle de hemen erişemeyebilirsiniz ve sorun doğrudan diğer ekran boyutlarına bakalım.
Ekran görüntüsü testi, sitenizdeki belirli konumlardaki regresyonları tespit etmenize de yardımcı olur. kod tabanınız içindir.
Örneklerimiz, ekran görüntüsü testi için Roborazzi'yi kullanır:
- Proje ve uygulama
build.gradle
dosyalarınızı kullanılacak şekilde yapılandırın Roborazzi. - Uygulamanızdaki her ekran için bir ekran görüntüsü testi oluşturun. Örneğin,
ComposeStarter örneğinde
GreetingScreen
için bir test aşağıdaki örnekte görüldüğü gibi uygulandı:GreetingScreenTest
:
@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 şu işlemleri yapmadığı durumlarda ekran görüntüleri oluşturmanıza olanak tanır: ve istemeden testlerin başarısız olmasına yol açabilir.WearDevice.entries
, en popüler Wear OS cihazların tanımlarını içerdiğinden testlerin, ekran boyutlarının temsili bir aralığında çalıştırılmasını sağlayın.
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 terminal:
./gradlew verifyRoborazziDebug
Ekran görüntüsü testinin tam bir örneği için ComposeStarter örneğine bakın.