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

หน้านี้จะอธิบายวิธีสร้างคอมโพเนนต์และโครงสร้างของการ์ด การ์ดคืออินเทอร์เฟซผู้ใช้ที่แอป Google Chat สามารถใช้เพื่อนำเสนอและรวบรวมข้อมูลจากผู้ใช้ 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 pt
  • ในอุปกรณ์ Android คอลัมน์ที่ 2 จะตัดขึ้นบรรทัดใหม่หากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 320 dp

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

  • ย่อหน้าข้อความแรกใช้ FILL_MINIMUM_SPACE เพื่อเติมไม่เกิน 30% ของความกว้างของการ์ด
  • ย่อหน้าข้อความที่ 2 ใช้ FILL_AVAILABLE_SPACE เพื่อเติมพื้นที่ว่างในความกว้างของการ์ด ในตัวอย่างนี้ แถบจะมีความยาว 70% ของความกว้างการ์ด
  • ย่อหน้าข้อความที่ 3 ไม่ได้กำหนด horizontalSizeStyle ดังนั้นจึงใช้ค่าเริ่มต้นเพื่อเติมพื้นที่ว่างของพื้นที่การ์ด
  • ย่อหน้าข้อความที่ 4 ใช้ FILL_MINIMUM_SPACE เพื่อเติมไม่เกิน 30% ของความกว้างของการ์ด

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

คุณสามารถจัดแนววิดเจ็ตในแนวนอนไปทางซ้าย ขวา หรือกึ่งกลางของคอลัมน์ได้โดยกำหนดช่อง horizontalAlignment หากไม่ได้กำหนดช่อง 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 รูปภาพที่ 2 มีเส้นขอบที่กำหนดเป็น NO_BORDER รูปภาพที่ 3 ไม่มีเส้นขอบที่กำหนดไว้

เพิ่มภาพสไลด์

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

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

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

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

แก้ปัญหา

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

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