หน้านี้อธิบายวิธีจัดรูปแบบและจัดโครงสร้างวิดเจ็ตในการ์ดหรือกล่องโต้ตอบ
ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้
เปิดเครื่องมือสร้างการ์ดข้อกำหนดเบื้องต้น
แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟ ทำตามการเริ่มต้นใช้งานอย่างรวดเร็วต่อไปนี้ เกี่ยวกับสถาปัตยกรรมแอปที่คุณต้องการใช้
- บริการ HTTP กับ Google Cloud Functions
- สคริปต์ Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
แสดงการ์ดและกล่องโต้ตอบในคอลัมน์
วิดเจ็ต 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
หัวข้อที่เกี่ยวข้อง
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType