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 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, metninize stil uygulamanın yaygın yolları açıklanmaktadır.

Metin rengini değiştir

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

Kelimeler

Gölge ekleme

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

Kelimeler

Metne birden fazla stil ekleme

Aynı Text içinde farklı stiller ayarlamak için composable, kullanın bir AnnotatedString, 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
  • 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 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, 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 biçimlendirme özelliğini etkinleştirmek için Brush API'yi aşağıdaki metinlerle birlikte kullanabilirsiniz: TextStyle ve SpanStyle. Normalde iletişim kurmak TextStyle veya SpanStyle kullanıyorsanız artık Brush özelliğini de kullanabilirsiniz.

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 aşağıdaki şekilde bir linearGradient fırçası yapılandırabilir:

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. 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 kullanabileceğiniz için TextField ve buildAnnotatedString ile entegrasyon sorunsuzdur.

Brush API'yi TextField içinde kullanma hakkında daha fazla bilgi için Brush 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 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.")
    }
)
TextSnippets.kt

Metin stili olarak DoğrusalGradient ile varsayılan bir fırça kullanılıyor.
Şekil 4. 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, 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 kapsamına şeffaflık eklemek için buildAnnotatedString ve SpanStyle ürününün alfa parametresi ile linearGradient birlikte kullanılması.

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. 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şturabilir. Noktalı çerçeve etkisi, içeriğin mevcut kısıtlamalara sığmayacak kadar geniş. 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 composable'da temel bir noktalı çerçeve 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

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