Metnin stilini ayarlama

Text bileşeni, içeriğine stil uygulamak için birden fazla isteğe bağlı parametreye sahiptir. Aşağıda, metinle en yaygın kullanım alanlarını kapsayan parametreler listelenmiştir. 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 ile ilgili bölüme 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

Metin boyutunu değiştirme

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

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

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

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

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ı, metin yönü, satır yüksekliği ve metin girinti stili belirten List/ParagraphStyleRange

TextStyle, Text bileşeninde, SpanStyle ve ParagraphStyle ise AnnotatedString'de kullanılır. 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")
        }
    )
}
TextSnippets.kt

Brush ile gelişmiş stili etkinleştirme

Daha gelişmiş metin stillerini 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.

Dikkat: TextStyle ürününde Brush API'nin şu anki kullanımı deneyseldir. Deneysel API'ler gelecekte değişebilir.

Metin stili için fırça kullanma

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

Ş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 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 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 Brush API ile stil girişi bölümüne bakın.

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

Şekil 4. Text için stil olarak linearGradient içeren varsayılan bir fırça kullanılıyor.

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, 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

Ş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

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 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) ayarlanmıştır 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.