Text
composable, içeriğini biçimlendirmek için birden fazla isteğe bağlı parametreye sahiptir.
Aşağıda, metin içeren en yaygın kullanım alanlarını kapsayan parametreleri listeledik.
Text
öğesinin tüm parametreleri için Metin Oluşturma kaynak kodu bölümüne bakın.
Bu parametrelerden birini ayarladığınızda stili tüm metin değerine uygularsınız. Aynı satır veya paragraflar içinde birden çok stil uygulamanız gerekiyorsa birden çok satır içi stil ile ilgili bölüme bakın.
Yaygın metin stilleri
Aşağıdaki bölümlerde, metin biçimlendirmek için yaygın olarak 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ınlaştırmak 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 gölge gibi birden fazla parametreyi 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 bir renk alır (bu değer, bulanıklığın ne kadar bulanık göründüğü 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 ) ) ) }
Metine birden çok stil ekleme
Aynı Text
composable içinde farklı stiller ayarlamak için AnnotatedString
kullanın. Bu dize, rastgele ek açıklama stilleriyle ek açıklama girilebilen bir dizedir.
AnnotatedString
, aşağıdakileri içeren bir veri sınıfıdır:
Text
değeri- Metin değeri içinde konum aralığı olan satır içi biçimlendirmeye eşdeğer olan
List
/SpanStyleRange
- Metin hizalamasını, metin yönünü, satır yüksekliğini ve metin girintisi stilini belirten
List
/ParagraphStyleRange
TextStyle
, Text
composable'ında, 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 paragrafa birden çok stil ekleme bölümüne bakın.
AnnotatedString
, oluşturmayı kolaylaştıran bir type-safe oluşturucu içerir: 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ş stilleri etkinleştirin
Daha gelişmiş metin stilini etkinleştirmek için Brush
API'sini TextStyle
ve SpanStyle
ile kullanabilirsiniz. Normalde TextStyle
veya SpanStyle
kullandığınız her yerde artık Brush
ürününü de kullanabilirsiniz.
Metin stili için fırça kullanın
TextStyle
içindeki yerleşik fırçayı kullanarak metninizi yapılandırın. Örneğin, metninize bir linearGradient
fırçasını aşağıdaki gibi yapılandırabilirsiniz:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
Bu renk şeması veya renklendirme stiliyle sınırlı değilsiniz. Vurgulamak için basit bir örnek sağladık. Dilerseniz yerleşik fırçalardan herhangi birini kullanabilir, hatta metninizi geliştirmek için sadece SolidColor
kullanabilirsiniz.
Entegrasyonlar
Brush
ürününü hem TextStyle
hem de SpanStyle
ile birlikte kullanabildiğiniz için TextField
ve buildAnnotatedString
ile entegrasyon sorunsuz olur.
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
kullanan ek stil
Bir metin alanına fırça uygulayın
Metninizin yalnızca belirli bölümlerine fırça uygulamak istiyorsanız fırça ve renk geçişiyle 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 alanında opaklık
Belirli bir metin kapsamı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 de aynı fırçayı kullanın ve alfa parametresini ilgili kapsam içinde değiştirin.
Kod örneğinde, metnin ilk aralığı yarı saydamlı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 Metni Oluşturma Metni Boyama blog yayınına bakın. Brush
uygulamasının Animations API'miz ile nasıl entegre edildiği hakkında daha fazla bilgi edinmek istiyorsanız Compose'da fırçayla Metin boyama animasyonu konusuna göz atın.
Metne noktalı çerçeve efekti uygula
Animasyonlu bir kaydırma efekti oluşturmak için basicMarquee
değiştiricisini tüm composable'lara uygulayabilirsiniz. Noktalı çerçeve etkisi, içerik mevcut kısıtlamalara sığmayacak kadar genişse
görünür. Varsayılan olarak, basicMarquee
için belirli yapılandırmalar (hız ve ilk gecikme gibi) ayarlanmıştır ancak bu parametreleri değiştirerek efekti özelleştirebilirsiniz.
Aşağıdaki snippet, bir Text
composable üzerinde 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: Bağlantı metni JavaScript kapalıyken görüntülenir
- Paragrafın stilini belirle
- Oluşturma işleminde Materyal Tasarım 2
- Grafik Değiştiriciler