สร้างการ์ดสำหรับแอป Google Chat

หน้านี้จะอธิบายวิธีสร้างคอมโพเนนต์และโครงสร้างของการ์ด การ์ดคืออินเทอร์เฟซผู้ใช้ที่แอป Google Chat สามารถใช้เพื่อแสดงและรวบรวมข้อมูลจากผู้ใช้ Chat แอปแชทสามารถสร้างและแสดงการ์ดในอินเทอร์เฟซต่อไปนี้

  • ข้อความที่มีการ์ดอย่างน้อย 1 รายการ
  • หน้าแรก ซึ่งเป็นการ์ดที่ปรากฏจากแท็บหน้าแรกในข้อความส่วนตัวกับแอป Chat
  • กล่องโต้ตอบ ซึ่งเป็นการ์ดที่เปิดขึ้นในหน้าต่างใหม่จากข้อความและหน้าแรก

ในหน้านี้ คุณจะได้เรียนรู้เกี่ยวกับองค์ประกอบต่อไปนี้ของการ์ด

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

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

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

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

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

เพิ่มส่วนหัว

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

ต่อไปนี้เป็นตัวอย่างของ CardHeader

เพิ่มส่วนการ์ดอย่างน้อย 1 ส่วน

วิดเจ็ต CardSection เป็นคอนเทนเนอร์ระดับสูงภายในการ์ด คุณใช้ส่วนในการ์ดเพื่อจัดกลุ่มวิดเจ็ตภายในการ์ด ในส่วนการ์ดแต่ละส่วน คุณสามารถใส่ส่วนหัวและวิดเจ็ตอย่างน้อย 1 รายการ

ต่อไปนี้เป็นตัวอย่าง CardSection ที่มีวิดเจ็ต textParagraph 2 รายการ

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

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

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

เพิ่มคอลัมน์

วิดเจ็ต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% ของความกว้างของการ์ด
  • ย่อหน้าข้อความที่ 3 ไม่ได้กำหนด horizontalSizeStyle ดังนั้นระบบจะกรอกข้อความให้เต็มพื้นที่ของการ์ดโดยค่าเริ่มต้น
  • ย่อหน้าข้อความที่ 4 ใช้ FILL_MINIMUM_SPACE เพื่อกรอกข้อมูลไม่เกิน 30% ของความกว้างของการ์ด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เพิ่มเส้นขอบให้กับตารางกริดหรือคอลัมน์

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

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

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

วิดเจ็ต CardFixedFooter แสดงส่วนท้ายของข้อความโต้ตอบที่ส่งโดยแอป Chat ส่วนท้ายอาจมีปุ่มหลักและปุ่มรอง

วิดเจ็ต CardFixedFooter ใช้ได้กับกล่องโต้ตอบเท่านั้น

ต่อไปนี้เป็นตัวอย่างวิดเจ็ต CardFixedFooter ที่มีปุ่ม 2 ปุ่ม

แก้ปัญหา

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

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