Android Academy · บทเรียน

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

แบบอักษร ขนาด น้ำหนัก และสี

จัดรูปแบบข้อความ เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องจัดรูปแบบข้อความ

ใน Jetpack Compose คอมโพสิเบิล Text ใช้แสดงคำบนหน้าจอ โดยค่าเริ่มต้นจะมีลักษณะเรียบง่าย แต่คุณสามารถเปลี่ยนขนาด สี และน้ำหนักได้

การจัดรูปแบบช่วยให้ผู้ใช้อ่านแอปของคุณได้ง่ายขึ้น ชื่อเรื่องควรมีขนาดใหญ่และหนากว่าข้อความเนื้อหา

คุณจัดรูปแบบ Text ได้ด้วยการส่งพารามิเตอร์เพิ่มเติมให้กับคอมโพสิเบิล

Text("Hello Compose")

การทำให้ข้อความใหญ่ขึ้น

พารามิเตอร์ fontSize ควบคุมขนาดของข้อความ ขนาดใช้หน่วย sp ซึ่งปรับตามการตั้งค่าแบบอักษรของผู้ใช้

หากต้องการใช้ sp ให้เติม .sp หลังตัวเลข เช่น 24.sp

Text(
    text = "Big Title",
    fontSize = 24.sp
)

ตัวหนาและน้ำหนักตัวอักษร

ใช้ fontWeight เพื่อทำให้ข้อความหนาขึ้นหรือบางลง ค่าที่ใช้บ่อยที่สุดคือ FontWeight.Bold

ตัวเลือกอื่น ๆ ได้แก่ FontWeight.Light, FontWeight.Normal และ FontWeight.SemiBold

Text(
    text = "Important",
    fontWeight = FontWeight.Bold
)

ข้อความตัวเอียง

พารามิเตอร์ fontStyle ทำให้ข้อความเอียงได้ กำหนดเป็น FontStyle.Italic เพื่อใช้ลักษณะตัวเอียง

ตัวเอียงมีประโยชน์สำหรับคำพูดอ้างอิงหรือการเน้นข้อความ

Text(
    text = "A quote",
    fontStyle = FontStyle.Italic
)

การใส่สีให้ข้อความ

พารามิเตอร์ color เปลี่ยนสีข้อความ คุณสามารถส่งค่า Color เช่น Color.Red หรือ Color.Blue ได้

เลือกสีที่มีความต่างเพียงพอ เพื่อให้ข้อความยังอ่านได้ง่าย

Text(
    text = "Warning",
    color = Color.Red
)

การจัดแนวข้อความ

ใช้ textAlign เพื่อจัดตำแหน่งข้อความภายในพื้นที่ของมัน ค่าที่ใช้บ่อย ได้แก่ TextAlign.Center, TextAlign.Start และ TextAlign.End

การจัดกึ่งกลางจะทำงานได้ดีที่สุดเมื่อ Text ขยายเต็มความกว้าง

Text(
    text = "Centered",
    textAlign = TextAlign.Center
)

ระยะห่างระหว่างตัวอักษร

พารามิเตอร์ letterSpacing เพิ่มช่องว่างระหว่างตัวอักษร และใช้หน่วย sp เช่นกัน

การเพิ่มระยะห่างเล็กน้อยช่วยให้หัวข้อดูโปร่งและทันสมัยขึ้น

Text(
    text = "SPACED",
    letterSpacing = 2.sp
)

การรวมรูปแบบ

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

Compose จะอ่านพารามิเตอร์แต่ละรายการและนำมาปรับใช้ร่วมกันทั้งหมด

Text(
    text = "Welcome",
    fontSize = 28.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue
)

การใช้ TextStyle

แทนที่จะใช้พารามิเตอร์แยกกันหลายรายการ คุณสามารถรวมพารามิเตอร์เหล่านั้นไว้ในออบเจ็กต์ TextStyle แล้วส่งให้กับพารามิเตอร์ style

วิธีนี้สะดวกเมื่อคุณนำลักษณะเดียวกันกลับมาใช้ในหลายตำแหน่ง

Text(
    text = "Styled",
    style = TextStyle(
        fontSize = 20.sp,
        color = Color.Magenta
    )
)

การจัดการข้อความยาว

ข้อความยาวอาจล้นพื้นที่ของมัน ใช้ maxLines เพื่อจำกัดจำนวนบรรทัด และใช้ overflow เพื่อแสดงจุดไข่ปลาเมื่อข้อความถูกตัด

TextOverflow.Ellipsis จะเพิ่ม ... ต่อท้ายเพื่อแทนข้อความที่ซ่อนไว้

Text(
    text = "A very long sentence...",
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

ขีดเส้นใต้และการตกแต่ง

พารามิเตอร์ textDecoration สามารถเพิ่ม Underline หรือ LineThrough ได้

โดยทั่วไปขีดเส้นใต้ใช้ทำเครื่องหมายลิงก์ ส่วนขีดฆ่าใช้แสดงราคาที่ถูกยกเลิกหรือราคาเดิม

Text(
    text = "Link",
    textDecoration = TextDecoration.Underline
)

ตรวจสอบความเข้าใจ

มาทดสอบสิ่งที่คุณเรียนรู้เกี่ยวกับการจัดรูปแบบ Text กัน

ทบทวน

คุณได้เรียนรู้การจัดรูปแบบ Text ด้วย fontSize ซึ่งใช้หน่วย sp, fontWeight สำหรับตัวหนา, fontStyle สำหรับตัวเอียง และ color สำหรับการกำหนดสี

นอกจากนี้ คุณยังจัดแนวข้อความ เพิ่มระยะห่างระหว่างตัวอักษร เพิ่มการตกแต่ง และรวมทุกอย่างไว้ใน TextStyle ได้

บทถัดไป คุณจะสร้างปุ่มที่ตอบสนองต่อการแตะ

คำถามที่พบบ่อย

บทเรียน “จัดรูปแบบข้อความ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “จัดรูปแบบข้อความ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “จัดรูปแบบข้อความ”

แบบอักษร ขนาด น้ำหนัก และสี คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “จัดรูปแบบข้อความ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Android Academy