Metnin stilini ayarlama

Text bileşeni, içeriğine stil uygulamak için birden fazla isteğe bağlı parametreye sahiptir. Aşağıda, en yaygın kullanım alanlarını metinle kapsayan parametreleri listeledik. Text parametresinin tümünü görmek için Metin Oluşturma kaynak kodu başlıklı makaleyi inceleyin.

Bu parametrelerden birini ayarlarken stili metin değerinin tamamına uygularsınız. Aynı satırda veya paragraflarda birden fazla stil uygulamanız gerekiyorsa birden fazla satır içi stil bölümüne bakın.

Sık kullanılan metin stilleri

Aşağıdaki bölümlerde, metninize stil uygulamanın yaygın yolları açıklanmaktadır.

Metin rengini değiştirme

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

Kelimeler

Metin boyutunu değiştirme

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

Kelimeler

Metni italik yapma

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)
}
TextSnippets.kt

Kelimeler

Metni kalın yapma

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)
}
TextSnippets.kt

Kelimeler

Gölge ekleme

style parametresi, TextStyle türündeki bir nesne ayarlamanıza ve gölge gibi birden fazla parametreyi yapılandırmanıza olanak tanır. Shadow, gölge için bir renk, ofset veya Text'a göre konumu ve bulanıklık yarıçapı (bulanıklığın ne kadar olduğu) 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
            )
        )
    )
}
TextSnippets.kt

Kelimeler

Metne birden fazla stil ekleme

Aynı Text bileşeninde farklı stiller ayarlamak için AnnotatedString kullanın. AnnotatedString, keyfi ek açıklama stilleri ile ek açıklama eklenebilen 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ığıyla satır içi biçimlendirmeye eşdeğer olan SpanStyleRange boyutunda bir List
  • Metin hizalamasını, metin yönünü, satır yüksekliğini ve metin girintisi stilini belirten ParagraphStyleRange List

TextStyle, Text bileşeninde, SpanStyle ve ParagraphStyle ise AnnotatedString'de kullanılır. Bir paragrafta birden fazla stil kullanma hakkında daha fazla bilgi için Bir paragrafa birden fazla stil ekleme başlıklı makaleyi inceleyin.

AnnotatedString, oluşturmayı kolaylaştırmak için tür açısından güvenli bir 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")
        }
    )
}
TextSnippets.kt

Kelimeler

Brush ile gelişmiş stili etkinleştirme

Daha gelişmiş metin stillerini etkinleştirmek için Brush API'yi TextStyle ve SpanStyle ile kullanabilirsiniz. Normalde TextStyle veya SpanStyle kullanacağınız her yerde artık Brush'yi de kullanabilirsiniz.

Metin stili için fırça kullanma

TextStyle'teki yerleşik fırçayı kullanarak metninizi yapılandırın. Örneğin, metniniz için aşağıdaki gibi bir linearGradient fırça yapılandırabilirsiniz:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Brush API'nin "linearGradient" işlevini tanımlanmış bir renk listesiyle kullanma
Şekil 2. Brush API'nin linearGradient işlevini, tanımlanmış bir renk listesiyle kullanma.

Bu renk şemasıyla veya boyama stiliyle sınırlı değilsiniz. Vurgulamak için basit bir örnek sağladık ancak metninizi geliştirmek için yerleşik fırçalardan herhangi birini veya hatta sadece bir SolidColor kullanabilirsiniz.

Entegrasyonlar

Brush'ü hem TextStyle hem de SpanStyle ile birlikte kullanabileceğiniz için TextField ve buildAnnotatedString ile entegrasyon sorunsuzdur.

TextField içinde fırça API'sini kullanma hakkında daha fazla bilgi için Fırça API ile stil girişi başlıklı makaleyi inceleyin.

SpanStyle kullanarak ek stil

Bir metin bölümüne fırça uygulama

Fırçayı yalnızca metninizin belirli bölümlerine uygulamak istiyorsanız fırçanız ve seçtiğiniz degrade ile 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.")
    }
)
TextSnippets.kt

Metin için stil olarak doğrusal degrade içeren varsayılan bir fırça kullanma.
Şekil 4. Text için stil olarak linearGradient içeren varsayılan bir fırça kullanılıyor.
Metin aralığındaki opaklık

Belirli bir metin aralığının opaklığını ayarlamak için SpanStyle'un isteğe bağlı alpha parametresini kullanın. Bir metnin her iki bölümü için de aynı fırçayı kullanın ve ilgili aralıkta alfa parametresini değiştirin. Kod örneğinde, ilk metin aralığı yarı opaklıkta (alpha =.5f), ikinci metin aralığı ise tam opaklıkta (alpha = 1f) gösterilmektedir.

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

Bir metin bölümüne opaklık eklemek için buildAnnotatedString ve SpanStyle'ın alpha parametresinin yanı sıra linearGradient'i kullanma.
Şekil 5. Bir metin bölümüne opaklık eklemek için buildAnnotatedString ve SpanStyle'un alfa parametresini linearGradient ile birlikte kullanın.

Ek kaynaklar

Daha fazla özelleştirme örneği için Metin Oluşturma Renklendirmesi ile İlgili Bilgiler başlıklı blog yayınını inceleyin. Brush'ün Animasyonlar API'mizle entegrasyonu hakkında daha fazla bilgi edinmek istiyorsanız Oluşturma'da fırçayla metin renklendirmeyi animasyonlu hale getirme başlıklı makaleyi inceleyin.

Metne seçim çerçevesi efekti uygulama

Animasyonlu bir kaydırma efekti oluşturmak için basicMarquee değiştiricisini herhangi bir kompozisyona uygulayabilirsiniz. İçerik, mevcut kısıtlamalara sığmayacak kadar genişse kayan yazı efekti uygulanır. Varsayılan olarak basicMarquee'te belirli yapılandırmalar (ör. hız ve ilk gecikme) belirlenir ancak efekti özelleştirmek için bu parametreleri değiştirebilirsiniz.

Aşağıdaki snippet, Text kompozitinde temel bir seçim çerçevesi efekti uygular:

@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
        )
    }
}
TextSnippets.kt

Şekil 6. Metne uygulanan basicMarquee değiştirici.