Text
composable, içeriğinin stilini belirlemek için isteğe bağlı birden fazla parametreye sahiptir.
Aşağıda, metinle en yaygın kullanım alanlarını kapsayan parametreler listelenmiştir.
Text
işlevinin tüm parametreleri için bkz. Metin Oluşturma
kaynak kodundan kaynaklanabilir.
Bu parametrelerden birini ayarladığınızda stili tüm öğelere uygularsınız. metin değeri. Aynı satırda birden fazla stil uygulamanız gerekiyorsa veya varsa birden fazla satır içi Stil ayarları bölümüne bakın.
Sık kullanılan metin stilleri
Aşağıdaki bölümlerde, metninizi biçimlendirmek için sık kullanılan yöntemler açıklanmaktadır.
Metin rengini değiştir
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Metin boyutunu değiştirme
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
Metni italik yap
Metni italik hale getirmek için fontStyle
parametresini kullanın (veya başka bir parametre ayarlayın
FontStyle
) ekleyebilirsiniz.
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Metni kalın yap
Metni kalın yapmak için fontWeight
parametresini kullanın (veya başka bir FontWeight
ayarlayın).
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
Gölge ekle
style
parametresi, TextStyle
türünde bir nesne ayarlamanıza olanak tanır
ve gölge gibi birden fazla parametreyi yapılandırın.
Shadow
bir renk alır
gölge, ofset veya Text
ve
anlamına gelir.
@Composable fun TextShadow() { val offset = Offset(5.0f, 10.0f) Text( text = "Hello world!", style = TextStyle( fontSize = 24.sp, shadow = Shadow( color = Color.Blue, offset = offset, blurRadius = 3f ) ) ) }
Metne birden çok stil ekleme
Aynı Text
içinde farklı stiller ayarlamak için
composable, AnnotatedString
kullanın,
rastgele ek açıklama stilleriyle ek açıklama eklenebilen bir dizedir.
AnnotatedString
, aşağıdakileri içeren bir veri sınıfıdır:
Text
değeri- Konumla satır içi stile eşdeğer olan
List
/SpanStyleRange
metin değeri içindeki aralık List
/ParagraphStyleRange
, metin hizalaması, metin belirtiliyor yön, satır yüksekliği ve metin girinti stili
TextStyle
kullanım içindir
Text
composable'da, SpanStyle
ve ParagraphStyle
AnnotatedString
içinde kullanım içindir. Şuradaki birden fazla stil hakkında daha fazla bilgi:
Bir paragrafa birden çok stil ekleme bölümüne göz atın.
AnnotatedString
, type-safe parametresini içeriyor
derleyici
kullanarak kolayca oluşturabilirsiniz: buildAnnotatedString
.
@Composable fun MultipleStylesInText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") } ) }
Brush
ile gelişmiş stili etkinleştirin
Daha gelişmiş metin stilini etkinleştirmek için Brush
API'yi aşağıdaki metinlerle birlikte kullanabilirsiniz:
TextStyle
ve SpanStyle
. Genellikle her zaman
TextStyle
veya SpanStyle
kullanıyorsanız artık Brush
özelliğini de kullanabilirsiniz.
Metin stili için fırça kullan
TextStyle
içinde yerleşik bir fırça kullanarak metninizi yapılandırın. Örneğin,
metninize aşağıdaki gibi bir linearGradient
fırçası yapılandırabilir:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
![Brush API'nin "doğrusalGradient" işlevini, tanımlanmış bir renk listesiyle kullanma.](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=5&hl=tr)
linearGradient
işlevini, tanımlanmış bir renk listesiyle kullanma.Bu özel renk şeması veya renklendirme stiliyle sınırlı değilsiniz. Bu sırada
yerleşik olarak bulunan, Google Drive'da yerleşik olarak bulunan
fırça veya hatta SolidColor
kullanarak metninizi iyileştirin.
Entegrasyonlar
Brush
hem TextStyle
hem de SpanStyle
ile birlikte kullanılabildiğinden,
TextField
ve buildAnnotatedString
ile entegrasyon sorunsuz.
Fırça API'sini TextField
içinde kullanma hakkında daha fazla bilgi için bkz.
Brush API ile stil girişi.
SpanStyle
kullanılarak ek stil
Bir metin aralığına fırça uygulayın
Fırçayı yalnızca metninizin belirli kısımlarına uygulamak istiyorsanız
buildAnnotatedString
, SpanStyle
API ve fırçanız
karar vermemiz gerekir.
Text( text = buildAnnotatedString { append("Do not allow people to dim your shine\n") withStyle( SpanStyle( brush = Brush.linearGradient( colors = rainbowColors ) ) ) { append("because they are blinded.") } append("\nTell them to put some sunglasses on.") } )
![Metin stili olarak DoğrusalGradient ile varsayılan bir fırça kullanılıyor.](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=5&hl=tr)
Text
için stil olarak linearGradient
ile varsayılan bir fırça kullanılıyor.Metin aralığında opaklık
Belirli bir metnin opaklığını ayarlamak için SpanStyle
kullanın
isteğe bağlı alpha
parametresidir. Şunlar için aynı fırçayı kullanın:
ve ilgili aralıktaki alfa parametresini değiştirebilirsiniz.
Kod örneğinde, metnin ilk aralığı yarı opaklıkta görüntülenir
(alpha =.5f
), ikincisi ise tam opaklıkta (alpha = 1f
) görüntülenir.
val brush = Brush.linearGradient(colors = rainbowColors) buildAnnotatedString { withStyle( SpanStyle( brush = brush, alpha = .5f ) ) { append("Text in ") } withStyle( SpanStyle( brush = brush, alpha = 1f ) ) { append("Compose ❤️") } }
![Bir metin kapsamına opaklık eklemek için buildAnnotatedString ve SpanStyle'ın alfa parametresiyle birlikte DoğrusalGradient kullanılması.](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=5&hl=tr)
buildAnnotatedString
ve SpanStyle
ürününün alfa parametresi ile linearGradient
birlikte kullanılması.Ek kaynaklar
Ek özelleştirme örnekleri için bkz. Oluşturma Metninin Ayrıntılarını Geliştirme
Boyama konulu blog yayınımıza hoş geldiniz. Hakkında daha fazla bilgi almak isterseniz
Brush
öğesinin Animasyonlar API'miz ile nasıl entegre olduğunu görmek için Fırçayla animasyonla metin boyama başlıklı makaleyi inceleyin.
girin.
Metne noktalı çerçeve efekti uygula
basicMarquee
değiştiricisini istediğiniz composable'a uygulayabilirsiniz:
Animasyonlu kaydırma efekti oluşturur. Noktalı çerçeve etkisi, içeriğin
mevcut kısıtlamalara sığmayacak kadar geniş. Varsayılan olarak basicMarquee
belirli yapılandırmalar (hız ve ilk gecikme gibi) ayarlanır, ancak
bu parametreleri değiştirebilirsiniz.
Aşağıdaki snippet, Text
composable'da temel bir noktalı çerçeve efekti uygular:
@OptIn(ExperimentalFoundationApi::class) @Composable fun BasicMarqueeSample() { // Marquee only animates when the content doesn't fit in the max width. Column(Modifier.width(400.dp)) { Text( "Learn about why it's great to use Jetpack Compose", modifier = Modifier.basicMarquee(), fontSize = 50.sp ) } }
6. Şekil. Metne uygulanan basicMarquee
değiştiricisi.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Stil paragrafı
- Compose'da Materyal Tasarım 2
- Grafik Değiştiriciler