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
![M2 ve M3 renk sistemlerinin karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-color-update.png?authuser=5&hl=tr)
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 |
![Malzeme Tema Oluşturucu'da M3 renk şeması oluşturmak için kullanılan M2 renkleri](https://developer.android.com/static/develop/ui/compose/images/migration-colorscheme-update.png?authuser=5&hl=tr)
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
![M2 ve M3 tipografi sistemlerinin karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-typography-update.png?authuser=5&hl=tr)
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
![M2 ve M3 şekil sistemlerinin karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-shape-update.png?authuser=5&hl=tr)
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
![Snackbar ve gezinme çekmecesi ile M2 ve M3 iskelenin karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-scaffold-update.gif?authuser=5&hl=tr)
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
![Üst uygulama çubuğu ve kaydırılan liste ile M2 ve M3 yapı iskelesinin karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-topbar-update.png?authuser=5&hl=tr)
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 alt gezinme ile M3 gezinme çubuğunun karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-bottomnav-update.png?authuser=5&hl=tr)
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
![M2 ve M3 düğmelerinin karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-buttons-update.png?authuser=5&hl=tr)
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
![M2 ve M3 anahtarlarının karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-switch-update.png?authuser=5&hl=tr)
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
![Açık ve koyu temalarda M2 yüzey yüksekliği ile M3 yüzey yüksekliğinin karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-elevation-update.png?authuser=5&hl=tr)
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
![M2 ve M3 simge ve metin vurgusunun karşılaştırması](https://developer.android.com/static/develop/ui/compose/images/migration-emphasis-update.png?authuser=5&hl=tr)
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