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

Composable 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 Composable เดียวกัน ให้ใช้ 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 จะตั้งค่าการตกแต่งข้อความ รูปแบบอักษร และสีสำหรับลิงก์

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

ผลลัพธ์

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

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

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

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

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

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

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

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

การผสานรวม

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

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

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

ใช้ Brush กับช่วงข้อความ

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

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

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

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

ใช้เอฟเฟกต์ป้ายข้อความเลื่อนกับข้อความ

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

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

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

• Brushing Up on Compose Text Coloring
• Animating brush Text coloring in Compose
• Support multiple links in a single string of text