จัดรูปแบบข้อความ

คอมโพสิเบิล Text มีพารามิเตอร์ที่ไม่บังคับหลายรายการสำหรับจัดสไตล์เนื้อหา ด้านล่างนี้คือรายการพารามิเตอร์ที่ครอบคลุมกรณีการใช้งานที่พบบ่อยที่สุดด้วยข้อความ สําหรับพารามิเตอร์ทั้งหมดของ Text โปรดดูซอร์สโค้ดของคอมโพสิทข้อความ

เมื่อใดก็ตามที่คุณตั้งค่าพารามิเตอร์เหล่านี้ คุณจะใช้รูปแบบกับค่าข้อความทั้งหมด หากต้องการใช้รูปแบบหลายรูปแบบในบรรทัดหรือย่อหน้าเดียวกัน โปรดดูส่วนรูปแบบในบรรทัดหลายรูปแบบ

การจัดรูปแบบข้อความที่พบได้ทั่วไป

ส่วนต่อไปนี้อธิบายวิธีทั่วไปในการจัดรูปแบบข้อความ

เปลี่ยนสีข้อความ

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

เปลี่ยนขนาดข้อความ

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

ทำข้อความเป็นตัวเอียง

ใช้พารามิเตอร์ fontStyle เพื่อทำให้ข้อความเป็นเอียง (หรือตั้งค่าอื่น FontStyle)

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

ทำข้อความเป็นตัวหนา

ใช้พารามิเตอร์ fontWeight เพื่อทำให้ข้อความเป็นตัวหนา (หรือตั้งค่า FontWeight อื่น)

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

เพิ่มเงา

พารามิเตอร์ style ช่วยให้คุณตั้งค่าออบเจ็กต์ประเภท TextStyle และกำหนดค่าพารามิเตอร์หลายรายการได้ เช่น shadow Shadow รับสีสำหรับเงา การเลื่อน หรือตําแหน่งเมื่อเทียบกับ Text และรัศมีเบลอซึ่งแสดงระดับความเบลอ

@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

เพิ่มรูปแบบหลายรูปแบบในข้อความ

หากต้องการตั้งค่ารูปแบบที่แตกต่างกันภายใน Text แบบคอมโพสิเบิลเดียวกัน ให้ใช้ AnnotatedString ซึ่งเป็นสตริงที่สามารถกำกับเนื้อหาด้วยรูปแบบของคำอธิบายประกอบแบบใดก็ได้

AnnotatedString คือคลาสข้อมูลที่ประกอบด้วยข้อมูลต่อไปนี้

• ค่า Text
• List ของ SpanStyleRange ซึ่งเทียบเท่ากับการจัดรูปแบบในบรรทัดที่มีช่วงตำแหน่งภายในค่าข้อความ
• List ของ ParagraphStyleRange ซึ่งระบุการจัดแนวข้อความ ทิศทางข้อความ ความสูงของบรรทัด และการจัดรูปแบบการเยื้องข้อความ

TextStyle มีไว้เพื่อใช้ในคอมโพสิเบิล Text ส่วน SpanStyle และ ParagraphStyle มีไว้เพื่อใช้ใน AnnotatedString ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบหลายรูปแบบในย่อหน้าได้ที่เพิ่มรูปแบบหลายรูปแบบในย่อหน้า

AnnotatedString มีตัวสร้างที่ปลอดภัยต่อประเภทเพื่อช่วยให้คุณสร้าง 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

แสดง HTML ที่มีลิงก์ในข้อความ

ใช้ AnnotatedString.fromHtml() เพื่อแสดงข้อความที่จัดรูปแบบ HTML ที่มีลิงก์ที่คลิกได้ในแอปพลิเคชัน Jetpack Compose ฟังก์ชันนี้จะแปลงสตริงที่มีแท็ก HTML เป็น AnnotatedString ซึ่งช่วยให้จัดรูปแบบและจัดการลิงก์ได้

ตัวอย่าง: HTML ที่มีลิงก์ที่มีสไตล์

ข้อมูลโค้ดนี้แสดงผลข้อความที่จัดรูปแบบ HTML ที่มีลิงก์ โดยจะใช้การจัดรูปแบบที่เฉพาะเจาะจงกับลิงก์

@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

ประเด็นสำคัญเกี่ยวกับรหัส

• AnnotatedString.fromHtml() แปลงสตริง htmlText เป็น AnnotatedString พารามิเตอร์ linkStyles จะปรับแต่งลักษณะที่ปรากฏของลิงก์

• TextLinkStyles กำหนดสไตล์สำหรับลิงก์ภายใน HTML SpanStyle กำหนดการตกแต่งข้อความ รูปแบบแบบอักษร และสีสำหรับลิงก์

• Composable Text จะแสดง AnnotatedString ที่ได้

ผลลัพธ์

ข้อมูลโค้ดนี้ทำให้ "Jetpack Compose" เป็นลิงก์ที่คลิกได้ ปรับแต่งให้มีสไตล์เป็นสีน้ำเงิน ขีดเส้นใต้ และตัวเอียง

เปิดใช้การจัดรูปแบบขั้นสูงด้วย Brush

หากต้องการเปิดใช้การจัดรูปแบบข้อความขั้นสูงมากขึ้น คุณสามารถใช้ Brush API กับ TextStyle และ SpanStyle ตอนนี้คุณใช้ Brush ได้ในตำแหน่งที่คุณมักจะใช้ TextStyle หรือ SpanStyle

ใช้แปรงเพื่อจัดรูปแบบข้อความ

กำหนดค่าข้อความโดยใช้แปรงในตัวภายใน TextStyle เช่น คุณสามารถกําหนดค่าแปรง linearGradient ให้กับข้อความได้ดังนี้

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

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

คุณไม่จำเป็นต้องใช้รูปแบบสีหรือสไตล์การระบายสีนี้โดยเฉพาะ แม้ว่าเราจะแสดงตัวอย่างการไฮไลต์ง่ายๆ ไว้ให้แล้ว แต่คุณก็ใช้แปรงที่มีให้ในตัวหรือแม้แต่ SolidColor เพียงอย่างเดียวเพื่อเพิ่มประสิทธิภาพข้อความได้

การผสานรวม

เนื่องจากคุณสามารถใช้ Brush ควบคู่ไปกับทั้ง TextStyle และ SpanStyle การผสานรวมกับ TextField และ buildAnnotatedString จึงราบรื่น

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Brush API ภายใน TextField ได้ที่อินพุตสไตล์ด้วย Brush API

การจัดรูปแบบเพิ่มเติมโดยใช้ SpanStyle

ใช้แปรงกับช่วงข้อความ

หากต้องการใช้แปรงกับเฉพาะบางส่วนของข้อความ ให้ใช้ buildAnnotatedString และ SpanStyle API พร้อมกับแปรงและไล่ระดับสีที่ต้องการ

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

ความทึบแสงของช่วงข้อความ

หากต้องการปรับความทึบของช่วงข้อความหนึ่งๆ ให้ใช้พารามิเตอร์ alpha (ไม่บังคับ) ของ SpanStyle ใช้แปรงเดียวกันกับทั้ง 2 ส่วนข้อความ แล้วเปลี่ยนพารามิเตอร์อัลฟ่าในสเปนที่เกี่ยวข้อง ในตัวอย่างโค้ด ข้อความช่วงแรกจะแสดงแบบทึบแสงครึ่งหนึ่ง (alpha =.5f) ส่วนข้อความช่วงที่สองจะแสดงแบบทึบแสงเต็ม (alpha = 1f)

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

แหล่งข้อมูลเพิ่มเติม

ดูตัวอย่างการปรับแต่งเพิ่มเติมได้ในบล็อกโพสต์ทบทวนเรื่องเครื่องมือเขียนข้อความ การระบายสี หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีผสานรวม Brush กับ Animations API โปรดดูการปรับสีข้อความด้วยแปรงแบบเคลื่อนไหวในเครื่องมือเขียน

ใช้เอฟเฟกต์ข้อความกระพริบกับข้อความ

คุณสามารถใช้ตัวแก้ไข basicMarquee กับคอมโพสิเบิลใดก็ได้เพื่อสร้างเอฟเฟกต์การเลื่อนแบบเคลื่อนไหว เอฟเฟกต์ข้อความเลื่อนจะปรากฏขึ้นหากเนื้อหากว้างเกินกว่าที่จะแสดงในข้อจำกัดที่มีอยู่ โดยค่าเริ่มต้น basicMarquee จะมีการกำหนดค่าบางอย่าง (เช่น ความเร็วและการหน่วงเวลาเริ่มต้น) ไว้ แต่คุณแก้ไขพารามิเตอร์เหล่านี้เพื่อปรับแต่งเอฟเฟกต์ได้

ข้อมูลโค้ดต่อไปนี้ใช้เอฟเฟกต์ข้อความไฮไลต์แบบพื้นฐานในคอมโพสิชัน Text

@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 ตัวปรับ basicMarquee ที่มีผลกับข้อความ