จัดรูปแบบโครงสร้างของการ์ดหรือกล่องโต้ตอบ

หน้านี้อธิบายวิธีจัดรูปแบบและจัดโครงสร้างวิดเจ็ตในการ์ดหรือกล่องโต้ตอบ

ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้

เปิดเครื่องมือสร้างการ์ด

ข้อกำหนดเบื้องต้น

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟ ทำตามการเริ่มต้นใช้งานอย่างรวดเร็วต่อไปนี้ เกี่ยวกับสถาปัตยกรรมแอปที่คุณต้องการใช้

แสดงการ์ดและกล่องโต้ตอบในคอลัมน์

วิดเจ็ต columns แสดงสูงสุด 2 คอลัมน์ในการ์ดหรือกล่องโต้ตอบ คุณสามารถเพิ่ม วิดเจ็ตให้กับแต่ละคอลัมน์ วิดเจ็ตจะปรากฏตามลำดับ ที่ระบุ หากต้องการใส่มากกว่า 2 คอลัมน์ หรือใช้แถว ให้ใช้วิดเจ็ต grid

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

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

กำหนดความกว้างของคอลัมน์

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

  • บนเว็บ คอลัมน์ที่ 2 จะตัดเมื่อความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 480 พิกเซล
  • ในอุปกรณ์ iOS คอลัมน์ที่ 2 จะตัดเมื่อความกว้างหน้าจอน้อยกว่าหรือ เท่ากับ 300 จุด
  • ในอุปกรณ์ Android คอลัมน์ที่ 2 จะวนรอบหากความกว้างหน้าจอน้อยกว่า หรือเท่ากับ 320 dp

ตัวอย่างต่อไปนี้แสดงการ์ดที่มีวิดเจ็ต columns ที่แสดง ข้อความ 2 คอลัมน์ที่มี 4 รายการอยู่ในคอลัมน์ แต่ละรายการในคอลัมน์มี ใช้ horizontalSizeStyle เพื่อกำหนดพื้นที่ข้อความ จะเต็มแต่ละคอลัมน์ ดังนี้

  • ย่อหน้าข้อความแรกใช้ FILL_MINIMUM_SPACE เพื่อเติมไม่เกิน 30% ความกว้างของการ์ด
  • ย่อหน้าที่ 2 ใช้ FILL_AVAILABLE_SPACE เพื่อเติมข้อความที่มีอยู่ ตามความกว้างของการ์ด ในตัวอย่างนี้ โฆษณาป้อน 70% ของ ความกว้าง
  • ย่อหน้าข้อความที่สามไม่ได้กำหนด horizontalSizeStyle จึงเป็นค่าเริ่มต้น เพื่อเติมพื้นที่ว่างในบัตรให้เต็ม
  • ย่อหน้าที่ 4 ใช้ FILL_MINIMUM_SPACE เพื่อเติมไม่เกิน 30% ความกว้างของการ์ด

กำหนดการจัดแนวคอลัมน์ในแนวนอน

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

ตัวอย่างต่อไปนี้จัดแนวข้อความในแนวนอนภายในคอลัมน์ทางซ้าย

ตัวอย่างต่อไปนี้จัดข้อความตามแนวนอนภายในคอลัมน์ที่อยู่ตรงกลาง

ตัวอย่างต่อไปนี้จัดแนวข้อความในแนวนอนภายในคอลัมน์ทางด้านขวา

กำหนดการจัดข้อความแนวตั้งของคอลัมน์

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

ตัวอย่างต่อไปนี้จัดข้อความตามแนวตั้งภายในคอลัมน์ให้อยู่ด้านบน

ตัวอย่างต่อไปนี้จัดข้อความแนวตั้งภายในคอลัมน์ตรงกลาง

ตัวอย่างต่อไปนี้จัดข้อความแนวตั้งภายในคอลัมน์ที่ด้านล่าง

เพิ่มตัวแบ่งแนวนอนระหว่างวิดเจ็ต

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

ต่อไปนี้เป็นการ์ดที่ประกอบด้วยวิดเจ็ต divider ระหว่างโฆษณาประเภทอื่นๆ วิดเจ็ต:

แสดงตารางกริดที่มีคอลเล็กชันรายการ

วิดเจ็ต grid แสดงตารางกริดที่มีคอลเล็กชันรายการ ตารางกริดรองรับจำนวน คอลัมน์และรายการต่างๆ จํานวนแถวกําหนดโดยนํารายการหารด้วยคอลัมน์ ตารางกริดที่มี 10 รายการและ 2 คอลัมน์มี 5 แถว ตารางกริดที่มี 11 รายการและ 2 รายการ คอลัมน์จะมี 6 แถว

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

ตัวอย่างต่อไปนี้เป็นตารางกริดแบบ 2 คอลัมน์ที่มีรายการเดียว

กำหนดตำแหน่งที่ข้อความจะปรากฏพร้อมกับรูปภาพในตาราง

ช่อง gridItemLayout ช่วยให้คุณกำหนดในแต่ละ gridItem ได้ว่าข้อความจะปรากฏด้านบนหรือด้านล่าง รายการในตารางกริด หากไม่ได้กำหนด gridItemLayout ข้อความจะมีค่าเริ่มต้นเป็น ปรากฏใต้รายการในตารางกริด

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

เพิ่มเส้นขอบในองค์ประกอบ UI

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

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

ตัวอย่างต่อไปนี้เป็นตารางกริดแบบ 3 คอลัมน์ที่มีรูปภาพอยู่ในตารางกริดแต่ละรายการและ รูปแบบและประเภทเส้นขอบที่กำหนดแยกกัน องค์ประกอบ รูปภาพมีเส้นขอบที่กำหนดไว้เป็น STROKE รูปภาพที่ 2 มีเส้นขอบที่กำหนดไว้เป็น NO_BORDER รูปภาพที่ 3 ไม่ได้กำหนดเส้นขอบ

แก้ปัญหา

เมื่อแอป Google Chat หรือ card จะแสดงผลข้อผิดพลาด อินเทอร์เฟซ Chat แสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ไม่สามารถดำเนินการตามคำขอของคุณ" บางครั้ง UI ของ Chat ไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ แต่แอป Chat หรือ ทำให้เกิดผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความในการ์ดอาจ ปรากฏขึ้น

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