เพิ่มข้อความและรูปภาพลงในการ์ด

หน้านี้จะอธิบายวิธีเพิ่มและจัดรูปแบบข้อความและรูปภาพในการ์ด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างการ์ดได้ที่สร้างการ์ดสำหรับแอป Google Chat

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

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

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

แอป Google Chat ที่กำหนดค่าให้รับและตอบกลับเหตุการณ์การโต้ตอบ หากต้องการสร้างแอป Chat แบบอินเทอร์แอกทีฟ ให้ทำตามคู่มือเริ่มต้นฉบับย่อต่อไปนี้โดยอิงตามสถาปัตยกรรมของแอปที่คุณต้องการใช้

เพิ่มรูปภาพหรือไอคอน

ส่วนนี้อธิบายวิธีเพิ่มองค์ประกอบภาพลงในการ์ด เช่น รูปภาพ คอมโพเนนต์รูปภาพ และไอคอน

เพิ่มรูปภาพ

วิดเจ็ต Image จะแสดงรูปภาพ PNG หรือ JPG ที่โฮสต์ใน URL แบบ HTTPS ความกว้างของรูปภาพที่แสดงจะเต็มความกว้างของการ์ดที่แสดง และ ความสูงจะปรับให้คงสัดส่วนภาพเดิมไว้ Imageวิดเจ็ต รองรับ onclickการดำเนินการ ที่เกิดขึ้นเมื่อผู้ใช้คลิกรูปภาพ ตัวอย่างการดำเนินการ onclick มีดังนี้

  • เปิดไฮเปอร์ลิงก์ด้วย OpenLink เช่น ไฮเปอร์ลิงก์ไปยังเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chat https://developers.google.com/chat
  • เรียกใช้การดำเนินการ ที่เรียกใช้ฟังก์ชันที่กำหนดเอง เช่น การเรียก API

วิดเจ็ต Image มีข้อจำกัดต่อไปนี้

  • รองรับเฉพาะรูปภาพ PNG และ JPG
  • URL ของโฮสต์ต้องเป็น HTTPS
  • ขนาดรูปภาพสูงสุดที่แนะนำคือ 2 MB เพื่อให้การ์ดมีประสิทธิภาพ

ต่อไปนี้คือการ์ดที่มีวิดเจ็ต Image โดยจะแสดงรูปภาพหน้า Landing Page ของเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Google Chat เมื่อผู้ใช้คลิก รูปภาพ เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chat จะเปิดขึ้นในแท็บใหม่

เพิ่มคอมโพเนนต์รูปภาพ

วิดเจ็ต Image คือรูปภาพที่มีการจัดรูปแบบที่จำกัด imageCompentวิดเจ็ต ช่วยให้คุณใช้cropStyleและborderStyleกับรูปภาพได้

ตัวอย่างต่อไปนี้แสดงรูปภาพ 2 รูปในตารางกริด โดยรูปภาพรูปหนึ่ง ถูกครอบตัด

คุณปรับรูปร่างของคอมโพเนนต์รูปภาพได้โดยใช้cropStyle คุณใช้รูปร่างกับรูปภาพได้หลายแบบ ดังนี้

  • ใช้ SQUARE เพื่อครอบตัดเป็นสี่เหลี่ยมจัตุรัส
  • ใช้ CIRCLE เพื่อครอบตัดเป็นวงกลม
  • ใช้ RECTANGLE_CUSTOM เพื่อครอบตัดเป็นรูปสี่เหลี่ยมผืนผ้าที่มีสัดส่วนภาพที่กำหนดเอง เช่น คุณสามารถใช้ RECTANGLE_4_3 เพื่อใช้การครอบตัดสี่เหลี่ยมผืนผ้า ที่มีสัดส่วนภาพ 4:3

ตัวอย่างต่อไปนี้แสดงรูปภาพ 5 รูปในตารางกริดที่มีcropStyle ที่แตกต่างกันซึ่งใช้กับแต่ละรูปภาพ

เพิ่มไอคอน

Iconวิดเจ็ต แสดงไอคอนในตัว หรือไอคอนที่กำหนดเอง คุณเพิ่มไอคอนลงในการ์ดเพื่อทำสิ่งต่อไปนี้ได้

  • แสดงไอคอนแบบสแตนด์อโลน
  • แสดงไอคอนหน้าข้อความที่เกี่ยวข้องเป็นส่วนหนึ่งของวิดเจ็ต DecoratedText
  • แสดงไอคอนเป็นปุ่มแบบอินเทอร์แอกทีฟ ซึ่งเป็นส่วนหนึ่งของวิดเจ็ต ButtonList

ต่อไปนี้คือการ์ดที่ประกอบด้วยคอมโพเนนต์ Icon ที่มีไอคอนในตัว

ตารางต่อไปนี้แสดงรายการไอคอนในตัวที่ใช้ได้กับข้อความในการ์ด

AIRPLANE บุ๊กมาร์ก
BUS CAR
นาฬิกา CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
อีเมล EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
เชิญ MAP_PIN
การเป็นสมาชิก MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR ร้านค้า
ตั๋ว ฝึก
VIDEO_CAMERA VIDEO_PLAY

เพิ่มข้อความลงในการ์ด

ส่วนนี้จะอธิบายวิธีเพิ่มและจัดรูปแบบข้อความในการ์ด

เพิ่มย่อหน้าของข้อความที่จัดรูปแบบแล้ว

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

ตัวอย่างเช่น ข้อความย่อหน้าจะมีการจัดรูปแบบต่อไปนี้

  • แสดงข้อความตัวหนา ขีดเส้นใต้ หรือตัวเอียงด้วยแท็ก HTML <b>, <u>, <i>
  • ลิงก์ไปยังเว็บไซต์ด้วย HTML <a href="https://www.google.com">hyperlinks</a>
  • เพิ่มสีสันด้วย HTML <font color="#ea9999">font tags</font>

วิดเจ็ต TextParagraph แต่ละรายการจะแสดงเป็นย่อหน้าใหม่ และถือได้ว่า คล้ายกับแท็ก <p> ของ HTML

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

เพิ่มย่อหน้าข้อความแบบยุบได้

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

แสดงข้อความพร้อมองค์ประกอบตกแต่ง

วิดเจ็ต DecoratedText จะแสดงข้อความพร้อมเลย์เอาต์และความสามารถที่ไม่บังคับ เช่น

  • แสดง icon หน้าข้อความด้วย startIcon
  • แสดงชื่อก่อนข้อความด้วย topLabel
  • เพิ่มปุ่มที่คลิกได้ด้วย button หรือปุ่มสลับที่เปลี่ยนได้ด้วย switchControl

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

DecoratedText วิดเจ็ตนี้รองรับการจัดรูปแบบ HTML ของข้อความธรรมดา เมื่อตั้งค่าเนื้อหาข้อความของวิดเจ็ตเหล่านี้ ให้ใส่แท็ก HTML ที่เกี่ยวข้อง ดูข้อมูลเพิ่มเติมเกี่ยวกับแท็ก HTML ที่รองรับได้ที่การจัดรูปแบบข้อความในการ์ด

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

แก้ปัญหา

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

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