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ş yapma konusu ele alınmaktadır.
Yaklaşımlar
Uygulama kodunuzu M2.5'ten M3'e taşımak için Compose Material geçişiyle ilgili telefonda açıklanan yaklaşımları izleyin. Özellikle:
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.5.0-beta05")
En son M3 sürümlerini Wear Compose Material 3 sürümleri sayfasında görebilirsiniz.
Wear Compose Foundation kitaplığının 1.5.0-beta01 sürümünde, Material 3 bileşenleriyle çalışmak üzere tasarlanmış bazı yeni bileşenler kullanıma sunuluyor. 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.5.0-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")
Tema oluşturma
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 = AppColorScheme,
typography = AppTypography,
shapes = AppShapes,
motionScheme = AppMotionScheme,
content = content
)
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 bölümünde bu durum 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 |
|---|---|
|
|
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 myColorScheme = myBrandColors()
val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}
Yazı biçimi
M3'teki tipografi sistemi, M2'den 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
)
Flex Fonts
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, M3'ün çeşitli 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'den 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, M2 Şekiller sınıfı ve M3 Şekiller 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 Migrate from Material 2 to Material 3 in Compose (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üştürülüyor.
Şekil Dönüştürme davranışı, aşağıdaki gibi çeşitli yuvarlak düğmelerde varyasyon olarak kullanılabilir:
Düğmeler |
Şekil dönüştürme işlevi |
|---|---|
|
IconButtonDefaults.animatedShape(), basıldığında simge düğmesini animasyonlu hale getirir. |
|
IconToggleButtonDefaults.animatedShape(), basıldığında simge açma/kapatma düğmesine animasyon ekler ve IconToggleButtonDefaults.variantAnimatedShapes(), basıldığında ve işaretlendiğinde/işaret kaldırıldığında simge açma/kapatma düğmesini animasyonlu hale getirir. |
|
TextButtonDefaults.animatedShape(), basıldığında metin düğmesine animasyon uygular. |
|
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 benzerlerinden 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 bileşenlerinin tam listesini aşağıda bulabilirsiniz:
Material 3 |
Material 2.5'e eşdeğer bileşen (M3'te yeni değilse) |
|---|---|
Yeni |
|
Yeni |
|
android.wear.compose.material.Scaffold (androidx.wear.compose.material3.ScreenScaffold ile) |
|
Yeni |
|
Onay kutusu açma/kapatma kontrolü içeren androidx.wear.compose.material.ToggleChip |
|
androidx.wear.compose.material.Chip (yalnızca arka plan gerekmediğinde) |
|
Yeni |
|
Yeni |
|
Yeni |
|
Tonlu bir düğme arka planı gerektiğinde androidx.wear.compose.material.Chip |
|
Yeni |
|
Yeni |
|
Yeni |
|
Yeni |
|
Yeni |
|
Radyo düğmesi açma/kapatma kontrolü içeren androidx.wear.compose.material.ToggleChip |
|
android.wear.compose.material.Scaffold (androidx.wear.compose material3.AppScaffold ile) |
|
androidx.wear.compose.material3.SegmentedCircularProgressIndicator |
Yeni |
androidx.wear.compose.material.SwipeToRevealCard ve androidx.wear.compose.material.SwipeToRevealChip |
|
Anahtar açma/kapatma kontrolü içeren androidx.wear.compose.material.ToggleChip |
|
Yeni |
Son olarak, Wear Compose Foundation kitaplığının 1.5.0-beta01 sürümündeki bazı ilgili bileşenlerin listesi:
Wear Compose Foundation 1.5.0-beta |
|
|---|---|
Bir uygulamadaki composable'ları açıklama eklemek, kompozisyonun etkin bölümünü takip etmek ve odağı koordine etmek için kullanılır. |
|
Performansı artırmak ve Wear OS yönergelerine uygunluğu sağlamak için Wear'a özel geliştirmelerle Compose Foundation bileşenleri üzerine oluşturulmuş, yatay olarak kaydırılan bir sayfalayıcı. |
|
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ı. |
|
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
import androidx.wear.compose.material3.Button
//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)
M3, yeni düğme varyasyonlarını da içerir. Bu API'leri Compose Material 3 API referansına genel bakış sayfasında inceleyebilirsiniz.
M3, yeni bir düğme olan EdgeButton'ı kullanıma sunar. EdgeButton dört farklı boyutta mevcuttur: çok küçük, küçük, orta ve büyük. EdgeButton uygulaması
boyuta bağlı olarak maxLines için özelleştirilebilen bir varsayılan değer sağlar.
TransformingLazyColumn ve ScalingLazyColumn kullanıyorsanız EdgeButton öğesini ScreenScaffold içine aktarın. Böylece EdgeButton, kaydırma işlemiyle şekil değiştirir. EdgeButton ile ScreenScaffold ve TransformingLazyColumn'nin nasıl kullanılacağını kontrol etmek için aşağıdaki koda bakın.
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
ScreenScaffold(
scrollState = state,
contentPadding = contentPadding,
edgeButton = {
EdgeButton(...)
}
){ 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.
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
M3
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
AppScaffold {
// Define the navigation hierarchy within the AppScaffold,
// such as using SwipeDismissableNavHost.
SwipeDismissableNavHost(...) {
composable("home") {
HomeScreen()
}
//other screens
}
}
fun HomeScreen() {
val scrollState = rememberScrollState()
ScreenScaffold(scrollState = scrollState) {
//rest of the screen code
}
}
HorizontalPagerIndicator ile HorizontalPager kullanıyorsanız HorizontalPagerScaffold'e geçiş yapabilirsiniz. HorizontalPagerScaffold, AppScaffold içine yerleştirilir. AppScaffold ve HorizontalPagerScaffold, bir sayfalayıcının yapısını düzenler ve HorizontalPageIndicator ile TimeText bileşenlerinin geçişlerini koordine eder.
HorizontalPagerScaffold, varsayılan olarak ekranın ortasında HorizontalPageIndicator simgesini gösterir ve Pager öğesinin sayfalandırılıp sayfalandırılmadığına göre TimeText ve HorizontalPageIndicator simgelerinin gösterilmesini/gizlenmesini koordine eder. Bu durum PagerState tarafından belirlenir.
Ayrıca, bir sayfalayıcıdaki sayfayı konumuna göre ölçeklendirme ve karartma efektiyle canlandıran yeni bir AnimatedPage bileşeni de var.
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
AppScaffold {
val pagerState = rememberPagerState(pageCount = { 10 })
HorizontalPagerScaffold(pagerState = pagerState) {
HorizontalPager(
state = pagerState,
) { page ->
AnimatedPage(pageIndex = page, pagerState = pagerState) {
ScreenScaffold {
…
}
}
Son olarak, M3, HorizontalPagerScaffold ile aynı deseni izleyen bir VerticalPagerScaffold'u kullanıma sunuyor:
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
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ğıya bakın.
M2.5 |
M3 |
|---|---|
|
Kaldırıldı |
|
Kaldırıldı |
|
|
|
Kaldırıldı |
|
kaldırıldı |
|
Kaldırıldı |
|
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 öğelerini 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.
ScalingLazyColumn'ya benzer şekilde, kompozisyonlarda hatırlanan bir TransformingLazyColumnState oluşturmak için rememberTransformingLazyColumnState() sağlar.
Ölçeklendirme ve dönüştürme 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
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
ScreenScaffold(state) { contentPadding ->
TransformingLazyColumn(state = state, contentPadding = contentPadding) {
items(count = 50) {
Button(
onClick = {},
modifier =
Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
transformation = SurfaceTransformation(transformationSpec),
) {
Text("Item $it")
}
}
}
}
}
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.