0Pricing
Android Academy · บทเรียน

สีและ MaterialTheme

ใช้ธีมที่สอดคล้องกัน

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

สีใน Compose

Compose แทนสีด้วยคลาส Color และมีค่าสำเร็จรูป เช่น Color.Red และ Color.Blue

คุณส่งค่า Color ให้กับพารามิเตอร์ต่าง ๆ เช่น สีของ Text หรือพื้นหลังได้

Text(
    text = "Hi",
    color = Color.Blue
)

ค่าสีแบบกำหนดเอง

สร้างสีใด ๆ จากรหัสเลขฐานสิบหกโดยใช้ Color(0xFFRRGGBB) ตัวเลขสองหลักแรก FF หมายถึงทึบแสงเต็มที่

ตัวอย่างเช่น 0xFF6200EE คือสีม่วง

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

สีพื้นหลัง

ใช้ modifier background เพื่อระบายสีด้านหลัง composable เพิ่ม padding เพื่อไม่ให้เนื้อหาชิดขอบ

ลำดับมีความสำคัญ: background แล้วตามด้วย padding จะทำให้พื้นที่ padding ถูกเติมสีด้วย

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

MaterialTheme คืออะไร

MaterialTheme คือระบบที่เก็บสี แบบอักษร และรูปร่างของแอปไว้ในที่เดียว

Composables จะอ่านค่าจากระบบนี้ ทำให้ทั้งแอปมีรูปแบบสม่ำเสมอและปรับสไตล์ใหม่ได้ง่าย

MaterialTheme {
    Text("Themed app")
}

ชุดรูปแบบสีของธีม

colorScheme ของธีมมีบทบาทที่ตั้งชื่อไว้ เช่น primary, secondary และ background

การอ่านค่าเหล่านี้แทนการกำหนดสีตายตัว ช่วยให้คุณเปลี่ยนรูปลักษณ์ได้จากจุดเดียว

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary และ onPrimary

สีหลักแต่ละสีมีคู่สี on สำหรับข้อความที่วางทับบนสีนั้น เช่น onPrimary

การใช้ primary เป็นพื้นหลังและ onPrimary เป็นสีข้อความช่วยรับประกันความเปรียบต่างที่อ่านได้ชัดเจน

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

ตัวอักษรของธีม

MaterialTheme ยังเก็บรูปแบบข้อความไว้ใน typography เช่น titleLarge และ bodyMedium

ส่งรูปแบบใดรูปแบบหนึ่งให้กับ style ของ Text เพื่อให้ข้อความมีขนาดเหมาะสมและสม่ำเสมอ

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

ชุดรูปแบบสว่างและมืด

คุณสามารถสร้างชุดรูปแบบด้วย lightColorScheme() หรือ darkColorScheme() แล้วส่งให้ MaterialTheme

การสลับชุดรูปแบบช่วยให้แอปของคุณรองรับทั้งโหมดสว่างและโหมดมืด

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

ปรับแต่งชุดรูปแบบ

แทนที่บทบาทต่าง ๆ โดยระบุชื่อเมื่อสร้างชุดรูปแบบ ในที่นี้ primary จะกลายเป็นสีเขียวอมฟ้าแบบกำหนดเอง

ทุกส่วนที่อ่านค่า colorScheme.primary จะอัปเดตโดยอัตโนมัติ

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

เหตุผลที่ควรใช้ธีม

การกำหนดสีตายตัวไว้ทั่วทั้งแอปทำให้การออกแบบใหม่เป็นเรื่องยุ่งยาก การอ่านค่าจาก MaterialTheme หมายความว่าการเปลี่ยนแปลงเพียงครั้งเดียวจะอัปเดตทั้งแอป

นอกจากนี้ยังช่วยด้านการเข้าถึง เนื่องจากสี on ช่วยรักษาความเปรียบต่างที่ดี

พื้นผิวและพื้นหลัง

Composable Surface ใช้สีพื้นหลังของธีมและระดับความสูงไว้ด้านหลังเนื้อหา

เป็นวิธีที่สะอาดในการกำหนดสีพื้นฐานที่เหมาะสมให้การ์ดหรือหน้าจอ

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความรู้เกี่ยวกับสีและธีมของคุณ

สรุปทบทวน

คุณได้เรียนรู้การใช้คลาส Color สีเลขฐานสิบหกแบบกำหนดเอง และ modifier background โดย MaterialTheme จะรวบรวม colorScheme, typography และรูปร่างไว้ด้วยกัน

การอ่านบทบาทอย่าง primary และ onPrimary ช่วยรักษาความเปรียบต่างและความสม่ำเสมอ พร้อมรองรับชุดรูปแบบสว่างหรือมืด

ทำได้ดีมากที่เรียนจบหลักสูตรการจัดรูปแบบ

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

บทเรียน “สีและ MaterialTheme” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “สีและ MaterialTheme”

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

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

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

บทเรียน “สีและ MaterialTheme” ใช้เวลานานแค่ไหน

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

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

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

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

  1. จัดรูปแบบข้อความ
  2. ปุ่มและการคลิก
  3. จัดระยะห่างด้วย Padding
  4. สีและ MaterialTheme
← กลับไปที่ Android Academy