Jetpack Compose Glimmer'da Text bileşeni, renk, yazı tipi boyutu, yazı tipi stili, yazı tipi ağırlığı, yazı tipi ailesi, harf aralığı ve metin hizalama gibi çeşitli metin özelliklerini ayarlamanıza olanak tanır.
Jetpack Compose Glimmer Text, renk eşleştirmeyi akıllıca yönetmesiyle benzersizdir. Örneğin, renk geçersiz kılma belirtilmemişse metin, üzerinde bulunduğu en yakın yüzey tarafından sağlanan içerik rengini varsayılan olarak kullanır.
Örnek: Kutuda metin başlığı oluşturma
@Composable
fun TextSample() {
Text(
text = "This is a sample heading",
style = GlimmerTheme.typography.titleLarge )
}
Kodla ilgili önemli noktalar
- Renk belirtilmediği için bu metin, en iyi okunabilir rengi (genellikle beyaz) seçmek üzere en yakın yüzeye bakar.
Boyutlandırma
Jetpack Compose Glimmer'daki tipografi ölçeği, standart mobil Materyal Tasarım'dan önemli ölçüde daha büyüktür. TitleLarge ve BodyLarge gibi stiller 30.sp, altyazı ise 18.sp:
| Stil | Boyut (sp) | Ağırlık | Satır Yüksekliği |
|---|---|---|---|
titleLarge |
30 |
750 |
36.sp |
titleMedium |
24 |
750 |
28.sp |
titleSmall |
20 |
750 |
28.sp |
bodyLarge |
30 |
520 |
36.sp |
bodyMedium |
24 |
520 |
36.sp |
bodySmall |
20 |
520 |
28.sp |
başlık |
18 |
TL |
24.sp |
Google Sans Flex'i kullanma
Google Sans Flex, Jetpack Compose Glimmer'ın bir parçası olarak sunulan ve özellikle yapay zeka gözlükleri için seçilmiş bir değişken yazı tipidir. Yazı tipinin yuvarlak köşeleri ve ayarlanabilir eksenleri, ideal optik boyutlandırmaya olanak tanıyarak metnin bir bakışta okunabilir ve anlaşılır kalmasını sağlar. Mümkünse kullanıcıların uygulamanız ve sistem arasındaki tutarlılığı artırmak için ekran gözlüklerinde gösterilen tüm metinlerde Google Sans Flex'i kullanın.
Google Sans Flex'i kullanmak için glimmer-google-fonts kitaplığını uygulamanızın bağımlılıklarına ekleyin ve yazı tipini GlimmerTheme'ye genel olarak uygulayın:
@Composable fun GoogleSansFlexTypographySample() { val typography = createGoogleSansFlexTypography() GlimmerTheme(typography = typography) { Text("Hello World", style = GlimmerTheme.typography.titleLarge) } }