Metnin stilini ayarlama

Text composable'ı, içeriğini biçimlendirmek için birden fazla isteğe bağlı parametreye sahiptir. Aşağıda, metinle ilgili en yaygın kullanım alanlarını kapsayan parametreler listelenmiştir. Text ile ilgili tüm parametreler için Compose Text kaynak koduna bakın.

Bu parametrelerden birini ayarladığınızda stili tüm metin değerine uygulamış olursunuz. Aynı satır veya paragraflarda birden fazla stil uygulamanız gerekiyorsa birden fazla satır içi stil ile ilgili bölüme bakın.

Yaygın metin stilleri

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

Metin rengini değiştir

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

Metin boyutunu değiştir

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

Metni italik yapma

Metni italik yapmak (veya başka bir FontStyle ayarlamak) için fontStyle parametresini kullanı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 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 için bir renk, ofset veya Text ile ilgili olarak bulunduğu yer ve ne kadar bulanık göründüğünü belirten bulanıklık yarıçapı 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 composable'ında farklı stiller ayarlamak için AnnotatedString kullanın. Bu, rastgele ek açıklamaların stilleriyle ek açıklama eklenebilen bir dizedir.

AnnotatedString, şunları içeren bir veri sınıfıdır:

• Text değerinde
• Metin değerinde konum aralığıyla satır içi stil oluşturmaya eşdeğer SpanStyleRange değerinde bir List
• Metin hizalamasını, metin yönünü, satır yüksekliğini ve metin girintisi stilini belirten ParagraphStyleRange türünde bir List

TextStyle, Text composable'ında, SpanStyle ve ParagraphStyle ise AnnotatedString'da 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 tip güvenliği olan bir derleyiciye sahiptir: 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

Metinde bağlantılar içeren HTML'yi görüntüleme

Jetpack Compose uygulamanızda tıklanabilir bağlantılar içeren HTML biçimli metinleri görüntülemek için AnnotatedString.fromHtml() kullanın. Bu işlev, HTML etiketleri içeren bir dizeyi AnnotatedString değerine dönüştürerek stil ve bağlantı işlemeye olanak tanır.

Örnek: Stilli bağlantı içeren HTML

Bu snippet, bağlantıya belirli bir stil uygulayarak HTML biçimli metni bağlantıyla birlikte oluşturur:

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}
HtmlStyling.kt

Kodla ilgili önemli noktalar

• AnnotatedString.fromHtml(), htmlText dizesini bir AnnotatedString değerine dönüştürür. linkStyles parametresi, bağlantı görünümünü özelleştirir.

• TextLinkStyles, HTML içindeki bağlantıların stilini tanımlar. SpanStyle, bağlantıların metin dekorasyonunu, yazı tipi stilini ve rengini ayarlar.

• Text composable'ı, elde edilen AnnotatedString değerini gösterir.

Sonuç

Bu snippet, "Jetpack Compose"u mavi renkli, altı çizili ve italik olarak biçimlendirilmiş tıklanabilir bir bağlantı olarak etkinleştirir:

Şekil 2. Paragraftaki "Jetpack Compose" ifadesinin tıklanabilir, stilli bir bağlantı olduğu başlık ve paragraf.

Brush ile gelişmiş stil oluşturmayı etkinleştirme

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

Metin stilini belirlemek için fırça kullanma

TextStyle uygulamasındaki yerleşik fırçayı kullanarak metninizi yapılandırın. Örneğin, metninize aşağıdaki gibi bir linearGradient fırçası yapılandırabilirsiniz:

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

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

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

Bu renk şeması veya renklendirme stiliyle sınırlı değilsiniz. Vurgulamak için basit bir örnek verdik ancak metninizi geliştirmek için yerleşik fırçalardan herhangi birini veya yalnızca SolidColor kullanabilirsiniz.

Entegrasyonlar

Brush, hem TextStyle hem de SpanStyle ile birlikte kullanılabildiğinden TextField ve buildAnnotatedString ile sorunsuz bir şekilde entegre olur.

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

SpanStyle kullanarak ek stil oluşturma

Bir metin aralığına fırça uygulama

Fırçayı metninizin yalnızca belirli bölümlerine uygulamak istiyorsanız fırçanız ve seçtiğiniz gradyanla birlikte buildAnnotatedString ve SpanStyle API'sini 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 ile varsayılan fırça kullanılıyor.

Metin aralığındaki 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 de aynı fırçayı kullanın ve ilgili aralıktaki 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österilir.

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. buildAnnotatedString ve SpanStyle'nin alfa parametresini linearGradient ile birlikte kullanarak bir metin aralığına opaklık ekleme.

Metne kayan yazı efekti uygulama

Animasyonlu bir kaydırma efekti oluşturmak için basicMarquee değiştiricisini herhangi bir composable'a uygulayabilirsiniz. Kayan yazı efekti, içerik mevcut kısıtlamalara sığmayacak kadar geniş olduğunda ortaya çıkar. Varsayılan olarak basicMarquee, belirli yapılandırmalara (ör. hız ve ilk gecikme) sahiptir ancak efekti özelleştirmek için bu parametreleri değiştirebilirsiniz.

Aşağıdaki snippet, Text composable'da temel bir kayan yazı 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.

Ek kaynaklar

• Compose'da Metin Renklendirme Hakkında Bilgilerinizi Tazeleme
• Compose'da animasyonlu fırça ile metin renklendirme
• Tek bir metin dizesinde birden fazla bağlantıyı destekleme