יצירת כרטיסים לאפליקציות ב-Google Chat

הדף הזה מתאר איך לבנות את הרכיבים והמבנה של הכרטיס. הכרטיסים הם משתמשים הממשקים שבהם אפליקציות Google Chat יכולות להשתמש כדי להציג ולאסוף מידע ממשתמשי Chat. אפשר ליצור אפליקציות ל-Chat ולהציג כרטיסים בממשקים הבאים:

  • הודעות מכילים כרטיס אחד או יותר.
  • דף הבית, שהוא כרטיס שמופיע בכרטיסייה דף הבית ישירות הודעות באפליקציית Chat.
  • תיבות דו-שיח, שהן כרטיסים שנפתחים בחלון חדש מההודעות ומדפי הבית.

בדף הזה נסביר על הרכיבים הבאים בכרטיס:

  • כותרות, שכוללות בדרך כלל את השם של כרטיס או כרטיס .
  • קטעים, שמהווים את הגוף הראשי של הכרטיס, כולל ווידג'טים ורכיבים אינטראקטיביים אחרים. בכרטיס אפשר להוסיף לכרטיס מבנה נוסף, כולל עמודות ורשתות.
  • כותרות תחתונות קבועות, שמופיעות בחלק התחתון של תיבות דו-שיח להצגת רכיבים קבועים בממשק המשתמש, כמו לחצנים.

דרישות מוקדמות

אפליקציית Google Chat שמופעלת בה תכונות אינטראקטיביות. כדי ליצור את אפליקציית Chat האינטראקטיבית, תוכלו להשלים את אחד מהמדריכים הבאים למתחילים בארכיטקטורת האפליקציות שבה רוצים להשתמש:

אפשר להשתמש בכלי ליצירת כרטיסים כדי לעצב מסרים וממשקי משתמש באפליקציות ל-Chat ולראות תצוגה מקדימה שלהם:

לפתיחת הכלי ליצירת כרטיסים

הוספת כותרת

הווידג'ט CardHeader מייצג כותרת של כרטיס. כותרות יכולות לכלול כותרת, כותרת משנה ותמונת דמות של הכרטיס.

הדוגמה הבאה היא של CardHeader:

הוספת קטע אחד או יותר בכרטיסים

הווידג'ט CardSection הוא מאגר ברמה גבוהה בתוך כרטיס. השתמשת בכרטיס כדי לקבץ ווידג'טים בתוך כרטיס. עבור כל קטע בכרטיסים, תוכלו לכלול את הנתונים כותרת וווידג'ט אחד או יותר.

הדוגמה הבאה היא של CardSection שמכיל שני textParagraph ווידג'טים:

הוספת קו מפריד אופקי בין ווידג'טים

ווידג'ט divider מציגה קו אופקי באורך של כרטיס בין ווידג'טים בערימה אנכית. הקו הוא קו מפריד חזותי שעוזר המשתמשים מבחינים בין ווידג'ט אחד לאחר, וכך קל יותר לסרוק כרטיסים. ולהבין אותם.

הכרטיס הבא מכיל את הווידג'ט divider בין סוגים אחרים של ווידג'טים:

הוספת עמודות

ווידג'ט columns מציגה עד 2 עמודות בכרטיס. אפשר להוסיף ווידג'טים לכל עמודה; הווידג'טים מופיעים לפי הסדר שבו הם הופיעו שצוין. כדי לכלול יותר מ-2 עמודות, או כדי להשתמש בשורות, צריך להשתמש בווידג'ט grid.

הגובה של כל עמודה נקבע על סמך העמודה הגבוהה יותר. לדוגמה, אם העמודה הראשונה גבוהה מהעמודה השנייה, בשתי העמודות יש של העמודה הראשונה. כי כל עמודה יכולה להכיל מספר שונה. של ווידג'טים, לא ניתן להגדיר שורות או ליישר ווידג'טים בין העמודות.

בדוגמה הבאה מוצג כרטיס עם ווידג'ט של columns שכולל שתי עמודות טקסט. כדי להציג רק את פריסת העמודות ולכווץ את הקוד לדוגמה, לוחצים על כיווץ. כשהרווח מוגבל, כמו בדוגמה הבאה, העמודה השנייה מגיעה מתחת לעמודה הראשונה.

הגדרת רוחב העמודות

העמודות מוצגות זו לצד זו. אפשר להתאים אישית את הרוחב של כל עמודה באמצעות השדה horizontalSizeStyle. אם רוחב המסך של המשתמש צר מדי, העמודה השנייה תופיע מתחת first:

  • באינטרנט, העמודה השנייה מופיעה אם רוחב המסך קטן מ- או שווה לו 480 פיקסלים.
  • במכשירי iOS, העמודה השנייה מתחילה להתפרס אם רוחב המסך קטן מ- או שווה ל-300 נק'
  • במכשירי Android, העמודה השנייה גולשת אם רוחב המסך קטן מ- או שווה ל-320dp.

בדוגמה הבאה מוצג כרטיס עם ווידג'ט של columns שכולל שתי עמודות טקסט עם 4 פריטים בעמודות. לכל פריט בעמודות יש הוספת את horizontalSizeStyle כדי לשנות את שטח הטקסט ממלא כל עמודה:

  • בפסקת הטקסט הראשונה משתמשים ב-FILL_MINIMUM_SPACE כדי למלא עד 30% של רוחב הכרטיס.
  • בפסקת הטקסט השנייה נעשה שימוש ב-FILL_AVAILABLE_SPACE כדי למלא את רווח ברוחב הכרטיס. בדוגמה הזו, הוא ממלא 70% משטח הכרטיס רוחב.
  • בפסקת הטקסט השלישית לא מוגדר horizontalSizeStyle, ולכן היא ברירת המחדל כדי למלא את השטח הזמין בכרטיס.
  • בפסקת הטקסט הרביעית משתמשים ב-FILL_MINIMUM_SPACE כדי למלא עד 30% של רוחב הכרטיס.

הגדרת היישור האופקי של עמודה

ניתן ליישר ווידג'טים אופקית לשמאל, לימין או למרכז של עמודה באמצעות שמגדירים את השדה horizontalAligment. אם הטווח של horizontalAlignment לא מוגדר, הווידג'טים מיושרים בעמודה שמצד ימין.

הדוגמה הבאה מיישרת טקסט בתוך עמודה משמאל:

הדוגמה הבאה מיישרת טקסט בתוך עמודה במרכז:

בדוגמה הבאה מתבצעת יישור אופקי של טקסט בתוך עמודה מימין:

הגדרת היישור האנכי של עמודה

ניתן ליישר ווידג'טים במאונך לחלק העליון, התחתון או למרכז של עמודה באמצעות שמגדירים את השדה verticalAlignment. אם השדה verticalAlignment לא מוגדר, הווידג'טים בעמודה מיושרים למעלה.

בדוגמה הבאה מתבצעת יישור אנכי של טקסט בתוך עמודה לחלק העליון:

בדוגמה הבאה מתבצעת יישור אנכי של טקסט בתוך עמודה במרכז:

בדוגמה הבאה מתבצעת יישור אנכי של טקסט בתוך עמודה בחלק התחתון:

הוספת רשת כדי להציג אוסף של פריטים

ווידג'ט grid מציגה רשת עם אוסף של פריטים. הרשת תומכת בכל מספר של עמודות ופריטים. מספר השורות נקבע לפי פריטים חלקי העמודות. ברשת עם 10 פריטים ו-2 עמודות יש 5 שורות. רשת עם 11 פריטים ו-2 יש 6 שורות.

הווידג'ט תומך בהצעות שעוזרות למשתמשים להזין נתונים אחידים פעולות שמתבצעות לשינוי, Actions שפועלות כשמתרחש שינוי בשדה של קלט הטקסט, כמו משתמש שמוסיף או מחיקת הטקסט.

בדוגמה הבאה מוצגת רשת בת 2 עמודות עם פריט אחד:

כדי להגדיר היכן טקסט יופיע עם תמונה ברשת, ניתן לציין את השדה gridItemLayout. השדה הזה מאפשר להגדיר אם הטקסט מופיע מעל או מתחת של הפריט ברשת. אם הערך של gridItemLayout לא מוגדר, ברירת המחדל של הטקסט היא יופיעו מתחת לפריט ברשת.

הדוגמה הבאה היא רשת בת שלוש עמודות עם טקסט ותמונה בכל רשת. הרשת הראשונה מגדירה טקסט שיופיע מעל התמונה, והרשת השנייה מגדירה שהרשת השלישית מגדירה טקסט שיופיע מתחת לתמונה, והרשת השלישית לא מגדירה המיקום של הטקסט.

הוספת גבול לרשת או לעמודה

לפריטים שמופיעים בווידג'ט column או grid, ניתן להוסיף גבול ל- את רכיבי ממשק המשתמש האלה באמצעות הגדרה שדה אחד (borderType) וגם השדה borderStyle. אם לא הוגדר שדה borderStyle, ברירת המחדל היא ללא גבול. אפשר צריך להגדיר borderType שיחול על כל הפריטים בווידג'ט או להחיל את הסגנון לכל פריט בווידג'ט.

הדוגמה הבאה היא רשת של 2 עמודות עם תמונה בכל רשת שבה סוג הגבול, הסגנון והצבע הוגדרו שיחולו על כל הפריטים בתוך רשת.

הדוגמה הבאה היא רשת בת 3 עמודות עם תמונה בכל רשת. סגנון וסוג גבול מוגדרים בנפרד. הראשון לתמונה יש גבול מוגדר כ-STROKE. לתמונה השנייה יש גבול מוגדר כ- NO_BORDER לתמונה השלישית לא מוגדר גבול.

CardFixedFooter הווידג'ט מייצג את הכותרת התחתונה של הודעת דו-שיח שנשלחה על ידי אפליקציה ל-Chat. בכותרת התחתונה אפשר להוסיף לחצן ראשי ולחצן משני.

הווידג'ט CardFixedFooter זמין רק עבור תיבות דו-שיח.

הדוגמה הבאה היא לווידג'ט CardFixedFooter שיש בו שני לחצנים:

פתרון בעיות

כשאפליקציית Google Chat או אפליקציית Google Chat הפונקציה card מחזירה שגיאה, בממשק של Chat מוצגת ההודעה "משהו השתבש". או "לא ניתן לעבד את הבקשה שלך". לפעמים בממשק המשתמש של Chat לא מציגה הודעות שגיאה, אבל אפליקציית Chat או והכרטיס מפיק תוצאה לא צפויה: לדוגמה, הודעה בכרטיס יופיעו.

יכול להיות שלא תופיע הודעת שגיאה בממשק המשתמש של Chat, אבל יש הודעות שגיאה תיאוריות ונתוני יומן זמינים כדי לעזור לכם לתקן שגיאות כשמופעלת רישום שגיאות ביומן של אפליקציות ל-Chat. כדי לקבל עזרה בצפייה: לניפוי באגים ולתיקון שגיאות: פתרון בעיות ותיקון שגיאות ב-Google Chat