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

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

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

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

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

ข้อควรระวัง: การใช้งาน Brush API ใน TextStyle ปัจจุบันยังอยู่ในขั้นทดลอง API เวอร์ชันทดลองอาจมีการเปลี่ยนแปลงในอนาคต

ใช้แปรงสำหรับการจัดรูปแบบข้อความ

กำหนดค่าข้อความโดยใช้แปรงในตัวภายใน 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

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

หากต้องการใช้แปรงกับข้อความบางส่วนเท่านั้น ให้ใช้ API buildAnnotatedString และ 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 ส่วน และเปลี่ยนพารามิเตอร์อัลฟ่าในสแปนที่เกี่ยวข้อง ในตัวอย่างโค้ด ข้อความช่วงแรกจะแสดงที่ความทึบแสงครึ่งหนึ่ง (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 ใดก็ได้เพื่อ สร้างเอฟเฟกต์การเลื่อนแบบเคลื่อนไหว เอฟเฟกต์แถบเลื่อนจะเกิดขึ้นหากเนื้อหามีความกว้างเกินกว่าข้อจำกัดที่มี โดยค่าเริ่มต้น 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 ที่ใช้กับข้อความ

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

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