Materyal Tasarım 3, Materyal Tasarım'ın yeni evrimidir. Google güncellenmiş temalar, bileşenler ve Material You kişiselleştirme özelliklerini içerir tercih edebilirsiniz. Bu, Materyal Tasarım 2'nin bir güncellemesidir ve Android 12 ve sonraki sürümlerdeki yeni görsel stil ve sistem kullanıcı arayüzüyle uyumludur.
Bu kılavuz, Oluşturma Materyali'nden taşıma işlemine odaklanır. (androidx.compose.material) Jetpack kitaplığını Compose Material 3'e taşıyın (androidx.compose.material3) Jetpack kitaplığı'nı seçin.
Yaklaşımlar
Genel olarak, hem M2 hem de M3'ü tek bir uygulamada uzun süre kullanmamalısınız. Bu iki tasarım sisteminin ve ilgili kitaplıkların birbirinden farklı olmasıdır. hem kullanıcı deneyimi/kullanıcı arayüzü tasarımları hem de Compose uygulamaları açısından önemli.
Uygulamanızda, Figma kullanılarak oluşturulan gibi bir tasarım sistemi kullanılıyor olabilir. Böyle bir durumda durumlarda, sizin veya tasarım ekibinizin bunu M2'den taşımasını M3'e önce taşımaya başlamadan önce. Taşıma yapmak mantıklı değil Kullanıcı deneyimi/kullanıcı arayüzü tasarımı M2'ye dayalıysa uygulamayı M3'e geri yükleyebilirsiniz.
Ayrıca taşımaya yaklaşımınız, uygulamanızın özelliklerine göre ve kullanıcı deneyimi/kullanıcı arayüzü tasarımı. Bu sayede, proje üzerindeki etkinizi en aza indirebilirsiniz. kod tabanınız içindir. Taşıma işlemi için aşamalı bir yaklaşım benimsemeniz gerekir.
Taşınma zamanı
Taşıma işlemini en kısa sürede başlatmanız gerekir. Ancak şunu unutmamak gerekir: uygulamanızın tamamını taşımak için gerçekçi bir konumda olup olmadığını göz önünde bulundurun Y2'den M3'e. Bazı "engelleyici" senaryoları araştırabilirsiniz. Başlamadan önce:
| Senaryo | Önerilen yaklaşım |
|---|---|
| "Engelleyen" yok | Aşamalı taşımaya başlayın |
| M2'den bir bileşen henüz M3'te kullanılamıyor. Aşağıdaki Bileşenler ve düzenler bölümüne bakın. | Aşamalı taşımaya başlayın |
| Siz veya tasarım ekibiniz, uygulamanın tasarım sistemini M2'den M3'e taşımadınız | Tasarım sistemini M2'den M3'e taşıyıp aşamalı taşımaya başlayın |
Yukarıdaki senaryolardan etkilenseniz bile aşamalı bir yaklaşım benimsemelisiniz taşıma aşamasına geçebileceksiniz. Böyle durumlarda önce M2 ve M3'ü yan yana kullandığını, son aşamaya geçerken ise M2'nin aşamalı olarak M3.
Aşamalı yaklaşım
Aşamalı taşımanın genel adımları şunlardır:
- M2 bağımlılığıyla birlikte M3 bağımlılığı ekleyin.
- Uygulamanızın temalarının M3 sürümlerini M3 sürümlerini, ve temaya göre ekleyebilirsiniz.
- (ayrıntılar için aşağıdaki bölümlere bakın).
- Tamamen taşındıktan sonra uygulamanızın temalarının M2 sürümlerini kaldırın.
- M2 bağımlılığını kaldırın.
Bağımlılıklar
M3'ün ayrı bir paketi ve M2 sürümü vardır:
M2
implementation "androidx.compose.material:material:$m2-version"
M3
implementation "androidx.compose.material3:material3:$m3-version"
Materyal 3 oluşturma sürümleri sayfasında en son M3 sürümlerine bakın.
Ana M2 ve M3 kitaplıklarının dışındaki diğer Materyal bağımlılıkları değiştirildi. M2 ve M3 paketleri ile sürümlerinin bir karışımını kullanıyorlar ancak etkisine de değindik. M3'te olduğu gibi kullanılabilirler:
| Kitaplık | Paket ve sürüm |
|---|---|
| Materyal Simgeleri Oluşturma | androidx.compose.material:material-icons-*:$m2-version |
| Material Ripple Oluşturma | androidx.compose.material:material-ripple:$m2-version |
| Oluşturma Malzeme 3 Pencere Boyutu Sınıfı | androidx.compose.material3:material3-window-size-class:$m3-version |
Deneysel API'ler
Bazı M3 API'leri deneysel olarak kabul edilir. Bu gibi durumlarda
ExperimentalMaterial3Api ek açıklamasını kullanarak işlev veya dosya düzeyinde:
import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
// M3 composables
}
Tema oluşturma
Hem M2 hem de M3'te, composable'ın adı MaterialTheme iken içe aktarılan tema
paketler ve parametreler farklılık gösterir:
M2
import androidx.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes
) {
// M2 content
}
M3
import androidx.compose.material3.MaterialTheme
MaterialTheme(
colorScheme = AppColorScheme,
typography = AppTypography,
shapes = AppShapes
) {
// M3 content
}
Renk
M3'teki renk sistemi, M2'den önemli ölçüde farklıdır. İlgili içeriği oluşturmak için kullanılan
renk parametrelerinin sayısı arttı, adları farklı ve
M3 bileşenleriyle farklı şekilde eşlenir. Bu, Compose'da M2
Colors sınıfı, M3 ColorScheme sınıfı ve ilgili işlevler:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
val AppLightColors = lightColors(
// M2 light Color parameters
)
val AppDarkColors = darkColors(
// M2 dark Color parameters
)
val AppColors = if (darkTheme) {
AppDarkColors
} else {
AppLightColors
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
val AppLightColorScheme = lightColorScheme(
// M3 light Color parameters
)
val AppDarkColorScheme = darkColorScheme(
// M3 dark Color parameters
)
val AppColorScheme = if (darkTheme) {
AppDarkColorScheme
} else {
AppLightColorScheme
}
M2 ve M3 renk sistemleri arasındaki önemli farklar dikkate alındığında,
Color parametreleri için makul bir eşleme yoktur. Bunun yerine, Materyal
Tema Oluşturucu aracını kullanarak M3 renk şeması oluşturun. M2'yi kullan
renklerini araçta "temel" kaynak renkler olarak kullanır.
M3 renk şeması tarafından kullanılan paletler. Aşağıdaki eşlemelerin bir
başlangıç noktası:
| M2 | Malzeme Tema Oluşturucu |
|---|---|
primary |
Birincil |
primaryVariant |
İkincil |
secondary |
Üçüncül |
surface veya background |
Normal |
Açık ve koyu temalar için rengin onaltılık kod değerlerini araçtan kopyalayabilirsiniz ve bunları bir M3 ColorScheme örneği uygulamak için kullanın. Alternatif olarak, Material Tema Oluşturucu, Oluşturma kodunu dışa aktarabilir.
isLight
M2 Colors sınıfının aksine M3 ColorScheme sınıfı
isLight parametresini kullanın. Genel olarak, sorunlarınızı çözmek için
seviyesinde de ele alacağız. Örnek:
M2
import androidx.compose.material.lightColors
import androidx.compose.material.darkColors
import androidx.compose.material.MaterialTheme
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) darkColors(…) else lightColors(…)
MaterialTheme(
colors = colors,
content = content
)
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = if (MaterialTheme.colors.isLight) 0.dp else 4.dp
…
}
}
M3
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme
val LocalCardElevation = staticCompositionLocalOf { Dp.Unspecified }
@Composable
private fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val cardElevation = if (darkTheme) 4.dp else 0.dp
CompositionLocalProvider(LocalCardElevation provides cardElevation) {
val colorScheme = if (darkTheme) darkColorScheme(…) else lightColorScheme(…)
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
}
@Composable
fun AppComposable() {
AppTheme {
val cardElevation = LocalCardElevation.current
…
}
}
Daha fazla bilgi için Oluşturma'da özel tasarım sistemleri kılavuzuna bakın.
Dinamik renk
M3'teki yeni bir özellik dinamik renk'tir. Özel alan oluşturmak yerine
M3 ColorScheme, Android'de cihazın duvar kağıdı renklerini kullanabilir.
12 ve sonraki sürümler:
Yazı biçimi
M3'teki tipografi sistemi M2'den farklıdır. Kullanılan
tipografi parametreleri yaklaşık olarak aynıdır, ancak farklı adlara ve
M3 bileşenleriyle farklı şekillerde eşlenirler. Bu, Compose'da M2
Typography sınıfı ve M3 Typography sınıfı:
M2
import androidx.compose.material.Typography
val AppTypography = Typography(
// M2 TextStyle parameters
)
M3
import androidx.compose.material3.Typography
val AppTypography = Typography(
// M3 TextStyle parameters
)
Başlangıç olarak aşağıdaki TextStyle parametre eşlemeleri önerilir
punto:
| M2 | M3 |
|---|---|
h1 |
displayLarge |
h2 |
displayMedium |
h3 |
displaySmall |
| Yok | headlineLarge |
h4 |
headlineMedium |
h5 |
headlineSmall |
h6 |
titleLarge |
subtitle1 |
titleMedium |
subtitle2 |
titleSmall |
body1 |
bodyLarge |
body2 |
bodyMedium |
caption |
bodySmall |
button |
labelLarge |
| Yok | labelMedium |
overline |
labelSmall |
Şekil
M3'teki şekil sistemi, M2'den farklıdır. Şekil sayısı
sayıları arttığından, farklı şekilde adlandırılmış ve
M3 bileşenleri Bu durum, Compose'da M2 Shapes sınıfı ve
M3 Shapes sınıfı:
M2
import androidx.compose.material.Shapes
val AppShapes = Shapes(
// M2 Shape parameters
)
M3
import androidx.compose.material3.Shapes
val AppShapes = Shapes(
// M3 Shape parameters
)
Başlangıç olarak aşağıdaki Shape parametre eşlemeleri önerilir
punto:
| M2 | M3 |
|---|---|
| Yok | extraSmall |
small |
small |
medium |
medium |
large |
large |
| Yok | extraLarge |
Bileşenler ve düzenler
M2'deki çoğu bileşen ve düzen M3'te mevcuttur. Bununla birlikte, mevcut olmayanların yanı sıra yenilerini de görebilirsiniz. Ayrıca, bazı M3 bileşenlerinin M2'deki eşdeğerlerinden daha fazla varyasyonu vardır. Genel olarak M3 API yüzeyleri, en yakın eşdeğerlerine mümkün olduğunca benzer olmaya çalışır inceleyebilirsiniz.
Güncellenen renk, yazı ve şekil sistemleri dikkate alındığında, M3 bileşenleri harita oluşturma eğilimindedir. yeni tema değerlerinden çok farklı olacaktır. Jetonları kontrol etmek, dizini'ni indirin. doğru olarak kabul eder.
Bazı bileşenler için özel dikkat edilmesi gerekir. Ancak aşağıdaki fonksiyonlar eşlemeleri başlangıç noktası olarak önerilir:
Eksik API'ler:
| M2 | M3 |
|---|---|
androidx.compose.material.swipeable |
Henüz kullanılamıyor |
Değiştirilen API'ler:
| M2 | M3 |
|---|---|
androidx.compose.material.BackdropScaffold |
M3 eşdeğeri yok, bunun yerine Scaffold veya BottomSheetScaffold'e geçin |
androidx.compose.material.BottomDrawer |
M3 eşdeğeri yok, bunun yerine ModalBottomSheet'e geçin |
Yeniden adlandırılmış API'ler:
Diğer tüm API'ler:
Compose Material 3 API'de en yeni M3 bileşenlerini ve düzenlerini inceleyin. referanslara genel bakış ve yeni sürümler için sürümler sayfasını ve güncellenmiş API'ler.
İskele, atıştırmalık çubukları ve gezinme çekmecesi
M3'teki iskele, M2'den farklıdır. Hem M2 hem de M3'te, composable ana düzen
Scaffold olarak adlandırılır, ancak içe aktarma paketleri ve parametreleri birbirinden farklıdır:
M2
import androidx.compose.material.Scaffold
Scaffold(
// M2 scaffold parameters
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
// M3 scaffold parameters
)
Scaffold adlı M2 parametresi artık şu şekilde adlandırılmış bir backgroundColor parametresi içeriyor:
M3'teki Scaffold containerColor:
M2
import androidx.compose.material.Scaffold
Scaffold(
backgroundColor = …,
content = { … }
)
M3
import androidx.compose.material3.Scaffold
Scaffold(
containerColor = …,
content = { … }
)
M2 ScaffoldState sınıfı, içerdiği için artık M3'te mevcut değil.
Artık gerekli olmayan drawerState parametresi. Snackbars şununla gösterilir:
M3 Scaffold ise bunun yerine SnackbarHostState kullanın:
M2
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
content = {
…
scope.launch {
scaffoldState.snackbarHostState.showSnackbar(…)
}
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
snackbarHost = { SnackbarHost(snackbarHostState) },
content = {
…
scope.launch {
snackbarHostState.showSnackbar(…)
}
}
)
Scaffold kimlikli M2'deki tüm drawer* parametreleri
M3 Scaffold. Bunlar, drawerShape ve
drawerContent. M3 Scaffold içeren bir çekmece göstermek için gezinme çekmecesini kullanın
composable, örneğin ModalNavigationDrawer:
M2
import androidx.compose.material.DrawerValue
import
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberDrawerState
import androidx.compose.material.rememberScaffoldState
val scaffoldState = rememberScaffoldState(
drawerState = rememberDrawerState(DrawerValue.Closed)
)
val scope = rememberCoroutineScope()
Scaffold(
scaffoldState = scaffoldState,
drawerContent = { … },
drawerGesturesEnabled = …,
drawerShape = …,
drawerElevation = …,
drawerBackgroundColor = …,
drawerContentColor = …,
drawerScrimColor = …,
content = {
…
scope.launch {
scaffoldState.drawerState.open()
}
}
)
M3
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.rememberDrawerState
val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
ModalDrawerSheet(
drawerShape = …,
drawerTonalElevation = …,
drawerContainerColor = …,
drawerContentColor = …,
content = { … }
)
},
gesturesEnabled = …,
scrimColor = …,
content = {
Scaffold(
content = {
…
scope.launch {
drawerState.open()
}
}
)
}
)
Üst uygulama çubuğu
M3'teki en üstteki uygulama çubukları, M2'dekilerden farklıdır. Hem M2'de
ve M3'te, composable'ın ana üst uygulama çubuğu adı TopAppBar iken içe aktarma
paketler ve parametreler farklılık gösterir:
M2
import androidx.compose.material.TopAppBar
TopAppBar(…)
M3
import androidx.compose.material3.TopAppBar
TopAppBar(…)
Daha önce M3'ü CenterAlignedTopAppBar kullanabilirsiniz.
ortalamasının TopAppBar olduğunu unutmayın. Proje yönetiminde
MediumTopAppBar ve LargeTopAppBar.
M3 üst uygulama çubukları, farklı özellikler sağlamak için yeni bir scrollBehavior parametresi içerir
TopAppBarScrollBehavior sınıfında kaydırdığınızda veya
yükseltilmiş rakımları değiştirmektir. Bu özellik, videodaki kaydırılabilir
Modifer.nestedScroll. Bu, M2 TopAppBar'de mümkün olan
elevation parametresini manuel olarak değiştirmek için:
M2
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Scaffold
import androidx.compose.material.TopAppBar
val state = rememberLazyListState()
val isAtTop by remember {
derivedStateOf {
state.firstVisibleItemIndex == 0 && state.firstVisibleItemScrollOffset == 0
}
}
Scaffold(
topBar = {
TopAppBar(
elevation = if (isAtTop) {
0.dp
} else {
AppBarDefaults.TopAppBarElevation
},
…
)
},
content = {
LazyColumn(state = state) { … }
}
)
M3
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
TopAppBar(
scrollBehavior = scrollBehavior,
…
)
},
content = {
LazyColumn { … }
}
)
Alt gezinme / Gezinme çubuğu
M2'deki alt gezinme menüsünün adı gezinme çubuğu olarak değiştirildi.
M3. M2'de BottomNavigation ve
BottomNavigationItem composable, M3'te ise
NavigationBar ve NavigationBarItem composable'lar:
M2
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
BottomNavigation {
BottomNavigationItem(…)
BottomNavigationItem(…)
BottomNavigationItem(…)
}
M3
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
NavigationBar {
NavigationBarItem(…)
NavigationBarItem(…)
NavigationBarItem(…)
}
Düğmeler, simge düğmeleri ve FAB'ler
M3'te düğmeler, simge düğmeleri ve kayan işlem düğmeleri (FAB'ler) M2'dekilerden farklıdır. M3, tüm M2 düğme composable'larını içerir:
M2
import androidx.compose.material.Button
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.IconToggleButton
import androidx.compose.material.OutlinedButton
import androidx.compose.material.TextButton
// M2 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M2 icon buttons
IconButton(…)
IconToggleButton(…)
// M2 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3
import androidx.compose.material3.Button
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.TextButton
// M3 buttons
Button(…)
OutlinedButton(…)
TextButton(…)
// M3 icon buttons
IconButton(…)
IconToggleButton(…)
// M3 FABs
FloatingActionButton(…)
ExtendedFloatingActionButton(…)
M3, yeni düğme varyasyonları da içerir. Bu soruları Compose Material 3'te inceleyin. API referansına genel bakış
Geçiş yap
M3'teki Switch, M2'den farklıdır. Hem M2 hem de M3'te anahtar
composable'ın adı Switch, ancak içe aktarma paketleri farklı:
M2
import androidx.compose.material.Switch
Switch(…)
M3
import androidx.compose.material3.Switch
Switch(…)
Yüzeyler ve yükseklik
M3'teki yüzey ve yükselti sistemleri M2'den farklıdır. İki türü vardır yükseklik farkı:
- Gölge rakımı (M2 ile aynı şekilde bir gölge oluşturur)
- Ton rakımı (bir rengi kaplar, M3'te yeni)
Compose'da bu, M2 Surface işlevi ve M3 için geçerlidir.
Surface işlevi:
M2
import androidx.compose.material.Surface
Surface(
elevation = …
) { … }
M3
import androidx.compose.material3.Surface
Surface(
shadowElevation = …,
tonalElevation = …
) { … }
Hem shadowElevation için M2'deki elevation Dp değerlerini kullanabilirsiniz
kullanıcı deneyimi/kullanıcı arayüzü tasarım tercihine bağlı olarak M3'te ve/veya tonalElevation.
Surface, çoğu bileşenin arkasındaki composable'dır. Dolayısıyla,
composable'lar, aynı
sağlar.
M3'teki ton rakımı, M2 koyu renkteki yükseklik bindirme kavramının yerini alıyor
. Sonuç olarak, ElevationOverlay ve LocalElevationOverlay
M3'te mevcut değil. Y2'deki LocalAbsoluteElevation ise
M3 sürümünde LocalAbsoluteTonalElevation
Vurgu ve içerik alfa
M3'teki vurgu M2'den önemli ölçüde farklıdır. M2'de, değer teslim etmeye Metin ve renk gibi içeriği ayırt etmek için, belirli alfa değerleriyle "açık" renkler simgelerine dokunun. Artık M3'te birkaç farklı yaklaşım var:
- Genişletilmiş M3'teki "varyant açık" renklerinin yanı sıra "açık" renkleri kullanma renk sistemi.
- Metin için farklı yazı tipi ağırlıkları kullanma.
Bu nedenle, ContentAlpha ve LocalContentAlpha
M3 yüklü olduğu için değiştirilmesi gerekiyor.
Başlangıç noktası olarak aşağıdaki eşlemeler önerilir:
| M2 | M3 |
|---|---|
ContentAlpha.high ile onSurface |
Genel olarak onSurface, metin için FontWeight.Medium - FontWeight.Black |
ContentAlpha.medium ile onSurface |
Genel olarak onSurfaceVariant, metin için FontWeight.Thin - FontWeight.Normal |
ContentAlpha.disabled ile onSurface |
onSurface.copy(alpha = 0.38f) |
Aşağıda, M2 ve M3'te simge vurgusunun bir örneği verilmiştir:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Icon(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
Icon(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
Icon(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Icon(…)
}
Aşağıda, M2 ve M3'te metin vurgusu örneği verilmiştir:
M2
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
// High emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
Text(…)
}
// Medium emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(…)
}
// Disabled emphasis
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Text(…)
}
M3
import androidx.compose.material3.LocalContentColor
// High emphasis
Text(
…,
fontWeight = FontWeight.Bold
)
// Medium emphasis
Text(
…,
fontWeight = FontWeight.Normal
)
// Disabled emphasis
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)) {
Text(
…,
fontWeight = FontWeight.Normal
)
}
Arka planlar ve kapsayıcılar
M2'de arka planlar, M3'te "kapsayıcılar" olarak adlandırılır. Genel olarak,
M2'de, Y3'te container* ile aynı değerleri kullanan background* parametreleri.
Örnek:
M2
Badge(
backgroundColor = MaterialTheme.colors.primary
) { … }
M3
Badge(
containerColor = MaterialTheme.colorScheme.primary
) { … }
Faydalı bağlantı
Compose'da M2'den M3'e geçiş hakkında daha fazla bilgi edinmek için aşağıdaki kaynakları inceleyin: ek kaynaklar.
Dokümanlar
Örnek uygulamalar
- Reply M3 örnek uygulaması
- Jetchat örnek uygulaması M2'den M3'e taşıma
- Jetnews örnek uygulaması M2'den M3'e taşıma
- Artık Android M3 hero uygulamasında :core-designsystem modülü
Videolar
API referansı ve kaynak kodu
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Compose'da Materyal Tasarım 2
- E-posta Yazma'da Materyal Tasarım 3
- Compose'da özel tasarım sistemleri