Android Academy · บทเรียน

ดูตัวอย่าง UI ของคุณ

ใช้ @Preview เพื่อปรับแก้อย่างรวดเร็ว

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

เหตุใดการแสดงตัวอย่างจึงมีประโยชน์

การสร้างและเรียกใช้แอปบนอุปกรณ์ต้องใช้เวลา Compose จึงมีวิธีดูส่วนติดต่อผู้ใช้ที่รวดเร็วยิ่งขึ้น นั่นคือ การแสดงตัวอย่าง

การแสดงตัวอย่างจะแสดงผลคอมโพสิเบิลโดยตรงภายใน Android Studio ทำให้คุณตรวจสอบเลย์เอาต์ได้โดยไม่ต้องเปิดแอปทั้งชุดบนเครื่องจำลองหรือโทรศัพท์

คำอธิบายประกอบ @Preview

หากต้องการแสดงตัวอย่างคอมโพสิเบิล ให้สร้างฟังก์ชันแยกต่างหากและกำกับด้วย @Preview จากนั้น Android Studio จะแสดงผลลัพธ์ที่แสดงผลแล้วในบานหน้าต่างการออกแบบ

ฟังก์ชันแสดงตัวอย่างเองก็เป็นคอมโพสิเบิลเช่นกัน จึงมีทั้ง @Preview และ @Composable

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

การแสดงตัวอย่างไม่รับพารามิเตอร์

ฟังก์ชันแสดงตัวอย่างต้องไม่รับพารามิเตอร์ Compose จำเป็นต้องเรียกใช้ฟังก์ชันนี้เอง จึงไม่สามารถส่งอาร์กิวเมนต์ให้ได้

ด้วยเหตุนี้ คุณจึงสร้างตัวห่อขึ้นมา โดยตัวอย่างจะเรียกคอมโพสิเบิลจริงของคุณและส่งข้อมูลตัวอย่างให้แสดงผล

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

การตั้งชื่อฟังก์ชันแสดงตัวอย่าง

ธรรมเนียมทั่วไปคือการตั้งชื่อการแสดงตัวอย่างตามชื่อคอมโพสิเบิลที่แสดง และลงท้ายด้วย Preview สำหรับ Greeting คุณจะเขียนว่า GreetingPreview

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

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

การตั้งชื่อให้การแสดงตัวอย่าง

คุณสามารถติดป้ายกำกับการแสดงตัวอย่างด้วยพารามิเตอร์ name ชื่อนี้จะแสดงอยู่เหนือการแสดงตัวอย่างที่แสดงผลแล้วใน Android Studio

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

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

การแสดงพื้นหลัง

โดยค่าเริ่มต้น การแสดงตัวอย่างอาจแสดงผลบนพื้นหลังโปร่งใส กำหนด showBackground = true เพื่อวาดพื้นผิวทึบด้านหลังคอมโพสิเบิลของคุณ

วิธีนี้ช่วยให้ประเมินระยะห่างและสีในบานหน้าต่างการออกแบบได้ง่ายขึ้นมาก

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

การแสดงตัวอย่างหลายรายการพร้อมกัน

คุณสามารถเพิ่มคำอธิบายประกอบ @Preview หลายรายการให้กับฟังก์ชันเดียว หรือเขียนฟังก์ชันแสดงตัวอย่างหลายฟังก์ชันก็ได้ แต่ละรายการจะแสดงผลแยกกัน

วิธีนี้มีประโยชน์สำหรับตรวจสอบส่วนติดต่อผู้ใช้เดียวกันด้วยข้อมูลตัวอย่างที่ต่างกัน เช่น ชื่อสั้นและชื่อยาว

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

การแสดงตัวอย่างขนาดต่าง ๆ

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

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

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

การแสดงตัวอย่างโหมดมืด

คุณสามารถดูตัวอย่างว่าส่วนติดต่อผู้ใช้มีหน้าตาอย่างไรในธีมมืด โดยกำหนดพารามิเตอร์ uiMode เป็นโหมดกลางคืน วิธีนี้ช่วยตรวจพบสีที่ดูไม่ถูกต้องบนพื้นหลังมืด

การตรวจสอบทั้งการแสดงตัวอย่างโหมดสว่างและโหมดมืดตั้งแต่เนิ่น ๆ จะช่วยป้องกันปัญหาที่ไม่คาดคิดในภายหลัง

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

การแสดงตัวอย่างแบบโต้ตอบและแบบสด

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

การแสดงตัวอย่างไม่ได้มาแทนที่การเรียกใช้แอปจริง แต่ช่วยให้การออกแบบหน้าจอรวดเร็วยิ่งขึ้นมาก

การแสดงตัวอย่างมีไว้สำหรับการแก้ไขข้อบกพร่องเท่านั้น

ฟังก์ชันแสดงตัวอย่างเป็นเครื่องมือสำหรับการพัฒนา ฟังก์ชันเหล่านี้ไม่ใช่ส่วนหนึ่งของแอปที่จัดส่งให้ผู้ใช้ และผู้ใช้จะไม่เห็นฟังก์ชันเหล่านี้

ดังนั้น คุณจึงเพิ่มการแสดงตัวอย่างพร้อมข้อมูลตัวอย่างได้มากเท่าที่ต้องการ เพราะสิ่งเหล่านี้มีผลเฉพาะสิ่งที่คุณเห็นในสภาพแวดล้อมการพัฒนาแบบรวมเท่านั้น

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

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

มาทบทวนกฎสำคัญเกี่ยวกับฟังก์ชันแสดงตัวอย่างกัน

ทบทวน

คุณได้เรียนรู้ว่า @Preview แสดงผลคอมโพสิเบิลภายใน Android Studio ได้โดยไม่ต้องใช้อุปกรณ์ ฟังก์ชันแสดงตัวอย่างไม่รับพารามิเตอร์ จึงทำหน้าที่ห่อคอมโพสิเบิลจริงของคุณพร้อมข้อมูลตัวอย่าง

ตัวเลือกที่มีประโยชน์ได้แก่ name, showBackground, widthDp, heightDp และ uiMode สำหรับโหมดมืด การแสดงตัวอย่างเป็นเครื่องมือสำหรับการแก้ไขข้อบกพร่องเท่านั้น บทถัดไป คุณจะนำทุกอย่างมารวมกันเพื่อสร้างการ์ดโปรไฟล์จริง

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

บทเรียน “ดูตัวอย่าง UI ของคุณ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ดูตัวอย่าง UI ของคุณ”

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

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

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

บทเรียน “ดูตัวอย่าง UI ของคุณ” ใช้เวลานานแค่ไหน

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

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

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

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

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