พัฒนา UI ด้วยมุมมอง

การติดตั้งใช้งาน Jetpack Compose

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

เครื่องมือสร้างเลย์เอาต์มีประสิทธิภาพอย่างยิ่งเมื่อสร้างเลย์เอาต์ด้วย ConstraintLayout

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

ข้อมูลเบื้องต้นเกี่ยวกับเครื่องมือสร้างเลย์เอาต์

เครื่องมือสร้างเลย์เอาต์จะปรากฏขึ้นเมื่อคุณเปิดไฟล์เลย์เอาต์ XML

เครื่องมือแก้ไขเลย์เอาต์
รูปที่ 1 เครื่องมือสร้างเลย์เอาต์
  1. พาเล็ต: มีมุมมองและกลุ่มมุมมองต่างๆ ที่คุณลากไปยังเลย์เอาต์ได้
  2. แผนผังคอมโพเนนต์: แสดงลำดับชั้นของคอมโพเนนต์ในเลย์เอาต์
  3. แถบเครื่องมือ: มีปุ่มที่กำหนดค่าลักษณะเลย์เอาต์ใน เอดิเตอร์และเปลี่ยนแอตทริบิวต์เลย์เอาต์
  4. เครื่องมือแก้ไขการออกแบบ: ให้คุณแก้ไขเลย์เอาต์ในมุมมองการออกแบบ มุมมองแบบพิมพ์เขียว หรือทั้ง 2 อย่าง
  5. แอตทริบิวต์: มีตัวควบคุมสำหรับแอตทริบิวต์ของมุมมองที่เลือก
  6. โหมดมุมมอง: ให้คุณดูเลย์เอาต์ในโหมดโค้ด ไอคอนโหมดโค้ด แยก ไอคอนโหมดแยก หรือออกแบบ ไอคอนโหมดออกแบบ โหมดแยกจะแสดงหน้าต่างโค้ดและการออกแบบพร้อมกัน
  7. การควบคุมการซูมและการเลื่อน: ควบคุมขนาดและตำแหน่งของตัวอย่างภายใน เอดิเตอร์

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

เคล็ดลับ: หากต้องการสลับระหว่างโปรแกรมแก้ไขการออกแบบและข้อความ ให้กด Alt (Control ใน macOS) บวก Shift และปุ่มลูกศรขวาหรือซ้าย

เปลี่ยนลักษณะที่ปรากฏของตัวอย่าง

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

ปุ่มในแถบเครื่องมือของเครื่องมือสร้างเลย์เอาต์ที่กำหนดค่าลักษณะที่ปรากฏของเลย์เอาต์
รูปที่ 2 ปุ่มในแถบเครื่องมือของเครื่องมือสร้างเลย์เอาต์ที่กำหนดค่าลักษณะเลย์เอาต์
  1. การออกแบบและพิมพ์เขียว: เลือกวิธีที่คุณต้องการดูเลย์เอาต์ใน เอดิเตอร์ นอกจากนี้ คุณยังกด B เพื่อสลับประเภทมุมมองเหล่านี้ได้ด้วย
    • เลือกออกแบบเพื่อดูตัวอย่างเลย์เอาต์ที่แสดงผล
    • เลือกพิมพ์เขียวเพื่อดูเฉพาะโครงร่างของแต่ละมุมมอง
    • เลือกการออกแบบ + บลูปรินต์เพื่อดูทั้ง 2 มุมมองแบบคู่กัน
  2. การวางแนวหน้าจอและเลย์เอาต์ต่างๆ: เลือกระหว่างการวางแนวหน้าจอแนวนอนหรือแนวตั้ง หรือเลือกโหมดหน้าจออื่นๆ ที่แอปมีเลย์เอาต์สำรองให้ เช่น โหมดกลางคืน เมนูนี้ยังมีคำสั่งสำหรับสร้างเลย์เอาต์ใหม่ ตามที่อธิบายไว้ในส่วนหนึ่งของหน้านี้ด้วย นอกจากนี้ คุณยังกดตัวอักษร O บนแป้นพิมพ์เพื่อเปลี่ยนการวางแนวได้ด้วย

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

  4. ประเภทและขนาดอุปกรณ์: เลือกประเภทอุปกรณ์ (โทรศัพท์/แท็บเล็ต, Android TV หรือ Wear OS) และการกำหนดค่าหน้าจอ (ขนาดและความหนาแน่น) คุณเลือกจาก อุปกรณ์ที่กำหนดค่าไว้ล่วงหน้าหลายประเภทและคำจำกัดความ AVD ของคุณเองได้ และคุณ สร้าง AVD ใหม่ได้โดยเลือกเพิ่มคำจำกัดความอุปกรณ์จากรายการ ดังที่ แสดงในรูปที่ 3

    • หากต้องการปรับขนาดอุปกรณ์ ให้ลากมุมขวาล่างของเลย์เอาต์
    • กด D เพื่อหมุนเวียนดูรายการอุปกรณ์

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

    เมนูรายการอุปกรณ์ที่มีอุปกรณ์อ้างอิง
    รูปที่ 3 รายการอุปกรณ์ที่แสดงอุปกรณ์อ้างอิง

  5. เวอร์ชัน API: เลือกเวอร์ชันของ Android เพื่อแสดงตัวอย่างเลย์เอาต์ รายการเวอร์ชัน Android ที่พร้อมใช้งานจะขึ้นอยู่กับแพลตฟอร์ม SDK เวอร์ชันที่คุณติดตั้งโดยใช้เครื่องมือจัดการ SDK

  6. ธีมแอป: เลือกธีม UI ที่จะใช้กับตัวอย่าง การดำเนินการนี้ใช้ได้กับรูปแบบเลย์เอาต์ที่รองรับเท่านั้น ดังนั้นธีมจำนวนมากในรายการนี้จึงทำให้เกิดข้อผิดพลาด

  7. ภาษา: เลือกภาษาที่จะแสดงสำหรับสตริง UI รายการนี้ จะแสดงเฉพาะภาษาที่มีอยู่ในทรัพยากรสตริง หากต้องการ แก้ไขคำแปล ให้คลิกแก้ไขคำแปลจากเมนู ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับการแปลได้ที่แปล UI ด้วยเครื่องมือแก้ไขการแปล

สร้างเลย์เอาต์ใหม่

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

คุณสร้างเลย์เอาต์ใหม่ได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้

ใช้เมนูหลักของ Android Studio

  1. ในหน้าต่างโปรเจ็กต์ ให้คลิกโมดูลที่ต้องการเพิ่มเลย์เอาต์
  2. ในเมนูหลัก ให้เลือกไฟล์ > ใหม่ > XML > ไฟล์ XML ของเลย์เอาต์
  3. ในกล่องโต้ตอบที่ปรากฏขึ้น ให้ระบุชื่อไฟล์ แท็กเลย์เอาต์รูท และชุดซอร์สที่เลย์เอาต์เป็นของ
  4. คลิกเสร็จสิ้นเพื่อสร้างเลย์เอาต์

ใช้มุมมองโปรเจ็กต์

  1. เลือกมุมมองโปรเจ็กต์จากภายในหน้าต่างโปรเจ็กต์
  2. คลิกขวาที่ไดเรกทอรีเลย์เอาต์ที่คุณต้องการเพิ่มเลย์เอาต์
  3. ในเมนูบริบทที่ปรากฏขึ้น ให้คลิกใหม่ > ไฟล์ทรัพยากรเลย์เอาต์

ใช้มุมมอง Android

  1. เลือกมุมมอง Android จากภายในหน้าต่างโปรเจ็กต์
  2. คลิกขวาที่โฟลเดอร์ layout
  3. ในเมนูตามบริบทที่ปรากฏขึ้น ให้เลือกใหม่ > ไฟล์ทรัพยากรเลย์เอาต์

ใช้เครื่องมือจัดการทรัพยากร

  1. ในเครื่องมือจัดการทรัพยากร ให้เลือกแท็บเลย์เอาต์
  2. คลิกปุ่ม + แล้วคลิกไฟล์ทรัพยากรเลย์เอาต์

ใช้เลย์เอาต์รูปแบบต่างๆ เพื่อเพิ่มประสิทธิภาพสำหรับหน้าจอที่แตกต่างกัน

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

ใช้รูปแบบเลย์เอาต์ที่แนะนำ

Android Studio มีเลย์เอาต์ตัวแปรทั่วไปที่คุณใช้ในโปรเจ็กต์ได้ หากต้องการใช้เลย์เอาต์ที่แนะนำ ให้ทำดังนี้

  1. เปิดไฟล์เลย์เอาต์เริ่มต้น
  2. คลิกไอคอนออกแบบ ไอคอนโหมดออกแบบ ที่มุมขวาบนของหน้าต่าง
  3. ชื่อของไฟล์เลย์เอาต์จะปรากฏในเมนูแบบเลื่อนลงของการดำเนินการเพื่อสลับและสร้างตัวระบุสำหรับไฟล์เลย์เอาต์ เลือกเมนูแบบเลื่อนลง
  4. ในรายการแบบเลื่อนลง ให้เลือกตัวแปร เช่น สร้างตัวคัดกรองแนวนอนหรือสร้างตัวคัดกรองแท็บเล็ต
    เมนูแบบเลื่อนลง "สร้างตัวกรอง"
    รูปที่ 4 รายการแบบเลื่อนลงของตัวระบุเลย์เอาต์

ระบบจะสร้างไดเรกทอรีเลย์เอาต์ใหม่

สร้างเลย์เอาต์เวอร์ชันของคุณเอง

หากต้องการสร้างเลย์เอาต์ตัวแปรของคุณเอง ให้ทำดังนี้

  1. เปิดไฟล์เลย์เอาต์เริ่มต้น
  2. คลิกไอคอนออกแบบ ไอคอนโหมดออกแบบ ที่มุมขวาบนของหน้าต่าง
  3. ชื่อของไฟล์เลย์เอาต์จะปรากฏในเมนูแบบเลื่อนลงของการดำเนินการเพื่อสลับและสร้างตัวระบุสำหรับไฟล์เลย์เอาต์ เลือกเมนูแบบเลื่อนลง

  4. ในรายการแบบเลื่อนลง ให้เลือกเพิ่มตัวระบุแหล่งข้อมูล (ดูรูปที่ 4 ด้านบน)

    กล่องโต้ตอบเลือกไดเรกทอรีทรัพยากรจะปรากฏขึ้น

  5. ในกล่องโต้ตอบเลือกไดเรกทอรีทรัพยากร ให้กำหนดตัวระบุทรัพยากร สำหรับรูปแบบดังนี้

    1. เลือกตัวระบุจากรายการตัวระบุที่มี
    2. คลิกปุ่มเพิ่ม ปุ่มเพิ่มตัวระบุ
    3. ป้อนค่าที่จำเป็น
    4. ทำขั้นตอนเหล่านี้ซ้ำเพื่อเพิ่มผู้เข้ารอบอื่นๆ

  6. เมื่อเพิ่มตัวคัดกรองทั้งหมดแล้ว ให้คลิกตกลง

เมื่อมีเลย์เอาต์เดียวกันหลายรูปแบบ คุณจะสลับไปมาระหว่างเลย์เอาต์เหล่านั้นได้โดยเลือกรูปแบบจากเมนูแบบเลื่อนลงการดำเนินการเพื่อสลับและสร้างตัวระบุสำหรับไฟล์เลย์เอาต์

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างเลย์เอาต์สำหรับการแสดงผลต่างๆ ได้ที่ รองรับขนาดการแสดงผลต่างๆ

แปลงมุมมองหรือเลย์เอาต์

คุณสามารถแปลงมุมมองเป็นมุมมองอีกประเภทหนึ่ง และแปลงเลย์เอาต์ เป็นเลย์เอาต์อีกประเภทหนึ่งได้โดยทำดังนี้

  1. คลิกปุ่มออกแบบที่มุมขวาบนของหน้าต่างเครื่องมือแก้ไข
  2. ในแผนผังคอมโพเนนต์ ให้คลิกขวาที่มุมมองหรือเลย์เอาต์ แล้วคลิก แปลงมุมมอง
  3. ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกประเภทมุมมองหรือเลย์เอาต์ใหม่ แล้วคลิกใช้

แปลงเลย์เอาต์เป็น ConstraintLayout

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

หากต้องการแปลงเลย์เอาต์ที่มีอยู่เป็น ConstraintLayout ให้ทำดังนี้

  1. เปิดเลย์เอาต์ที่มีอยู่ใน Android Studio
  2. คลิกไอคอนออกแบบ ไอคอนโหมดออกแบบ ที่มุมขวาบนของหน้าต่างเครื่องมือแก้ไข
  3. ในแผนผังคอมโพเนนต์ ให้คลิกขวาที่เลย์เอาต์ แล้วคลิก แปลง your-layout-type เป็น ConstraintLayout

ดูข้อมูลเพิ่มเติมเกี่ยวกับ ConstraintLayout ได้ที่ สร้าง UI ที่ปรับเปลี่ยนตามอุปกรณ์ด้วย ConstraintLayout

ค้นหารายการในพาเล็ต

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

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

เปิดเอกสารประกอบจากพาเล็ต

หากต้องการเปิดเอกสารอ้างอิงของนักพัฒนาแอป Android สำหรับ View หรือกลุ่มการแสดงผล ให้เลือกองค์ประกอบ UI ในพาเล็ต แล้วกด Shift+F1

หากต้องการดูเอกสารประกอบเกี่ยวกับหลักเกณฑ์ของ Material สำหรับมุมมองหรือกลุ่มการแสดงผล ให้คลิกขวาองค์ประกอบ UI ในพาเล็ต แล้วเลือกหลักเกณฑ์ของ Material จากเมนูตามบริบท หากไม่มีรายการที่เฉพาะเจาะจงสำหรับรายการนั้น คำสั่งจะเปิดหน้าแรกของเอกสารประกอบเกี่ยวกับหลักเกณฑ์ของ Material

เพิ่มมุมมองไปยังเลย์เอาต์

หากต้องการเริ่มสร้างเลย์เอาต์ ให้ลาก View และกลุ่ม View จากPalette ลงในเครื่องมือแก้ไขการออกแบบ ขณะที่คุณวางวิวในเลย์เอาต์ ตัวแก้ไขจะแสดงข้อมูลเกี่ยวกับความสัมพันธ์ของวิวกับเลย์เอาต์ที่เหลือ

หากใช้ ConstraintLayout คุณจะสร้างข้อจำกัดโดยอัตโนมัติ ได้โดยใช้ฟีเจอร์อนุมานข้อจำกัดและเชื่อมต่ออัตโนมัติ

แก้ไขแอตทริบิวต์ของหน้าจอสำหรับแก้ไข

กฎ
รูปที่ 5 แผงแอตทริบิวต์

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

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

  1. แอตทริบิวต์ที่ประกาศ: แสดงรายการแอตทริบิวต์ที่ระบุในไฟล์เลย์เอาต์ หากต้องการเพิ่มแอตทริบิวต์ ให้คลิกปุ่มเพิ่ม ปุ่มเพิ่มแอตทริบิวต์ ที่ด้านบนของส่วน
  2. เลย์เอาต์: มีตัวควบคุมความกว้างและความสูงของ มุมมอง หากข้อมูลพร็อพเพอร์ตี้อยู่ในConstraintLayout ส่วนนี้จะแสดง อคติจากข้อจํากัดและแสดงรายการข้อจํากัดที่ข้อมูลพร็อพเพอร์ตี้ใช้ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับการควบคุมขนาดของมุมมองด้วย ConstraintLayout ได้ที่ปรับขนาดมุมมอง
  3. แอตทริบิวต์ทั่วไป: แสดงแอตทริบิวต์ทั่วไปสำหรับมุมมองที่เลือก หากต้องการดูแอตทริบิวต์ทั้งหมดที่ใช้ได้ ให้ขยายส่วนแอตทริบิวต์ทั้งหมด ที่ด้านล่างของหน้าต่าง
  4. ค้นหา: ให้คุณค้นหาแอตทริบิวต์มุมมองที่เฉพาะเจาะจง

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

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

  6. การไฮไลต์สีแดงรอบค่าแอตทริบิวต์บ่งบอกถึงข้อผิดพลาดเกี่ยวกับค่า เช่น ข้อผิดพลาดอาจระบุรายการที่ไม่ถูกต้องสำหรับแอตทริบิวต์ที่กำหนดเลย์เอาต์

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

เพิ่มข้อมูลตัวอย่างลงในมุมมอง

เนื่องจากเลย์เอาต์ Android จำนวนมากอาศัยข้อมูลรันไทม์ จึงอาจเป็นเรื่องยากที่จะแสดงภาพลักษณะของเลย์เอาต์ขณะออกแบบแอป คุณสามารถเพิ่มข้อมูลตัวอย่างสำหรับการแสดงตัวอย่างลงใน TextView, ImageView หรือ RecyclerView จากภายในเครื่องมือสร้างเลย์เอาต์ได้

หากต้องการแสดงหน้าต่างแอตทริบิวต์มุมมองขณะออกแบบ ให้คลิกขวาที่มุมมองประเภทใดประเภทหนึ่งต่อไปนี้ แล้วเลือกตั้งค่าข้อมูลตัวอย่าง ดังที่แสดงในรูปที่ 6

หน้าต่างแอตทริบิวต์มุมมองเวลาออกแบบ
รูปที่ 6 หน้าต่างแอตทริบิวต์มุมมอง ขณะออกแบบ

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

มุมมองข้อความพร้อมข้อมูลตัวอย่าง
รูปที่ 7 TextView ที่มีข้อมูลตัวอย่าง

สำหรับImageView คุณสามารถเลือกรูปภาพตัวอย่างที่แตกต่างกันได้ เมื่อเลือกรูปภาพตัวอย่าง Android Studio จะป้อนข้อมูลแอตทริบิวต์ tools:src ของ ImageView (หรือ tools:srcCompat หากใช้ AndroidX)

มุมมองรูปภาพที่มีข้อมูลตัวอย่าง
รูปที่ 8 ImageView พร้อมข้อมูลตัวอย่าง

สำหรับRecyclerView คุณสามารถเลือกจากชุดเทมเพลตที่มี รูปภาพและข้อความตัวอย่าง เมื่อใช้เทมเพลตเหล่านี้ Android Studio จะเพิ่มไฟล์ ลงในไดเรกทอรี res/layout recycler_view_item.xml ซึ่งมีเลย์เอาต์สำหรับข้อมูลตัวอย่าง Android Studio ยังเพิ่มข้อมูลเมตาลงใน RecyclerView เพื่อแสดงข้อมูลตัวอย่างอย่างถูกต้องด้วย

RecyclerView ที่มีข้อมูลตัวอย่าง
รูปที่ 9 RecyclerView ที่มีข้อมูลตัวอย่าง

แสดงคำเตือนและข้อผิดพลาดของเลย์เอาต์

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

หากต้องการดูปัญหาที่ทราบทั้งหมดในหน้าต่างด้านล่างเอดิเตอร์ ให้คลิก แสดงคำเตือนและข้อผิดพลาด (ไอคอนเครื่องหมายอัศเจรีย์ในวงกลมสีแดงที่บ่งบอกถึงข้อผิดพลาดของเลย์เอาต์ หรือ ไอคอนเครื่องหมายอัศเจรีย์รูปสามเหลี่ยมสีส้มที่ระบุคำเตือนเกี่ยวกับเลย์เอาต์) ในแถบเครื่องมือ

ดาวน์โหลดแบบอักษรและใช้กับข้อความ

เมื่อใช้ Android 8.0 (ระดับ API 26) หรือไลบรารี Jetpack Core คุณจะเลือกจากแบบอักษรหลายร้อยแบบได้ โดยทำตามขั้นตอนต่อไปนี้

  1. ในเครื่องมือสร้างเลย์เอาต์ ให้คลิกไอคอนการออกแบบ ไอคอนโหมดออกแบบ เพื่อดูเลย์เอาต์ในเครื่องมือแก้ไขการออกแบบ
  2. เลือกมุมมองข้อความ
  3. ในแผงแอตทริบิวต์ ให้ขยาย textAppearance แล้วขยายกล่อง fontFamily
  4. เลื่อนไปที่ด้านล่างของรายการ แล้วคลิกแบบอักษรเพิ่มเติมเพื่อเปิดกล่องโต้ตอบแหล่งข้อมูล
  5. ในกล่องโต้ตอบแหล่งข้อมูล ให้เลือกแบบอักษรโดยเรียกดูรายการหรือพิมพ์ในแถบค้นหาที่ด้านบน หากเลือกแบบอักษรในส่วนดาวน์โหลดได้ คุณจะคลิกสร้างแบบอักษรที่ดาวน์โหลดได้เพื่อโหลดแบบอักษรที่ รันไทม์เป็น แบบอักษรที่ดาวน์โหลดได้ หรือคลิกเพิ่มแบบอักษรลงในโปรเจ็กต์เพื่อแพ็กเกจไฟล์แบบอักษร TTF ใน APK ก็ได้ แบบอักษรที่แสดงในส่วน Android จะให้บริการโดยระบบ Android จึงไม่จำเป็นต้องดาวน์โหลดหรือรวมไว้ใน APK
  6. คลิกตกลงเพื่อดำเนินการให้เสร็จสิ้น

การตรวจสอบเลย์เอาต์

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

ภาพหน้าจอของแท็บการตรวจสอบเลย์เอาต์

รูปที่ 10 แท็บการตรวจสอบเลย์เอาต์

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

  • อุปกรณ์อ้างอิง
  • กำหนดเอง
  • ตาบอดสี
  • ขนาดแบบอักษร

ภาพหน้าจอของเมนูแบบเลื่อนลงในเครื่องมือตรวจสอบเลย์เอาต์

รูปที่ 11 เมนูแบบเลื่อนลงของอุปกรณ์อ้างอิง

อุปกรณ์อ้างอิง

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

ภาพหน้าจอของตัวอย่างเลย์เอาต์สำหรับอุปกรณ์อ้างอิงต่างๆ

รูปที่ 12 ดูตัวอย่างอุปกรณ์อ้างอิงในเครื่องมือตรวจสอบเลย์เอาต์

กำหนดเอง

หากต้องการปรับแต่งการกำหนดค่าการแสดงผลเพื่อดูตัวอย่าง ให้เลือกจากการตั้งค่าต่างๆ ซึ่งรวมถึงภาษา อุปกรณ์ หรือการวางแนวหน้าจอ

ปรับแต่งการแสดงอุปกรณ์ในเครื่องมือตรวจสอบเลย์เอาต์

รูปที่ 16 กำหนดค่าการแสดงผลที่กำหนดเองในเครื่องมือตรวจสอบเลย์เอาต์

ตาบอดสี

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

ภาพหน้าจอของตัวอย่างการจำลองสำหรับตาบอดสีประเภทต่างๆ

รูปที่ 13 ตัวอย่างการจำลองโหมดตาบอดสีในเครื่องมือตรวจสอบเลย์เอาต์

ขนาดแบบอักษร

ตรวจสอบเลย์เอาต์ในขนาดแบบอักษรต่างๆ และปรับปรุงการช่วยเหลือพิเศษของแอปสำหรับผู้ใช้ที่มีความบกพร่องทางสายตาโดยทดสอบเลย์เอาต์ด้วยแบบอักษรขนาดใหญ่ขึ้น

ตัวอย่างเลย์เอาต์แอปที่ขนาดแบบอักษรต่างๆ พร้อมข้อผิดพลาดของเลย์เอาต์ที่มองเห็นได้สำหรับแบบอักษรขนาดใหญ่

รูปที่ 14 ตัวอย่างขนาดแบบอักษรแบบแปรผันในเครื่องมือตรวจสอบเลย์เอาต์