Metnin stilini ayarlama

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

Kelimeler

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

Kelimeler

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

Kelimeler

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

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

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

Metin stili olarak linearGradient ile varsayılan bir fırça kullanma.
Şekil 4. Text için stil olarak linearGradient ile varsayılan bir fırça kullanılıyor.
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 ❤️")
    }
}
TextSnippets.kt

Bir metin aralığına opaklık eklemek için buildAnnotatedString ve SpanStyle’ın alfa parametresini linearGradient ile birlikte kullanma.
Şekil 5. Bir metin alanına opaklık eklemek için buildAnnotatedString ve SpanStyle’ın alfa parametresiyle birlikte linearGradient kullanma.

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

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