สร้างการ์ดสำหรับแอป 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 จะตัดเมื่อความกว้างหน้าจอน้อยกว่าหรือเท่ากับ 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 ไม่ได้ วิดเจ็ตในคอลัมน์จะสอดคล้องกัน ที่ด้านบน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แก้ปัญหา

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

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