Metnin stilini ayarlama

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

Kelimeler

Metin boyutunu değiştirme

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

Kelimeler

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

Kelimeler

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

Kelimeler

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

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

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

Bir metin kapsamına opaklık eklemek için buildAnnotatedString ve SpanStyle'ın alfa parametresiyle birlikte DoğrusalGradient kullanılması.
Ş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

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

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