สร้างการ์ดสำหรับแอป 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%

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่างต่อไปนี้เป็นตาราง 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