Material 3 Expressive, Materyal Tasarım'ın bir sonraki evrimidir. Güncellenmiş temalar, bileşenler ve dinamik renk gibi kişiselleştirme özellikleri içerir.
Bu kılavuzda, uygulamalar için Wear Compose Material 2.5 (androidx.wear.compose) Jetpack kitaplığından Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack kitaplığına geçiş yapmaya odaklanılmıştır.
Yaklaşımlar
Uygulama kodunuzu M2.5'ten M3'e taşımak için Compose Material taşıma telefon rehberinde açıklanan yaklaşımla aynı adımları uygulayın. Özellikle:
- M2.5 ve M3'ü uzun vadede tek bir uygulamada kullanmamalısınız.
- Artık Horologist Composables, Compose Layout veya Compose Material kitaplıklarını kullanmamalısınız. Bunun yerine M3'teki bileşenleri kullanın.
- Aşamalı bir yaklaşım benimseyin.
Bağımlılıklar
M3'ün M2.5'ten ayrı bir paketi ve sürümü vardır:
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
M3
implementation("androidx.wear.compose:compose-material3:1.7.0-alpha01")
En son M3 sürümlerini Wear Compose Material 3 sürümleri sayfasında bulabilirsiniz.
Wear Compose Foundation kitaplığının 1.7.0-alpha01 sürümünde, Material 3 bileşenleriyle çalışmak üzere tasarlanmış bazı yeni bileşenler kullanıma sunuldu.
Benzer şekilde, Wear Compose Navigation kitaplığındaki SwipeDismissableNavHost, Wear OS 6 (API düzeyi 36) veya sonraki sürümlerde çalıştırıldığında güncellenmiş bir animasyona sahiptir. Wear Compose Material 3 sürümüne güncellerken Wear Compose Foundation ve Navigation kitaplıklarını da güncellemenizi öneririz:
implementation("androidx.wear.compose:compose-foundation:1.7.0-alpha01")
implementation("androidx.wear.compose:compose-navigation:1.7.0-alpha01")
Tema
Hem M2.5 hem de M3'te tema composable'ı MaterialTheme olarak adlandırılır ancak içe aktarma paketleri ve parametreler farklıdır. M3'te Colors parametresinin adı ColorScheme olarak değiştirildi ve geçişleri uygulamak için MotionScheme parametresi kullanıma sunuldu.
M2.5
import androidx.wear.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes,
content = content
)
M3
import androidx.wear.compose.material3.MaterialTheme // ... MaterialTheme( colorScheme = ColorScheme(), typography = Typography(), shapes = Shapes(), motionScheme = MotionScheme.standard(), content = { /*content here*/ } )
Renk
M3'teki renk sistemi, M2.5'ten önemli ölçüde farklıdır. Renk parametrelerinin sayısı arttı, farklı adlara sahipler ve M3 bileşenleriyle farklı şekilde eşleniyorlar. Oluşturma'da bu, M2.5 Colors sınıfı, M3 ColorScheme sınıfı ve ilgili işlevler için geçerlidir:
M2.5
import androidx.wear.compose.material.Colors
val appColorScheme: Colors = Colors(
// M2.5 Color parameters
)
M3
import androidx.wear.compose.material3.ColorScheme // ... val appColorScheme: ColorScheme = ColorScheme( // M3 ColorScheme parameters )
Aşağıdaki tabloda M2.5 ile M3 arasındaki temel farklar açıklanmaktadır:
| M2.5 | M3 |
|---|---|
Color |
ColorScheme olarak yeniden adlandırıldı |
| 13 renk | 28 renk |
| Yok | Yeni dinamik renk teması |
| Yok | Daha fazla ifade için yeni üçüncül renkler |
Dinamik renk teması
M3'teki yeni özelliklerden biri dinamik renk temasıdır. Kullanıcılar kadran renklerini değiştirirse kullanıcı arayüzündeki renkler de buna uygun şekilde değişir.
Dinamik renk şeması uygulamak için dynamicColorScheme işlevini kullanın ve dinamik renk şeması kullanılamadığında yedek olarak defaultColorScheme sağlayın.
@Composable fun myApp() { val dynamicColorScheme = dynamicColorScheme(LocalContext.current) MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {} } internal val myBrandColors: ColorScheme = ColorScheme( /* Specify colors here */)
Yazı biçimi
M3'teki tipografi sistemi, M2.5'ten farklıdır ve aşağıdaki özellikleri içerir:
- Dokuz yeni metin stili
- Farklı ağırlıklar, genişlikler ve yuvarlaklıklar için tür ölçeklerinin özelleştirilmesine olanak tanıyan esnek yazı tipleri
Esnek yazı tiplerini kullanan
AnimatedText
M2.5
import androidx.wear.compose.material.Typography
val Typography = Typography(
// M2.5 TextStyle parameters
)
M3
import androidx.wear.compose.material3.Typography val Typography = Typography( // M3 TextStyle parameters )
Esnek yazı tipleri
Esnek yazı tipleri, tasarımcıların belirli boyutlar için tür genişliğini ve ağırlığını belirtmesine olanak tanır.
Metin stilleri
M3'te aşağıdaki TextStyle'lar kullanılabilir. Bunlar, çeşitli M3 bileşenleri tarafından varsayılan olarak kullanılır.
| Yazı biçimi | TextStyle |
|---|---|
| Ekran | displayLarge, displayMedium, displaySmall |
| Başlık | titleLarge, titleMedium, titleSmall |
| Etiket | labelLarge, labelMedium, labelSmall |
| Metin | bodyLarge, bodyMedium, bodySmall, bodyExtraSmall |
| Sayısal | numeralExtraLarge, numeralLarge, numeralMedium, numeralSmall, numeralExtraSmall |
| Yay | arcLarge, arcMedium, arcSmall |
Şekil
M3'teki şekil sistemi, M2.5'ten farklıdır. Şekil parametrelerinin sayısı arttı, farklı şekilde adlandırılıyorlar ve M3 bileşenleriyle farklı şekilde eşleniyorlar. Aşağıdaki şekil boyutları kullanılabilir:
- Çok küçük
- Küçük
- Orta zorlukta
- Büyük
- Ekstra büyük
Oluşturma'da bu durum, M2 Shapes sınıfı ve M3 Shapes sınıfı için geçerlidir:
M2.5
import androidx.wear.compose.material.Shapes
val Shapes = Shapes(
// M2.5 Shapes parameters
)
M3
import androidx.wear.compose.material3.Shapes val Shapes = Shapes( // M3 Shapes parameters )
Başlangıç noktası olarak Compose'da Material 2'den Material 3'e geçiş bölümündeki Şekiller parametre eşlemesini kullanın.
Şekil dönüştürme
M3'te Şekil Dönüştürme özelliği kullanıma sunuluyor: Şekiller artık etkileşimlere yanıt olarak dönüşüyor.
Şekil Dönüştürme davranışı, çeşitli yuvarlak düğmelerde varyasyon olarak kullanılabilir. Şekil Dönüştürme'yi destekleyen düğmelerin listesini aşağıda bulabilirsiniz:
| Düğmeler | Şekil dönüştürme işlevi |
|---|---|
IconButton |
IconButtonDefaults.animatedShape, basıldığında simge düğmesine animasyon ekler. |
IconToggleButton |
IconToggleButtonDefaults.animatedShape, basıldığında simge açma/kapatma düğmesini animasyonlu hale getirir. IconToggleButtonDefaults.variantAnimatedShapes ise basıldığında ve işaretlendiğinde/işareti kaldırıldığında simge açma/kapatma düğmesini animasyonlu hale getirir. |
TextButton |
TextButtonDefaults.animatedShape, basıldığında metin düğmesine animasyon uygular. |
TextToggleButton |
TextToggleButtonDefaults.animatedShapes, basıldığında metin açma/kapatma düğmesine animasyon uygular. TextToggleButtonDefaults.variantAnimatedShapes ise basıldığında ve işaretlendiğinde/işareti kaldırıldığında metin açma/kapatma düğmesine animasyon uygular. |
Bileşenler ve Düzen
M2.5'teki bileşenlerin ve düzenlerin çoğu M3'te kullanılabilir. Ancak bazı M3 bileşenleri ve düzenleri M2.5'te yoktu. Ayrıca, bazı M3 bileşenlerinin M2.5'teki eşdeğerlerinden daha fazla varyasyonu vardır.
Bazı bileşenler özel olarak değerlendirilmesi gerekse de başlangıç noktası olarak aşağıdaki işlev eşlemeleri önerilir:
Material 3'teki tüm bileşenlerin tam listesini aşağıda bulabilirsiniz:
Son olarak, Wear Compose Foundation kitaplığındaki bazı ilgili bileşenlerin listesi:
| Wear Compose Foundation 1.7.0-alpha01 | |
|---|---|
| androidx.wear.compose.foundation.hierarchicalFocusGroup | Bir uygulamadaki composable'ları açıklamak, kompozisyonun etkin bölümünü takip etmek ve odağı koordine etmek için kullanılır. |
| androidx.wear.compose.foundation.pager.HorizontalPager | Performansı artırmak ve Wear OS yönergelerine uymak için Wear'a özel geliştirmelerle Compose Foundation bileşenleri üzerine oluşturulmuş, yatay olarak kaydırılan bir sayfalayıcı. |
| androidx.wear.compose.foundation.pager.VerticalPager | Performansı artırmak ve Wear OS yönergelerine uymak için Wear'a özel geliştirmelerle Compose Foundation bileşenleri üzerine oluşturulmuş, dikey olarak kaydırılan bir sayfalayıcı. |
| androidx.wear.compose.foundation.lazy.TransformingLazyColumn | Her öğeye kaydırma dönüştürme efektleri eklemek için ScalingLazyColumn yerine kullanılabilir. |
Düğmeler
M3'teki düğmeler M2.5'ten farklıdır. M2.5 Çip'in yerini Düğme aldı. Button uygulaması, Text
maxLines ve textAlign için varsayılan değerler sağlar. Bu varsayılan değerler, Text
öğesinde geçersiz kılınabilir.
M2.5
import androidx.wear.compose.material.Chip
//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)
M3
//M3 Buttons Button(onClick = { }){} CompactButton(onClick = { }){} IconButton(onClick = { }){} TextButton(onClick = { }){}
M3, yeni düğme varyasyonlarını da içerir. Bu API'leri Compose Material 3 API referansına genel bakış sayfasında inceleyebilirsiniz.
M3'te yeni bir düğme kullanıma sunuluyor: EdgeButton. EdgeButton; çok küçük, küçük, orta ve büyük olmak üzere 4 farklı boyutta mevcuttur. EdgeButton
uygulaması, boyuta bağlı olarak maxLines için özelleştirilebilen bir varsayılan değer sağlar.
TransformingLazyColumn veya ScalingLazyColumn kullanıyorsanız EdgeButton öğesini son liste öğesi olarak eklemek yerine kaydırma sırasında şeklini değiştirerek dönüşmesi için ScreenScaffold içine iletin.EdgeButton EdgeButton ile ScreenScaffold ve TransformingLazyColumn nasıl kullanılacağını kontrol etmek için aşağıdaki koda bakın.
val state = rememberTransformingLazyColumnState() ScreenScaffold( scrollState = state, contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.ListHeader ), edgeButton = { EdgeButton( onClick = { } ) { Text(stringResource(R.string.show)) } } ){ contentPadding -> TransformingLazyColumn(state = state, contentPadding = contentPadding,){ // additional code here } }
İskele
M3'teki iskele, M2.5'ten farklıdır. M3'te AppScaffold ve yeni ScreenScaffold composable'ı Scaffold'un yerini aldı. AppScaffold ve ScreenScaffold, ekranın yapısını düzenler ve ScrollIndicator ile TimeText bileşenlerinin geçişlerini koordine eder.
AppScaffold, kaydırarak kapatma gibi uygulama içi geçişler sırasında TimeText gibi statik ekran öğelerinin görünür kalmasına olanak tanır. Genellikle SwipeDismissableNavHost gibi bir gezinme bileşeni tarafından sağlanan ana uygulama içeriği için bir alan sağlar.
Etkinlik için bir AppScaffold beyan edersiniz ve her ekran için bir ScreenScaffold kullanırsınız.
AppScaffold, ekranlara varsayılan bir TimeText bileşeni ekler. timeText parametresini kullanarak özelleştirmek isterseniz bu değeri geçersiz kılabilirsiniz.
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
M3
AppScaffold { val navController = rememberSwipeDismissableNavController() SwipeDismissableNavHost( navController = navController, startDestination = "message_list" ) { composable("message_list") { MessageList(onMessageClick = { id -> navController.navigate("message_detail/$id") }) } composable("message_detail/{id}") { MessageDetail(id = it.arguments?.getString("id")!!) } } } } // Implementation of one of the screens in the navigation @Composable fun MessageDetail(id: String) { // .. Screen level content goes here val scrollState = rememberTransformingLazyColumnState() val padding = rememberResponsiveColumnPadding( first = ColumnItemType.BodyText ) ScreenScaffold( scrollState = scrollState, contentPadding = padding ) { scaffoldPaddingValues -> // Screen content goes here // ...
HorizontalPagerIndicator ile HorizontalPager kullanıyorsanız HorizontalPagerScaffold'e geçiş yapabilirsiniz. HorizontalPagerScaffold, AppScaffold içine yerleştirilmiş. AppScaffold ve HorizontalPagerScaffold, bir Pager'ın yapısını düzenler ve HorizontalPageIndicator ile TimeText bileşenlerinin geçişlerini koordine eder.
HorizontalPagerScaffold, HorizontalPageIndicator öğesini varsayılan olarak ekranın ortasında gösterir ve Pager öğesinin sayfalandırılıp sayfalandırılmadığına göre TimeText ve HorizontalPageIndicator öğelerinin gösterilmesini ve gizlenmesini koordine eder. Bu durum PagerState tarafından belirlenir.
Ayrıca, konumuna göre ölçeklendirme ve karartma efektiyle bir sayfayı Pager içinde canlandıran yeni bir AnimatedPage bileşeni de var.
AppScaffold { val pagerState = rememberPagerState(pageCount = { 10 }) val columnState = rememberTransformingLazyColumnState() val contentPadding = rememberResponsiveColumnPadding( first = ColumnItemType.ListHeader, last = ColumnItemType.BodyText, ) HorizontalPagerScaffold(pagerState = pagerState) { HorizontalPager( state = pagerState, ) { page -> AnimatedPage(pageIndex = page, pagerState = pagerState) { ScreenScaffold( scrollState = columnState, contentPadding = contentPadding ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier.fillMaxWidth() ) { Text(text = "Pager sample") } } item { if (page == 0) { Text(text = "Page #$page. Swipe right") } else{ Text(text = "Page #$page. Swipe left and right") } } } } } } } }
Son olarak, M3, HorizontalPagerScaffold ile aynı deseni izleyen bir VerticalPagerScaffold sunar:
AppScaffold { val pagerState = rememberPagerState(pageCount = { 10 }) VerticalPagerScaffold(pagerState = pagerState) { VerticalPager( state = pagerState ) { page -> AnimatedPage(pageIndex = page, pagerState = pagerState) { ScreenScaffold { ///… } } } } }
Yer tutucu
M2.5 ile M3 arasında bazı API değişiklikleri vardır.
Placeholder.PlaceholderDefaults artık iki değiştirici sunuyor:
- Henüz yüklenmemiş içerik yerine çizilen
Modifier.placeholder - Verilerin yüklenmesini beklerken animasyon döngüsünde çalışan yer tutucu parıltı efekti
Modifier.placeholderShimmer.
Placeholder bileşeninde yapılan diğer değişiklikler için aşağıdaki tabloya bakın.
| M2.5 | M3 |
|---|---|
PlaceholderState.startPlaceholderAnimation |
Kaldırıldı |
PlaceholderState.placeholderProgression |
Kaldırıldı |
PlaceholderState.isShowContent |
!PlaceholderState.isVisible olarak yeniden adlandırıldı |
PlaceholderState.isWipeOff |
Kaldırıldı |
PlaceholderDefaults.painterWithPlaceholderOverlayBackgroundBrush |
Kaldırıldı |
PlaceholderDefaults.placeholderBackgroundBrush |
Kaldırıldı |
PlaceholderDefaults.placeholderChipColors |
Kaldırıldı |
SwipeDismissableNavHost
SwipeDismissableNavHost, wear.compose.navigation kuruluşunun bir parçasıdır. Bu bileşen M3 ile kullanıldığında M3 MaterialTheme, LocalSwipeToDismissBackgroundScrimColor ve LocalSwipeToDismissContentScrimColor değerlerini günceller.
TransformingLazyColumn
TransformingLazyColumn, wear.compose.lazy.foundation'nin bir parçasıdır ve kaydırma sırasında liste öğelerinde ölçeklendirme ve dönüştürme animasyonları için destek ekleyerek kullanıcı deneyimini iyileştirir. Uygulamaların ScalingLazyColumn sürümünden TransformingLazyColumn sürümüne taşınması önemle tavsiye edilir.
ScalingLazyColumn'ya benzer şekilde, birleştirmelerde hatırlanan bir TransformingLazyColumnState oluşturmak için rememberTransformingLazyColumnState() sağlar.
Ölçeklendirme ve şekil değiştirme animasyonları eklemek için her liste öğesine aşağıdakileri ekleyin:
Modifier.transformedHeight, öğelerin dönüştürülmüş yüksekliğiniTransformationSpeckullanarak hesaplamanıza olanak tanır. Daha fazla özelleştirme yapmanız gerekmiyorsarememberTransformationSpec()kullanabilirsiniz.SurfaceTransformation
Listenin üst ve alt kısmındaki dolgunun doğru olduğunu doğrulamak için minimumVerticalContentPadding değiştiricisini kullanın.
val columnState = rememberTransformingLazyColumnState() val transformationSpec = rememberTransformationSpec() ScreenScaffold( scrollState = columnState ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding), transformation = SurfaceTransformation(transformationSpec) ) { Text(text = "Header") } } // ... other items item { Button( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding), transformation = SurfaceTransformation(transformationSpec), onClick = { /* ... */ }, icon = { Icon( imageVector = Icons.Default.Build, contentDescription = "build", ) }, ) { Text( text = "Build", maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } } }
Faydalı bağlantı
Compose'da M2.5'ten M3'e geçiş hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara göz atın.