จัดรูปแบบย่อหน้า

หน้านี้จะอธิบายถึงวิธีที่คุณสามารถจัดรูปแบบข้อความสำหรับ ย่อหน้า หากต้องการตั้งค่าการจัดรูปแบบระดับย่อหน้า คุณสามารถกำหนดค่าพารามิเตอร์ เช่น textAlign และ lineHeight หรือกำหนด ParagraphStyle ของคุณเอง

ตั้งค่าการจัดข้อความ

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

โดยค่าเริ่มต้น Text จะเลือกการจัดข้อความตามปกติโดยขึ้นอยู่กับการจัดข้อความ ค่าเนื้อหา:

• ขอบด้านซ้ายของคอนเทนเนอร์ Text สำหรับตัวอักษรจากซ้ายไปขวา เช่น ละติน ซีริลลิก หรือฮันกึล
• ขอบด้านขวาของคอนเทนเนอร์ Text สำหรับตัวอักษรจากขวาไปซ้าย เช่น อาหรับหรือฮีบรู

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

หากคุณต้องการตั้งค่าการจัดแนวข้อความของ Composable Text ด้วยตนเองหากคุณต้องการ โดยใช้ TextAlign.Start และ TextAlign.End แทน TextAlign.Left และ TextAlign.Right ตามลำดับ ตรงกับขอบด้านขวาของ Text ตามลำดับ Composable โดยขึ้นอยู่กับการวางแนวข้อความของภาษาที่ต้องการ ตัวอย่างเช่น TextAlign.End จัดชิดขอบด้านขวาสำหรับข้อความภาษาฝรั่งเศสและอยู่ด้านซ้าย สำหรับข้อความภาษาอาหรับ แต่ TextAlign.Right ปรับแนวไปทางขวาไม่ว่าอย่างไรก็ตาม จะใช้ตัวอักษร

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

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

หากต้องการเพิ่มหลายสไตล์ในย่อหน้า ให้ใช้ ParagraphStyle ใน AnnotatedString ซึ่งจะใส่คำอธิบายประกอบด้วยสไตล์ของคำอธิบายประกอบแบบกำหนดเองได้ เมื่อข้อความส่วนหนึ่งของคุณมีการทำเครื่องหมายด้วย ParagraphStyle ส่วนนั้นจะมีการ แยกข้อความที่เหลือออกจากข้อความที่เหลือ ราวกับมีฟีดขึ้นบรรทัดแรกและ สิ้นสุด

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มรูปแบบหลายรูปแบบในข้อความ โปรดดู เพิ่มรูปแบบที่หลากหลายในข้อความ

AnnotatedString มีตัวสร้างที่ปลอดภัยต่อประเภทเพื่อช่วยให้คุณสร้าง buildAnnotatedString ได้ง่ายขึ้น ข้อมูลโค้ดต่อไปนี้ใช้ buildAnnotatedString เพื่อตั้งค่า ParagraphStyle

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}
TextSnippets.kt

ปรับความสูงของบรรทัดและการเว้นวรรค

includeFontPadding เป็นพร็อพเพอร์ตี้เดิมที่เพิ่มการเยื้องเพิ่มเติมตามเมตริกแบบอักษรที่ด้านบนของบรรทัดแรกและด้านล่างของบรรทัดสุดท้ายของข้อความ ตั้งแต่ BOM ของ Compose เวอร์ชัน 2024.01.01 เป็นต้นไป ระบบจะตั้งค่า includeFontPadding เป็น false โดยค่าเริ่มต้น ซึ่งจะทำให้เลย์เอาต์ข้อความเริ่มต้นสอดคล้องกับเครื่องมือออกแบบทั่วไปมากขึ้น

ความสามารถในการกําหนดค่า lineHeight ไม่ใช่สิ่งใหม่ ฟีเจอร์นี้พร้อมใช้งานมาตั้งแต่ Android Q คุณสามารถกำหนดค่า lineHeight สำหรับ Text ได้โดยใช้ lineHeight ซึ่งกระจายความสูงของบรรทัดในแต่ละบรรทัดของ ข้อความ จากนั้นใช้ LineHeightStyle API ใหม่เพื่อกำหนดค่าเพิ่มเติมเกี่ยวกับวิธีจัดแนวข้อความนี้ภายในพื้นที่ว่าง และนำเว้นวรรคออก

คุณอาจต้องปรับ lineHeight โดยใช้หน่วยข้อความ "em" (ขนาดแบบอักษรสัมพัทธ์) แทน "sp" (พิกเซลที่ปรับขนาด) เพื่อให้แม่นยำยิ่งขึ้น ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือกหน่วยข้อความที่เหมาะสมได้ที่ TextUnit

รูปที่ 1 ใช้ "การจัดข้อความ" และ "ตัด" เพื่อปรับข้อความภายในชุด lineHeight และตัดการเว้นวรรคออกหากจำเป็น

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)
TextSnippets.kt

นอกจากการปรับ lineHeight แล้ว คุณยังจัดกึ่งกลางและข้อความจัดรูปแบบเพิ่มเติมได้ด้วย โดยใช้การกำหนดค่ากับ LineHeightStyle API ทดลอง: LineHeightStyle.Alignment และ LineHeightStyle.Trim (includeFontPadding ต้องตั้งค่าเป็น false สำหรับ ตัดให้ทำงานได้) การปรับแนวและการตัดใช้ระยะห่างที่วัดระหว่างเส้นของ เพื่อกระจายข้อความไปยังทุกบรรทัดได้อย่างเหมาะสมยิ่งขึ้น รวมถึงบรรทัดเดียว และบรรทัดบนสุดของข้อความบล็อก

LineHeightStyle.Alignment กำหนดวิธีปรับแนวเส้นในพื้นที่ทำงาน ตามความสูงของเส้น ในบรรทัดแต่ละบรรทัด คุณสามารถจัดแนวข้อความให้อยู่ด้านบน ด้านล่าง ตรงกลาง หรือตามสัดส่วน LineHeightStyle.Trim จากนั้นจะช่วยให้คุณเลือกที่จะเว้นวรรคหรือนำเว้นวรรคส่วนเกินที่ด้านบนของบรรทัดแรกและด้านล่างของบรรทัดสุดท้ายของข้อความออกได้ ซึ่งสร้างขึ้นจากการปรับเปลี่ยน lineHeight และการจัดแนว ตัวอย่างต่อไปนี้แสดงลักษณะของข้อความหลายบรรทัดที่มีการกำหนดค่า LineHeightStyle.Trim แบบต่างๆ เมื่อจัดแนวเป็นกึ่งกลาง (LineHeightStyle.Alignment.Center)

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

คำเตือน: การปรับเหล่านี้โดยใช้ LineHeightStyle API (ตัด) จะทำงานได้ก็ต่อเมื่อคุณใช้ร่วมกับการกำหนดค่า includeFontPadding = false.

เท่านั้น

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

แทรกตัวแบ่งบรรทัด

LineBreak API กําหนดเกณฑ์การแยกข้อความเป็นหลายบรรทัด คุณสามารถระบุประเภทการขึ้นบรรทัดใหม่ที่คุณต้องการใน บล็อก TextStyle ของ Text ที่เขียนได้ด้วย Compose ประเภทการแบ่งบรรทัดที่กำหนดล่วงหน้า ได้แก่

• Simple — การขึ้นบรรทัดใหม่แบบพื้นฐานที่รวดเร็ว แนะนำสำหรับช่องป้อนข้อความ
• Heading — การแบ่งบรรทัดด้วยกฎการแบ่งที่ผ่อนปรนมากขึ้น แนะนำสำหรับแบบสั้น ข้อความ เช่น ชื่อ
• Paragraph — การขึ้นบรรทัดใหม่ช้าลงแต่มีคุณภาพสูงขึ้นเพื่อให้อ่านง่ายขึ้น แนะนำสำหรับข้อความจำนวนมาก เช่น ย่อหน้า

ข้อมูลโค้ดต่อไปนี้ใช้ทั้ง Simple และ Paragraph เพื่อระบุลักษณะการแบ่งบรรทัดในบล็อกข้อความยาว

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)
TextSnippets.kt

รูปที่ 1 บล็อกข้อความที่มีกลยุทธ์การขึ้นบรรทัดใหม่อย่างง่ายๆ (ด้านบน) เทียบกับ บล็อกข้อความที่มีการแบ่งบรรทัดที่มีการเพิ่มประสิทธิภาพย่อหน้า (ด้านล่าง)

ในเอาต์พุตด้านบน โปรดสังเกตว่าลักษณะการแบ่งบรรทัด Paragraph ให้ผลลัพธ์ที่สมดุลกว่าการแบ่งบรรทัด Simple

ปรับแต่งการขึ้นบรรทัดใหม่

คุณยังสร้างการกำหนดค่า LineBreak ของคุณเองได้โดยใช้ Strategy พารามิเตอร์ Strategy อาจเป็นค่าใดก็ได้ต่อไปนี้

• Balanced — พยายามทำให้ความยาวบรรทัดของข้อความสมดุลกัน และใช้กับกรณีต่างๆ การใส่ยัติภังค์อัตโนมัติหากเปิดใช้ แนะนำสำหรับหน้าจอขนาดเล็ก เช่น นาฬิกา เพื่อแสดงข้อความได้มากที่สุด
• HighQuality — ปรับย่อหน้าเพื่อข้อความที่อ่านง่ายขึ้น ซึ่งรวมถึง ขีดกลางหากเปิดใช้ (ควรเป็นค่าเริ่มต้นสำหรับทุกอย่างที่ไม่ใช่ Balanced หรือ Simple)
• Simple — กลยุทธ์พื้นฐานที่รวดเร็ว หากเปิดใช้ ระบบจะแบ่งคำเฉพาะสำหรับคำที่ยาวเกินบรรทัด มีประโยชน์สำหรับการแก้ไขข้อความเพื่อหลีกเลี่ยงการเปลี่ยนตำแหน่งขณะพิมพ์

หมายเหตุ: คุณยังปรับแต่งลักษณะการแบ่งบรรทัดได้ด้วยพารามิเตอร์ Strictness และ WordBreak พารามิเตอร์เหล่านี้ออกแบบมาสำหรับภาษา CJK และคุณอาจไม่เห็นผลลัพธ์ที่ต้องการหากใช้กับภาษาที่ไม่ใช่ CJK ดูข้อมูลเพิ่มเติมได้ที่ข้อควรพิจารณาเกี่ยวกับ CJK

ตัวอย่างต่อไปนี้แสดงความแตกต่างระหว่างย่อหน้าที่ใช้การตั้งค่าเริ่มต้น และย่อหน้าที่ปรับให้เหมาะกับหน้าจอขนาดเล็กที่มีการแบ่งบรรทัด Balanced กลยุทธ์:

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)
TextSnippets.kt

รูปที่ 2 ย่อหน้าที่มีกลยุทธ์การแบ่งบรรทัดBalanced (ด้านบน) เทียบกับย่อหน้าที่ไม่มีกลยุทธ์การขึ้นบรรทัดใหม่

ข้อควรพิจารณาเกี่ยวกับ CJK

นอกจากนี้ คุณยังปรับแต่ง LineBreak ด้วย API ของ Strictness และ WordBreak ได้ด้วย ซึ่งออกแบบมาเพื่อภาษา CJK โดยเฉพาะ คุณอาจไม่เห็นผลของ API เหล่านี้ในภาษาที่ไม่ใช่ CJK เสมอไป โดยรวมแล้ว ระบบจะกำหนดกฎการแบ่งบรรทัดตามภาษา

Strictness จะอธิบายความเข้มงวดของการขึ้นบรรทัดใหม่กับรายการต่อไปนี้ พร็อพเพอร์ตี้:

หมายเหตุ: ค่าเริ่มต้นที่แนะนำสำหรับ Strictness จะแตกต่างกันไปตามภาษา

• Default — กฎการละเมิดเริ่มต้นสำหรับภาษา อาจตรงกับNormal หรือ Strict
• Loose — กฎที่จำกัดน้อยที่สุด เหมาะสำหรับสายสั้นๆ
• Normal — กฎที่พบบ่อยที่สุดสำหรับการขึ้นบรรทัดใหม่
• Strict — กฎที่เข้มงวดที่สุดสำหรับการขึ้นบรรทัดใหม่

WordBreak กำหนดวิธีแทรกตัวแบ่งบรรทัดภายในคำที่มี พร็อพเพอร์ตี้ต่อไปนี้

• Default — กฎการละเมิดเริ่มต้นสำหรับภาษา
• Phrase — ตัวแบ่งบรรทัดจะแบ่งตามวลี

ข้อมูลโค้ดต่อไปนี้ใช้การตั้งค่าStrictความเข้มงวดและการแบ่งคำ Phrase สำหรับข้อความภาษาญี่ปุ่น

หมายเหตุ: หากต้องการทดสอบข้อมูลโค้ดต่อไปนี้ ให้เลือกภาษาญี่ปุ่นในอุปกรณ์ (การตั้งค่า > ระบบ > ภาษาและการป้อนข้อมูล > ภาษา > ญี่ปุ่น)

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)
TextSnippets.kt

รูปที่ 3 ข้อความที่จัดรูปแบบด้วยการตั้งค่า Strictness และ WordBreak (ด้านบน) เทียบกับข้อความที่จัดรูปแบบด้วย LineBreak.Heading เท่านั้น (ด้านล่าง)

เครื่องหมายขีดกลางที่แบ่งออกเป็นบรรทัด

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

ตามค่าเริ่มต้น จะไม่มีการเปิดใช้เครื่องหมายขีดกลาง หากต้องการเปิดใช้การแบ่งบรรทัด ให้เพิ่ม Hyphens.Auto ลงในบล็อก TextStyle ดังนี้

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)
TextSnippets.kt

รูปที่ 4 ย่อหน้าที่ไม่ได้เปิดใช้การแบ่งคำ (ด้านบน) เทียบกับย่อหน้าที่มีการเปิดใช้การแบ่งคำ (ด้านล่าง)

เมื่อเปิดใช้ การตัดคำจะเกิดขึ้นภายใต้เงื่อนไขต่อไปนี้เท่านั้น

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