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

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

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

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

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

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

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.d
p)
    )
}TextS
nippets.kt

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

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

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

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

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

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

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

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

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

• 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

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

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

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

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

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

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

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

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 = customTitleLineBre
ak
    )
)TextS
nippets.kt

ใช้ขีดกลางเพื่อแยกข้อความที่ขึ้นบรรทัดใหม่

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

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

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