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

คอมโพสิเบิล 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

เปิดใช้การจัดรูปแบบขั้นสูงด้วย 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 ที่มีผลกับข้อความ