Jetpack Compose, Materyal Tasarım 3 uygulamasını sunar. Materyal Tasarım'ın yeni evrimi. 3. Materyal 3. Materyal 3. Materyal 3'te, bileşenleri ile Material You kişiselleştirme özelliklerini kullanın ve Android 12'deki yeni görsel stil ve sistem kullanıcı arayüzüyle uyumlu olacak şekilde tasarlandı. ve üzeri.
Aşağıda, Materyal Tasarım 3 uygulamasını gösteriyoruz bunu örnek olarak Yanıtlama örnek uygulamasını kullanabilirsiniz. Yanıt örneği: temelini oluşturur.
Bağımlılık
Compose uygulamanızda Materyal 3'ü kullanmaya başlamak için Compose Material 3'ü ekleyin.
build.gradle dosyalarınıza bağımlılığınız:
implementation "androidx.compose.material3:material3:$material3_version"
Bağımlılık eklendikten sonra, Materyal Tasarım sistemlerini eklemeye, renk, tipografi ve şekil gibi özellikler dahil.
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
}
Materyal teması oluşturma
Bir M3 temasında şu alt sistemleri bulunur: colorschema, yazım ve şekiller. Özelleştirdiğinizde değişiklikleriniz otomatik olarak sizin oluşturduğunuz M3 bileşenlerine kullanacağınız bazı stratejileri inceleyelim.
Jetpack Compose bu kavramları M3 MaterialTheme sürümünde uyguluyor.
composable:
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
Uygulama içeriğinizi temalandırmak için renk şemasını, tipografiyi ve ve şekiller oluşturabilirsiniz.
Renk şeması
Renk şemasının temeli, beş temel rengin oluşturduğu kümedir. Bunların her biri renkler, Malzeme 3 tarafından kullanılan 13 tonluk bir ton paletine karşılık gelir bileşenlerine ayıralım. Örneğin bu, şu fotoğraf için açık temanın renk şemasıdır: Yanıtla:
Renk şeması ve renk rolleri hakkında daha fazla bilgi edinin.
Renk şemaları oluşturun
Manuel olarak özel bir ColorScheme oluşturabilirsiniz ancak bunu yapmak genellikle daha kolaydır.
markanızın kaynak renklerini kullanarak bir tane oluşturun. Malzeme Teması
Builder aracı, bunu yapmanıza ve isteğe bağlı olarak dışa aktarmanıza olanak tanır.
Tema kodu oluşturun. Aşağıdaki dosyalar oluşturulur:
Color.kt, tanımlanan tüm roller için temanızın renklerini içerir hem açık hem koyu tema renkleri oluşturabilirsiniz.
val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..
Theme.kt, açık ve koyu renk şemaları ile uygulama için bir kurulum içeriyor tıklayın.
private val LightColorScheme = lightColorScheme(
primary = md_theme_light_primary,
onPrimary = md_theme_light_onPrimary,
primaryContainer = md_theme_light_primaryContainer,
// ..
)
private val DarkColorScheme = darkColorScheme(
primary = md_theme_dark_primary,
onPrimary = md_theme_dark_onPrimary,
primaryContainer = md_theme_dark_primaryContainer,
// ..
)
@Composable
fun ReplyTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colorScheme =
if (!darkTheme) {
LightColorScheme
} else {
DarkColorScheme
}
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
Açık ve koyu temaları desteklemek için isSystemInDarkTheme() kullanın. Referans olarak
sistem ayarında, hangi renk şemasının kullanılacağını tanımlayın: açık veya koyu.
Dinamik renk şemaları
Dinamik renk, Material You'nun en önemli bileşenidir. algoritması, kullanıcının cihazına uygulamak için kullanıcının duvar kağıdından özel renkler uygulamalar ve sistem kullanıcı arayüzü. Bu renk paleti, mola vermek için gereken açık ve koyu renk şemaları.
Dinamik renk özelliği Android 12 ve sonraki sürümlerde kullanılabilir. Dinamik renk
dinamik bir ColorScheme ayarlayabilirsiniz. Aksi halde,
ColorScheme değiştirebilirsiniz.
ColorScheme, dinamik bir ışık oluşturmak için derleyici işlevleri sağlar veya
koyu renk şeması:
// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
Renk kullanımı
Uygulamanızdaki Materyal tema renklerine şuradan erişebilirsiniz:
MaterialTheme.colorScheme:
Text(
text = "Hello theming",
color = MaterialTheme.colorScheme.primary
)
Her bir renk rolü, bileşenin özelliklerine bağlı olarak çeşitli yerlerde kullanılabilir durum, belirginlik ve vurgulamadır.
- Birincil renk, belirgin gibi ana bileşenler için kullanılan temel renktir düğmeleri, etkin durumları ve yükseltilmiş yüzeylerin tonunu gösterir.
- İkincil tuş rengi, kullanıcı arayüzünde olarak sunar ve renk ifade etme fırsatını genişletir.
- Üçüncül tuş rengi, farklı renklerde bir araya getirilmiş aksanların birincil ve ikincil renkleri dengelemek veya gelişmiş özellikleri dikkat çekmektir.
Yanıtla örnek uygulama tasarımı, birincil kapsayıcıyı otomatik olarak değiştirmeniz gerekir.
Card(
colors = CardDefaults.cardColors(
containerColor =
if (isSelected) MaterialTheme.colorScheme.primaryContainer
else
MaterialTheme.colorScheme.surfaceVariant
)
) {
Text(
text = "Dinner club",
style = MaterialTheme.typography.bodyLarge,
color =
if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
else MaterialTheme.colorScheme.onSurface,
)
}
Burada, Yanıt Gezinme çekmecesinde ikincil ve üçüncül kapsayıcı renkleri ise kontrast ve vurgu oluşturmak için kullanılır.
Yazı biçimi
Materyal Tasarım 3, metin stillerini içeren bir tür ölçeğini tanımlar. uyarlanmıştır. Adlandırma ve gruplama basitleştirilmiştir: görüntülü, başlık, başlık, gövde ve etiket, büyük, orta, küçük boyutlar da var.
| Y3 | Varsayılan Yazı Tipi Boyutu/Satır Yüksekliği |
displayLarge |
Roboto 57/64 |
displayMedium |
Roboto 45/52 |
displaySmall |
Roboto 36/44 |
headlineLarge |
Roboto 32/40 |
headlineMedium |
Roboto 28/36 |
headlineSmall |
Roboto 24/32 |
titleLarge |
New- Roboto Medium 22/28 |
titleMedium |
Roboto Medium 16/24 |
titleSmall |
Roboto Medium 14/20 |
bodyLarge |
Roboto 16/24 |
bodyMedium |
Roboto 14/20 |
bodySmall |
Roboto 12/16 |
labelLarge |
Roboto Medium 14/20 |
labelMedium |
Roboto Medium 12/16 |
labelSmall |
New Roboto Medium, 11/16 |
Tipografiyi tanımlama
Compose, mevcut sınıfla birlikte M3 Typography sınıfını sağlar.
TextStyle ve yazı tipiyle ilgili sınıflar: Materyal 3 türünü modellemek için
yardımcı olur. Typography oluşturucu, her stil için varsayılan ayarlar sunar. Böylece, bunu atlayabilirsiniz.
Özelleştirmek istemediğiniz parametreler:
val replyTypography = Typography(
titleLarge = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 22.sp,
lineHeight = 28.sp,
letterSpacing = 0.sp
),
titleMedium = TextStyle(
fontWeight = FontWeight.SemiBold,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp
),
// ..
)
// ..
Ürününüz için muhtemelen Materyal Tasarım'daki 15 varsayılan stilin tamamına ihtiyacınız olmayacaktır ölçek türü. Bu örnekte küçültülmüş bir grup için beş boyut seçilmiştir ve diğerleri atlanır.
TextStyle öğesinin varsayılan değerlerini değiştirerek yazı tipinizi özelleştirebilirsiniz.
ve fontFamily ile letterSpacing gibi yazı tipiyle ilgili özellikleri kullanabilirsiniz.
bodyLarge = TextStyle(
fontWeight = FontWeight.Normal,
fontFamily = FontFamily.SansSerif,
fontStyle = FontStyle.Italic,
fontSize = 16.sp,
lineHeight = 24.sp,
letterSpacing = 0.15.sp,
baselineShift = BaselineShift.Subscript
),
Typography öğenizi tanımladıktan sonra M3 MaterialTheme'ye iletin:
MaterialTheme(
typography = replyTypography,
) {
// M3 app Content
}
Metin stillerini kullanma
M3 MaterialTheme composable tarafından sağlanan tipografiyi şuradan alabilirsiniz:
MaterialTheme.typography kullanılarak:
Text(
text = "Hello M3 theming",
style = MaterialTheme.typography.titleLarge
)
Text(
text = "you are learning typography",
style = MaterialTheme.typography.bodyMedium
)
Materyal yönergeleri hakkında daha fazla bilgi için tipografi.
Şekiller
Malzeme yüzeyleri farklı şekillerde gösterilebilir. Dikkati şekillendirmek, bileşenleri tanımlama, durumu iletme ve markayı ifade etme.
Şekil ölçeği, kapsayıcı köşelerinin stilini tanımlar ve kareden tamamen dairesele yuvarlaklık.
Şekil tanımlama
Compose, M3 Shapes sınıfını desteklemek için genişletilmiş parametreler sağlar.
yeni M3 şekillerine dokunun. M3 şekil ölçeği daha çok tür ölçeğine benzer,
Kullanıcı arayüzünde anlamlı bir şekil aralığı sağlar.
Farklı şekil boyutları vardır:
- Ekstra Küçük
- Küçük
- Orta
- Büyük
- Ekstra Büyük
Varsayılan olarak her şeklin varsayılan bir değeri vardır, ancak bunları geçersiz kılabilirsiniz:
val replyShapes = Shapes(
extraSmall = RoundedCornerShape(4.dp),
small = RoundedCornerShape(8.dp),
medium = RoundedCornerShape(12.dp),
large = RoundedCornerShape(16.dp),
extraLarge = RoundedCornerShape(24.dp)
)
Shapes tanımladıktan sonra M3'e MaterialTheme aktarabilirsiniz:
MaterialTheme(
shapes = replyShapes,
) {
// M3 app Content
}
Şekilleri kullanma
Şekil ölçeğini, MaterialTheme veya
bunu bileşen bazında yapabilirsiniz.
Orta ve büyük şekli varsayılan değerlerle uygulayın:
Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
shape = MaterialTheme.shapes.large,
onClick = {
}
) {
/* fab content */
}
Şekillerin parçası olan iki şekil daha (RectangleShape ve CircleShape) var
sağlayabilirsiniz. Dikdörtgen şeklinin kenarlık yarıçapı yok ve daire şekli tam görünüyor
daire içinde kenarlar:
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Aşağıdaki örneklerde, varsayılan şekil değerlerine sahip bileşenlerden bazıları gösterilmektedir şunları uyguladı:
Materyal yönergeleri hakkında daha fazla bilgi için şekil ekleyin.
Vurgu
M3'te vurgu, renk çeşitleri ve renk üzerindeki renkler kullanılarak sağlanır emin olun. M3'te, kullanıcı arayüzünüze vurgu eklemenin iki yolu vardır:
- Yüzeyle birlikte yüzey, yüzey varyantı ve arka planın kullanılması, Genişletilmiş M3 renk sisteminden yüzey üzerindeki varyant renkler. Örneğin, yüzey, yüzey üzerinde varyantla, yüzey varyantıyla da kullanılabilir. farklı vurgulama düzeyleri sağlamak üzere yüzeyde.
- Metin için farklı yazı tipi ağırlıkları kullanma. Yukarıda, Arkadaş Bitkiler projesinin özel ağırlıkları, tür ölçeğimize eklememiz gerekir.
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
Yükseklik
Malzeme 3, genel olarak tonal renk yer paylaşımları kullanılarak yüksekliği temsil eder. Bu yeni bir Kapsayıcılar ve yüzeyleri birbirinden ayırt etmenin bir yolu. Böylece ton değeri artırılıyor. gölgelere ek olarak daha belirgin bir ton kullanır.
Koyu temalardaki yükseklik yer paylaşımları da 3. Malzeme. Yer paylaşımı rengi, birincil renk alanından gelir.
Çoğu M3 bileşeninin arkasındaki composable olan M3 Yüzey, hem ton hem de gölge yükseltmesi desteği içerir:
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
Malzeme bileşenleri
Materyal Tasarım, zengin bir Materyal bileşen grubuyla birlikte sunulur (ör. düğmeler, çipler, kartlar, gezinme çubuğu) olan ve Material'ı kullanan SDK'lar Tema oluşturma ve güzel Materyal Tasarım uygulamaları geliştirmenize yardımcı olma. Web sitemiz g.co/newsinitiative/labs üzerinden varsayılan özelliklere sahip bileşenleri hemen kullanmaya başlayabilirsiniz.
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
M3, farklı rollerde kullanılmak üzere aynı bileşenlerin birçok farklı versiyonunu sunar. net bir şekilde tanımlamalısınız.
- En yüksek vurgu işlemi için genişletilmiş kayan işlem düğmesi:
ExtendedFloatingActionButton(
onClick = { /*..*/ },
modifier = Modifier
) {
Icon(
imageVector = Icons.Default.Edit,
contentDescription = stringResource(id = R.string.edit),
)
Text(
text = stringResource(id = R.string.add_entry),
)
}
- Yüksek vurgulu işlem için doldurulmuş bir düğme:
Button(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.view_entry))
}
- Düşük vurgulu bir işlem için metin düğmesi:
TextButton(onClick = { /*..*/ }) {
Text(text = stringResource(id = R.string.replated_articles))
}
Materyal düğmeleri ve diğer bileşenler hakkında daha fazla bilgi edinebilirsiniz. Material 3; Düğmeler, Uygulama Süsü gibi çok çeşitli bileşen paketleri sunar. farklı kullanım için özel olarak tasarlanmış Navigasyon bileşenleri kılıfları ve ekran boyutları.
Gezinme bileşenleri
Material, aynı zamanda tüm bu envanterleri ve uygulamaları bağlı olarak ayarlayabilirsiniz.
5 veya daha az cihazı hedeflemek istediğinizde NavigationBar, küçük cihazlar için kullanılır
hedefler:
NavigationBar(modifier = Modifier.fillMaxWidth()) {
Destinations.entries.forEach { replyDestination ->
NavigationBarItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
NavigationRail, şuralardaki küçük ve orta boyutlu tabletler veya telefonlar için kullanılır:
yatay moda erişir. Kullanıcılara ergonomik sunar ve kullanıcı deneyimini iyileştirir.
olanak tanıyor.
NavigationRail(
modifier = Modifier.fillMaxHeight(),
) {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { }
)
}
}
BottomNavigationBar (Sol) ve NavigationRail (Sağ)Herkese kapsamlı bir kullanıcı deneyimi sunmak için varsayılan temada her ikisini de kullanarak yanıtlayın cihaz boyutlarına bağlı.
NavigationDrawer, şu özelliklere sahip olduğunuz orta ila büyük boyutlu tabletlerde kullanılır:
ve ayrıntıları göstermek için yeterli alana sahip olmalıdır. Hem PermanentNavigationDrawer hem de
ModalNavigationDrawer ve NavigationRail.
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { },
label = { }
)
}
}) {
}
Gezinme seçenekleri kullanıcı deneyimini, ergonomiyi ve erişilebilirliği geliştirir. Materyal gezinme bileşenleri hakkında daha fazla bilgiyi şurada bulabilirsiniz: Uyarlanabilir codelab'ler oluşturun.
Bileşenin temasını özelleştirme
M3, kişiselleştirmeyi ve esnekliği teşvik eder. Tüm bileşenlerin varsayılan ayarları var renklerini özelleştirmek için esnek API'ler kullanarak gereklidir.
Kartlar ve düğmeler gibi çoğu bileşen, renk gösteren varsayılan bir nesne sağlar ve yükselti arayüzleri gibi çeşitli özelliklerle ekleyebilirsiniz:
val customCardColors = CardDefaults.cardColors(
contentColor = MaterialTheme.colorScheme.primary,
containerColor = MaterialTheme.colorScheme.primaryContainer,
disabledContentColor = MaterialTheme.colorScheme.surface,
disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
defaultElevation = 8.dp,
pressedElevation = 2.dp,
focusedElevation = 4.dp
)
Card(
colors = customCardColors,
elevation = customCardElevation
) {
// m3 card content
}
Materyal 3'ü özelleştirme hakkında daha fazla bilgi edinebilirsiniz.
Sistem Arayüzü
Material You'nun bazı özellikleri, Android 12 ve sonraki sürümler. Değişikliklerin yaşandığı iki temel alan dalgalanma ve aşırı kaydırma. Bu değişikliklerin uygulanması için ek işlem yapılması gerekmez.
Dalga
Ripple, basıldığında yüzeyleri aydınlatmak için artık hafif bir parıltı kullanıyor. Compose Material Ripple, aşağıdaki platformlarda bir platform RippleDrawable özelliğini kullanır. Android sayesinde ışıltı dalga, Android 12 ve sonraki tüm Materyaller için kullanılabilir. bileşenlerine ayıralım.
Fazla kaydırma
Fazla kaydırma artık, kaydırma kapsayıcılarının kenarında bir genişletme efekti kullanıyor.
Kaydırma kapsayıcısı composable'larında uzatmak için fazla kaydırma varsayılan olarak açıktır —
örneğin, LazyColumn, LazyRow ve LazyVerticalGrid —
API düzeyinden bağımsız olarak Compose Foundation 1.1.0 ve sonraki sürümler.
Erişilebilirlik
Materyal bileşenlerinde yerleşik olan erişilebilirlik standartları, kapsayıcı bir ürün tasarımının temelini oluşturur. Ürününüzün erişilebilirlik, erişilebilirlik özellikleri düşük olanlar da dahil olmak üzere, tüm kullanıcılar için görme, körlük, işitme bozukluğu, bilişsel bozukluklar, motor bozukluklar veya durumsal engellilik (ör. kırık kol).
Renk erişilebilirliği
Dinamik renk, renk kontrastı erişilebilirlik standartlarını karşılayacak şekilde tasarlanmıştır. Ton paletlerinden oluşan sistem, herhangi bir renk şemasını erişilebilir hale getirmek açısından kritik öneme sahiptir varsayılan olarak.
Malzemenin renk sistemi, standart ton değerleri ve ölçümleriyle erişilebilir kontrast oranlarını karşılamak için kullanılır.
Tüm Materyal bileşenleri ve dinamik temalar zaten yukarıdaki renk rollerini kullanıyor erişilebilirliği karşılamak için seçilen bir dizi ton paletinden gereksinimlerini karşılayın. Ancak, bileşenleri özelleştiriyorsanız renk rollerini uygun şekilde ayarlamak ve uyuşmazlığı önlemektir.
Birincil kapsayıcının üstünde birincil, birincil kapsayıcı üzerinde de birincil kapsayıcıyı kullan birincil kapsayıcı, aynısını diğer vurgulu ve nötr renklerle bir karşıtlığa yer vermelidir.
Birincil kapsayıcının üzerinde üçüncül bir kapsayıcının kullanılması, kullanıcıya kötü performans gösterir. kontrast düğmesi:
// ✅ Button with sufficient contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary
)
) {
}
// ❌ Button with poor contrast ratio
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
contentColor = MaterialTheme.colorScheme.primaryContainer
)
) {
}
Tipografiye uygunluk
M3 türü ölçek, statik tür rampayı ve değerleri güncelleyerek farklı cihazlarda ölçeklendirilen dinamik bir boyut kategorisi çerçevesine sahiptir.
Örneğin, M3'te Görüntülü Reklam Ağı'ndaki küçük ekrana bağlı olarak cihaz bağlamına göre özelleştirebilirsiniz.
Büyük ekranlar
Materyal, uygulamalarınızı geliştirebilmeniz için uyarlanabilir düzenler ve katlanabilir cihazlar hakkında rehberlik sunar. ve büyük cihaz sahibi kullanıcıların ergonomisini iyileştirebilir.
Material, size yardımcı olmak için farklı türde gezinme seçenekleri sunar. büyük cihazlarda daha iyi kullanıcı deneyimi sağlar.
Android büyük ekran uygulama kalitesi yönergeleri ve Uyarlanabilir ve erişilebilir tasarım için Yanıt örneğimize göz atın.
Daha fazla bilgi
Compose'da Materyal Tema oluşturma hakkında daha fazla bilgi edinmek için aşağıdakilere göz atın: kaynaklar:
Örnek uygulamalar
Dokümanlar
API referansı ve kaynak kodu
Videolar
ziyaret edin.Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Compose'da Materyal 2'den Materyal 3'e geçiş
- Compose'da Materyal Tasarım 2
- Compose'da özel tasarım sistemleri