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

คอมโพสิเบิล Text มีพารามิเตอร์ที่ไม่บังคับหลายรายการเพื่อจัดสไตล์เนื้อหา ด้านล่างนี้คือรายการพารามิเตอร์ที่ครอบคลุมกรณีการใช้งานที่พบบ่อยที่สุดด้วยข้อความ ดูพารามิเตอร์ทั้งหมดของ Text ได้ที่ซอร์สโค้ดของ Compose 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 จะได้รับสีสำหรับเงา ออฟเซ็ต หรือตำแหน่งที่สัมพันธ์กับ 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 มีไว้สำหรับใช้ใน Composable 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 กำหนดการตกแต่งข้อความ รูปแบบอักษร และสีสำหรับลิงก์

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

ผลลัพธ์

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

รูปที่ 2 ส่วนหัวและย่อหน้า โดยที่ "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

รูปที่ 3 การใช้ฟังก์ชัน linearGradient ของ Brush API กับรายการสีที่กำหนดไว้

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

การผสานรวม

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

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

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

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

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

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

รูปที่ 4 ใช้แปรงเริ่มต้นที่มี linearGradient เป็นสไตล์สำหรับ Text

ความทึบแสงในข้อความที่เลือก

หากต้องการปรับความทึบแสงของข้อความบางส่วน ให้ใช้พารามิเตอร์ alpha ที่ไม่บังคับของ SpanStyle ใช้แปรงเดียวกันสำหรับข้อความทั้ง 2 ส่วน และเปลี่ยนพารามิเตอร์อัลฟ่าใน span ที่เกี่ยวข้อง ในตัวอย่างโค้ด ข้อความช่วงแรกจะแสดงที่ความทึบแสงครึ่งหนึ่ง (alpha =.5f) ส่วนข้อความช่วงที่ 2 จะแสดงที่ความทึบแสงเต็ม (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

รูปที่ 5 การใช้พารามิเตอร์อัลฟาของ buildAnnotatedString และ SpanStyle ร่วมกับ linearGradient เพื่อเพิ่มความทึบแสงให้กับช่วงข้อความ

ใช้เอฟเฟกต์ตัวอักษรวิ่งกับข้อความ

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

ข้อมูลโค้ดต่อไปนี้ใช้เอฟเฟกต์ Marquee พื้นฐานใน Composable ของ 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 ที่ใช้กับข้อความ

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

• ทบทวนการลงสีข้อความใน Compose
• การลงสีข้อความด้วยแปรงแบบเคลื่อนไหวใน Compose
• รองรับหลายลิงก์ในสตริงข้อความเดียว