Jetpack Compose, dijital arayüzler oluşturmak için kapsamlı bir tasarım sistemi olan Materyal Tasarım'ın bir uygulamasını sunar. Materyal Tasarım bileşenleri (düğmeler, kartlar, anahtarlar vb.), Materyal Teması üzerine inşa edilmiştir. Malzeme Tasarımı, ürününüzün markasını daha iyi yansıtacak şekilde özelleştirmenin sistematik bir yoludur. Materyal Tema, renk, yazı ve şekil özelliklerini içerir. Bu özellikleri özelleştirdiğinizde, değişiklikleriniz uygulamanızı derlemek için kullandığınız bileşenlere otomatik olarak yansıtılır.
Jetpack Compose bu kavramları MaterialTheme composable ile uygular:
MaterialTheme(
colors = // ...
typography = // ...
shapes = // ...
) {
// app content
}
Uygulamanıza tema eklemek için MaterialTheme öğesine ilettiğiniz parametreleri yapılandırın.
Şekil 1. İlk ekran görüntüsünde MaterialTheme uygulamasını yapılandırmayan bir uygulama gösterildiği için bu uygulama varsayılan stili kullanıyor. İkinci ekran görüntüsünde, stili özelleştirmek için parametreleri MaterialTheme öğesine geçiren bir uygulama gösterilmektedir.
Renk
Renkler, Compose'da basit bir veri tutma sınıfı olan Color sınıfıyla modellenir.
val Red = Color(0xffff0000) val Blue = Color(red = 0f, green = 0f, blue = 1f)
Bunları istediğiniz gibi düzenleyebilirsiniz (üst düzey sabit değerler, bir tekli veya tanımlı satır içi değer olarak), temanızda renkleri belirtmeniz ve renkleri oradan almanız kesinlikle önerilir. Bu yaklaşım, koyu tema ve iç içe yerleştirilmiş temaların kolayca desteklenmesini mümkün kılar.
2. Şekil. Malzeme renk sistemi.
Compose, Malzeme renk sistemini modellemek için Colors sınıfını sağlar. Colors, açık veya koyu renklerden oluşan gruplar oluşturmak için oluşturucu işlevleri sağlar:
private val Yellow200 = Color(0xffffeb46)
private val Blue200 = Color(0xff91a4fc)
// ...
private val DarkColors = darkColors(
primary = Yellow200,
secondary = Blue200,
// ...
)
private val LightColors = lightColors(
primary = Yellow500,
primaryVariant = Yellow400,
secondary = Blue700,
// ...
)
Colors tanımladıktan sonra bunları bir MaterialTheme öğesine iletebilirsiniz:
MaterialTheme(
colors = if (darkTheme) DarkColors else LightColors
) {
// app content
}
Tema renklerini kullanma
MaterialTheme composable'ına sağlanan Colors öğesini MaterialTheme.colors kullanarak alabilirsiniz.
Text(
text = "Hello theming",
color = MaterialTheme.colors.primary
)
Yüzey ve içerik rengi
Birçok bileşen bir çift rengi ve içerik rengini kabul eder:
Surface(
color = MaterialTheme.colors.surface,
contentColor = contentColorFor(color),
// ...
) { /* ... */ }
TopAppBar(
backgroundColor = MaterialTheme.colors.primarySurface,
contentColor = contentColorFor(backgroundColor),
// ...
) { /* ... */ }
Bu sayede yalnızca bir composable'ın rengini değil, aynı zamanda içindeki içerik için de varsayılan bir renk sağlayabilirsiniz. Birçok composable varsayılan olarak bu içerik rengini kullanır. Örneğin, Text, rengini üst öğesinin içerik rengine dayandırır ve Icon, tonunu ayarlamak için bu rengi kullanır.
3. Şekil. Farklı arka plan renkleri ayarlamak, farklı metin ve simge renkleri oluşturulmasına neden olur.
contentColorFor() yöntemi, tüm tema renkleri için uygun "on" rengini alır. Örneğin, Surface üzerinde bir primary arka plan rengi ayarlarsanız bu işlev, içerik rengi olarak onPrimary değerini ayarlamak için kullanılır. Tema olmayan bir arka plan rengi ayarlarsanız uygun bir içerik rengi de belirtmeniz gerekir. Hiyerarşide belirli bir konumda geçerli arka plan için tercih edilen içerik rengini almak amacıyla LocalContentColor özelliğini kullanın.
İçerik alfa
Genellikle, önem vermek ve görsel hiyerarşi sağlamak için içeriği ne kadar vurguladığınızı değiştirmek istersiniz. Materyal Tasarım'daki metinlerin okunabilirliği önerileri, farklı önem düzeylerini belirtmek için farklı opaklık seviyelerinin kullanılmasını önerir.
Jetpack Compose bunu LocalContentAlpha aracılığıyla uygular.
Bu CompositionLocal için bir değer sağlayarak bir hiyerarşi için içerik alfası belirtebilirsiniz.
İç içe yerleştirilmiş composable'lar, alfa işlemini içeriklerine uygulamak için bu değeri kullanabilir.
Örneğin Text ve Icon varsayılan olarak LocalContentAlpha kullanılacak şekilde ayarlanmış LocalContentColor kombinasyonunu kullanır. Materyal, ContentAlpha nesnesi tarafından modellenen bazı standart alfa değerleri (high, medium, disabled) belirtiyor.
// By default, both Icon & Text use the combination of LocalContentColor &
// LocalContentAlpha. De-emphasize content by setting content alpha
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text(
// ...
)
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
Icon(
// ...
)
Text(
// ...
)
}
CompositionLocal hakkında daha fazla bilgi edinmek için CompositionLocal ile yerel kapsamlı veriler'i inceleyin.
4. Şekil. Bilgi hiyerarşisini görsel olarak iletmek için metne farklı vurgu düzeyleri uygulayın. Metnin ilk satırı başlık olduğundan ve en önemli bilgileri içerdiğinden ContentAlpha.high ifadesini kullanır. İkinci satır daha az önemli meta veriler içerdiği için ContentAlpha.medium değerini kullanır.
Koyu tema
Compose'da MaterialTheme composable'ına farklı Colors grupları sağlayarak açık ve koyu temaları uygularsınız:
@Composable
fun MyTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
MaterialTheme(
colors = if (darkTheme) DarkColors else LightColors,
/*...*/
content = content
)
}
Bu örnekte MaterialTheme, koyu tema kullanılıp kullanılmayacağını belirten bir parametreyi kabul eden kendi composable işlevi içinde sarmalanmıştır. Bu durumda işlev, cihaz teması ayarını sorgulayarak darkTheme için varsayılan değeri alır.
Mevcut Colors değerinin açık mı yoksa koyu mu olduğunu kontrol etmek için aşağıdaki gibi bir kod kullanabilirsiniz:
val isLightTheme = MaterialTheme.colors.isLight
Icon(
painterResource(
id = if (isLightTheme) {
R.drawable.ic_sun_24
} else {
R.drawable.ic_moon_24
}
),
contentDescription = "Theme"
)
Yükseklik yer paylaşımları
Materyal uygulamasında, daha yüksek yükseltilere sahip koyu temalardaki yüzeyler, arka planlarını aydınlatan yükseklik yer paylaşımları alır. Bir yüzeyin rakımı ne kadar yüksek olursa (ima edilen ışık kaynağına yaklaştırıldığında) yüzey o kadar açık olur.
Bu bindirmeler, koyu renkler kullanılırken Surface composable'ı ve yüzey kullanan diğer Material composable'ları tarafından otomatik olarak uygulanır:
Surface(
elevation = 2.dp,
color = MaterialTheme.colors.surface, // color will be adjusted for elevation
/*...*/
) { /*...*/ }
5. Şekil. Hem kartlarda hem de alt gezinme kartlarında arka plan olarak surface rengi kullanılıyor. Kartlar ve alt gezinme bölümleri, arka planın üzerinde farklı yükseklik düzeylerinde yer aldığından biraz farklı renklere sahiptir: Kartlar arka plandan daha açık, alt gezinme bölümü ise kartlardan daha açık renklidir.
Surface içermeyen özel senaryolar için LocalElevationOverlay, yani Surface bileşenleri tarafından kullanılan ElevationOverlay öğesini içeren CompositionLocal kullanın:
// Elevation overlays
// Implemented in Surface (and any components that use it)
val color = MaterialTheme.colors.surface
val elevation = 4.dp
val overlaidColor = LocalElevationOverlay.current?.apply(
color, elevation
)
Yükseklik yer paylaşımlarını devre dışı bırakmak için, oluşturulabilir bir hiyerarşide istediğiniz noktada null sağlayın:
MyTheme {
CompositionLocalProvider(LocalElevationOverlay provides null) {
// Content without elevation overlays
}
}
Sınırlı renk vurguları
Malzeme, çoğu durumda primary rengi yerine surface renginin kullanılmasını tercih ederek koyu temalar için sınırlı renk vurguları uygulanmasını önerir. TopAppBar ve BottomNavigation gibi malzeme composable'ları bu davranışı varsayılan olarak uygular.
6. Şekil. sınırlı renk vurgularına sahip koyu renkli malzeme teması. Üst uygulama çubuğu açık temada birincil rengi, koyu temada yüzey rengi kullanır.
Özel senaryolar için primarySurface uzantı özelliğini kullanın:
Surface(
// Switches between primary in light theme and surface in dark theme
color = MaterialTheme.colors.primarySurface,
/*...*/
) { /*...*/ }
Yazı biçimi
Materyal, bir tür sistemi tanımlayarak sizi anlamsal olarak adlandırılmış az sayıda stil kullanmaya teşvik eder.
7. Şekil. Malzeme türü sistemi.
Compose, tür sistemini Typography, TextStyle ve yazı tipiyle ilgili sınıflarıyla uygular. Typography oluşturucu, özelleştirmek istemediğiniz stilleri çıkarabilirsiniz. Böylece her stil için varsayılanlar sunulur:
val raleway = FontFamily(
Font(R.font.raleway_regular),
Font(R.font.raleway_medium, FontWeight.W500),
Font(R.font.raleway_semibold, FontWeight.SemiBold)
)
val myTypography = Typography(
h1 = TextStyle(
fontFamily = raleway,
fontWeight = FontWeight.W300,
fontSize = 96.sp
),
body1 = TextStyle(
fontFamily = raleway,
fontWeight = FontWeight.W600,
fontSize = 16.sp
)
/*...*/
)
MaterialTheme(typography = myTypography, /*...*/) {
/*...*/
}
Genel olarak aynı yazı tipini kullanmak istiyorsanız defaultFontFamily parameter öğesini belirtin ve TextStyle öğelerinin fontFamily kısmını çıkarın:
val typography = Typography(defaultFontFamily = raleway)
MaterialTheme(typography = typography, /*...*/) {
/*...*/
}
Metin stillerini kullanma
TextStyle öğelerine MaterialTheme.typography üzerinden erişilebilir. TextStyle öğelerini şu şekilde alın:
Text(
text = "Subtitle2 styled",
style = MaterialTheme.typography.subtitle2
)
8. Şekil. Markanızı ifade etmek için çeşitli yazı tipleri ve stiller kullanın.
Şekil
Malzeme bir şekil sistemi tanımlayarak büyük, orta ve küçük bileşenler için şekiller tanımlamanızı sağlar.
9. Şekil. Malzeme şekil sistemi.
Compose, şekil sistemini Shapes sınıfıyla uygular ve böylece her boyut kategorisi için bir CornerBasedShape belirtmenizi sağlar:
val shapes = Shapes(
small = RoundedCornerShape(percent = 50),
medium = RoundedCornerShape(0f),
large = CutCornerShape(
topStart = 16.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 16.dp
)
)
MaterialTheme(shapes = shapes, /*...*/) {
/*...*/
}
Birçok bileşen bu şekilleri varsayılan olarak kullanır. Örneğin Button,
TextField ve
FloatingActionButton
varsayılan olarak küçük,
AlertDialog
varsayılan olarak orta,
ModalDrawer
varsayılan olarak büyük boyuttur. Eşlemenin tamamı için
şekil şeması referansına
bakın.
Şekilleri kullanma
Shape öğelerine MaterialTheme.shapes üzerinden erişilebilir. Shape öğelerini aşağıdaki gibi bir kodla alın:
Surface(
shape = MaterialTheme.shapes.medium, /*...*/
) {
/*...*/
}
Şekil 10. Markayı veya durumu ifade etmek için şekiller kullanın.
Varsayılan stiller
Android Görünümleri'ndeki varsayılan stillerden Oluşturma işlevinde eşdeğer bir kavram yoktur. Materyal bileşenlerini saran kendi "aşırı yük" composable işlevlerinizi oluşturarak benzer işlevleri sağlayabilirsiniz. Örneğin, bir düğme stili oluşturmak için kendi composable işlevinizde bir düğmeyi sarmalayın, değiştirmek istediğiniz parametreleri doğrudan ayarlayın ve diğerlerini parametre olarak içeren composable'ın gösterin.
@Composable
fun MyButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
content: @Composable RowScope.() -> Unit
) {
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = MaterialTheme.colors.secondary
),
onClick = onClick,
modifier = modifier,
content = content
)
}
Tema yer paylaşımları
MaterialTheme composable'ları iç içe yerleştirerek, Compose'da Android Görünümleri'ndeki tema yer paylaşımlarına eşdeğer bir deneyim elde edebilirsiniz. MaterialTheme renk, yazı tipi ve şekilleri varsayılan olarak geçerli tema değerine ayarlar. Bu nedenle, bir tema bu parametrelerden yalnızca birini ayarlarsa diğer parametreler varsayılan değerlerini korur.
Ayrıca, Görünüme dayalı ekranları Oluşturma'ya taşırken android:theme özelliğinin kullanımına dikkat edin. Oluşturma kullanıcı arayüzü ağacının ilgili bölümünde yeni bir MaterialTheme eklemeniz gerekebilir.
Baykuş örneğinde, ayrıntılar ekranında ekranın büyük kısmı için bir PinkTheme ve ilgili bölüm için bir BlueTheme kullanılır. Aşağıdaki ekran görüntüsüne ve koda bakın.
Şekil 11. Baykuş örneğinde iç içe yerleştirilmiş temalar.
@Composable
fun DetailsScreen(/* ... */) {
PinkTheme {
// other content
RelatedSection()
}
}
@Composable
fun RelatedSection(/* ... */) {
BlueTheme {
// content
}
}
Bileşen durumları
Etkileşimde bulunulabilen (tıklanan, açılıp açılabilen vb.) malzeme bileşenleri farklı görsel durumlarda olabilir. Durumlar şunlardır: etkin, devre dışı, basıldı vb.
Composable'lar genellikle enabled parametresine sahiptir. false olarak ayarlamak etkileşimi engeller ve bileşen durumunu görsel olarak iletmek için renk ve yükseklik gibi özellikleri değiştirir.
Şekil 12. enabled = true (sol) ve enabled = false (sağ) içeren düğme.
Çoğu durumda renk ve yükseklik gibi değerler için varsayılan değerleri kullanabilirsiniz. Farklı durumlarda kullanılan değerleri yapılandırmak isterseniz kullanabileceğiniz sınıflar ve kolaylık işlevleri bulunur. Aşağıdaki düğme örneğine bakın:
Button(
onClick = { /* ... */ },
enabled = true,
// Custom colors for different states
colors = ButtonDefaults.buttonColors(
backgroundColor = MaterialTheme.colors.secondary,
disabledBackgroundColor = MaterialTheme.colors.onBackground
.copy(alpha = 0.2f)
.compositeOver(MaterialTheme.colors.background)
// Also contentColor and disabledContentColor
),
// Custom elevation for different states
elevation = ButtonDefaults.elevation(
defaultElevation = 8.dp,
disabledElevation = 2.dp,
// Also pressedElevation
)
) { /* ... */ }
Şekil 13. Ayarlanmış renk ve yükseklik değerlerine sahip, enabled = true (sol) ve enabled = false (sağ) düğmeleri olan düğme.
Küçük Dalgalar
Malzeme bileşenleri, etkileşimde bulunduklarını belirtmek için dalgaları kullanır. Hiyerarşinizde MaterialTheme kullanıyorsanız clickable ve indication gibi iç değiştiriciler içinde varsayılan olarak Indication Ripple kullanılır.
Çoğu durumda varsayılan Ripple kullanılabilir. Görünümlerini yapılandırmak isterseniz renk ve alfa gibi özellikleri değiştirmek için RippleTheme aracını kullanabilirsiniz.
RippleTheme hizmetinin kapsamını genişleterek
defaultRippleColor ve
defaultRippleAlpha
yardımcı işlevlerinden yararlanabilirsiniz. Daha sonra LocalRippleTheme kullanarak hiyerarşinizde özel dalga temanızı sağlayabilirsiniz:
@Composable
fun MyApp() {
MaterialTheme {
CompositionLocalProvider(
LocalRippleTheme provides SecondaryRippleTheme
) {
// App content
}
}
}
@Immutable
private object SecondaryRippleTheme : RippleTheme {
@Composable
override fun defaultColor() = RippleTheme.defaultRippleColor(
contentColor = MaterialTheme.colors.secondary,
lightTheme = MaterialTheme.colors.isLight
)
@Composable
override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
contentColor = MaterialTheme.colors.secondary,
lightTheme = MaterialTheme.colors.isLight
)
}
Şekil 14. RippleTheme aracılığıyla sağlanan, farklı dalga değerlerine sahip düğmeler.
Daha fazla bilgi
Oluşturma'da Materyal Temaları hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara bakın.
Codelab uygulamaları
Videolar
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Compose'da özel tasarım sistemleri
- Oluşturma bölümünde Materyal 2'den Materyal 3'e geçiş
- Oluşturma bölümünde erişilebilirlik