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 Metin Oluşturma kaynak kodu konusuna bakın.
Bu parametrelerden birini ayarladığınızda stili, metin değerinin tamamına uygularsınız. Aynı satır veya paragraflar içinde birden çok stil uygulamanız gerekiyorsa birden fazla satır içi stil ile ilgili bölüme 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 yapmak için fontStyle
parametresini kullanın (veya başka bir FontStyle
ayarlayın).
@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 ve birden fazla parametreyi (ör. gölge) yapılandırmanıza olanak tanır.
Shadow
gölge, ofset veya bulunduğu yer için Text
ve bulanıklık yarıçapına göre (ne kadar bulanık göründüğünü ifade eder) bir renk alır.
@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
composable içinde farklı stiller ayarlamak için bir AnnotatedString
dizesi kullanın. Bu dize, rastgele ek açıklama stilleriyle ek açıklama yapılabilir.
AnnotatedString
, aşağıdakileri içeren bir veri sınıfıdır:
Text
değeri- Metin değeri içinde konum aralığıyla satır içi stile eş değer bir
List
SpanStyleRange
- Metin hizalaması, metin yönü, satır yüksekliği ve metin girinti stili belirten
List
/ParagraphStyleRange
TextStyle
, Text
composable'da kullanım içindir. SpanStyle
ve ParagraphStyle
ise AnnotatedString
içinde kullanım içindir. Bir paragraftaki birden çok stil hakkında daha fazla bilgi edinmek için Bir paragrafta birden çok stil ekleme bölümüne bakın.
AnnotatedString
, oluşturma işlemini kolaylaştıran bir type-safe oluşturma aracı içeriyor: 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 TextStyle
ve SpanStyle
ile kullanabilirsiniz. Genellikle TextStyle
veya SpanStyle
kullanacağınız her yerde 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 linearGradient
fırçası eklemek için aşağıdaki adımları uygulayabilirsiniz:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
Bu özel renk şeması veya renklendirme stiliyle sınırlı değilsiniz. Vurgulamak için basit bir örnek vermiş olsak da metninizi geliştirmek için yerleşik fırçalardan herhangi birini, hatta yalnızca bir SolidColor
bile kullanabilirsiniz.
Entegrasyonlar
Brush
hem TextStyle
hem de SpanStyle
ile birlikte kullanılabildiğinden TextField
ve buildAnnotatedString
ile entegrasyon sorunsuzdur.
TextField
içinde Fırça API'sini kullanma hakkında daha fazla bilgi için Brush API ile stil girişi bölümüne bakın.
SpanStyle
kullanılarak ek stil
Bir metin aralığına fırça uygulayın
Metninizin yalnızca belirli bölümlerine fırça uygulamak istiyorsanız fırça ve tercih ettiğiniz gradyanla birlikte buildAnnotatedString
ve SpanStyle
API'yi kullanın.
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 aralığında opaklık
Belirli bir metin aralığının opaklığını ayarlamak için SpanStyle
öğesinin isteğe bağlı alpha
parametresini kullanın. Metnin her iki bölümü için aynı fırçayı kullanın ve karşılık gelen kapsamdaki alfa parametresini değiştirin.
Kod örneğinde, metnin ilk aralığı yarı opaklıkta (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 ❤️") } }
Ek kaynaklar
Ek özelleştirme örnekleri için Metin Rengi Oluşturma adlı blog yayınına bakın. Brush
öğesinin Animasyonlar API'miz ile nasıl entegre olduğu hakkında daha fazla bilgi edinmek istiyorsanız Compose'da fırça metin boyama bölümüne bakın.
Metne noktalı çerçeve efekti uygula
Animasyonlu bir kaydırma efekti oluşturmak için basicMarquee
değiştiricisini herhangi bir composable'a uygulayabilirsiniz. Noktalı çerçeve etkisi, içerik mevcut kısıtlamalara
uyamayacak kadar genişse ortaya çıkar. basicMarquee
için varsayılan olarak belirli yapılandırmalar (hız ve ilk gecikme gibi) ayarlanmış olsa da efekti özelleştirmek için 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