Metnin stilini ayarlama

Text composable'ı, içeriğini stilize etmek 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 her ayarladığınızda, 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 bölümüne bakın.

Yaygın metin stilleri

Aşağıdaki bölümlerde, metninizi biçimlendirmenin yaygın yolları 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ınlaştırmak (veya başka bir FontWeight ayarlamak) için fontWeight parametresini kullanın.

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

Gölge ekleme

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 için bir renk, Text'ye göre konumlandığı yerdeki kayma veya bulanıklık yarıçapı alır. Bulanıklık yarıçapı, gölgenin ne kadar bulanık göründüğünü ifade eder.

@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'da farklı stiller ayarlamak için AnnotatedString kullanın. Bu, rastgele ek açıklamaların stilleriyle açıklama eklenebilen bir dizedir.

AnnotatedString aşağıdakileri içeren bir veri sınıfıdır:

• Text değeri
• Metin değerinde konum aralığı olan satır içi stil uygulamaya eşdeğer List SpanStyleRange
• Metin hizalaması, metin yönü, satır yüksekliği ve metin girintisi stilini belirten ParagraphStyleRange List

TextStyle, Text composable'da kullanılırken SpanStyle ve ParagraphStyle, 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, tür güvenli oluşturucu içerir. Bu sayede buildAnnotatedString oluşturmak kolaylaşır.

@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

Metin içinde 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 metin görüntülemek için AnnotatedString.fromHtml() öğesini kullanın. Bu işlev, HTML etiketleri içeren bir dizeyi AnnotatedString biçimine dönüştürerek stil oluşturma ve bağlantı işleme işlemlerine olanak tanır.

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

Bu snippet, bağlantıya belirli bir stil uygulayarak bağlantı içeren HTML biçimli metin 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 AnnotatedString olarak dönüştürür. linkStyles parametresi, bağlantı görünümünü özelleştirir.

• TextLinkStyles, HTML'deki bağlantıların stilini tanımlar. SpanStyle bağlantıların metin süslemesini, yazı tipi stilini ve rengini ayarlar.

• Text composable'ı, sonuçtaki AnnotatedString öğesini gösterir.

Sonuç

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

Şekil 2. Paragrafta "Jetpack Compose" ifadesinin tıklanabilir ve stilize edilmiş bir bağlantı olduğu bir başlık ve paragraf.

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

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

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

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

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. Öne çıkarmak için basit bir örnek verdik ancak metninizi geliştirmek için yerleşik fırçalardan herhangi birini veya sadece SolidColor simgesini kullanabilirsiniz.

Entegrasyonlar

Brush'yı hem TextStyle hem de SpanStyle ile birlikte kullanabildiğiniz için TextField ve buildAnnotatedString ile entegrasyon sorunsuz bir şekilde gerçekleşir.

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

SpanStyle ile ek stil oluşturma

Metin aralığına fırça uygulama

Fırçayı yalnızca metninizin belirli bölümlerine uygulamak istiyorsanız buildAnnotatedString ve SpanStyle API'yi, seçtiğiniz fırça ve gradyanla birlikte 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 bir fırça kullanma.

Metin aralığında opaklık

Belirli bir metin aralığının opaklığını ayarlamak için SpanStyle işlevinin 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 kullanarak linearGradient ile birlikte bir metin aralığına opaklık ekleme.

Metne kayan yazı efekti uygulama

Animasyonlu kaydırma efekti oluşturmak için basicMarquee değiştiricisini herhangi bir composable'a uygulayabilirsiniz. İçerik, mevcut sınırlamalara sığamayacak kadar genişse kayan yazı efekti oluşur. basicMarquee'da varsayılan olarak belirli yapılandırmalar (ör. hız ve başlangıç gecikmesi) ayarlanmıştır ancak bu parametreleri değiştirerek efekti özelleş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ştiricisi.

Ek kaynaklar

• Brushing Up on Compose Text Coloring
• Oluşturma bölümünde fırça animasyonuyla metin renklendirme
• Tek bir metin dizesinde birden çok bağlantıyı destekleme