עיצוב המבנה של כרטיס או תיבת דו-שיח

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

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

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

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

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

הצגת כרטיסים ותיבות דו-שיח בעמודות

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

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

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

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

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

  • באינטרנט, העמודה השנייה מופיעה אם רוחב המסך קטן מ- או שווה לו 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 לא מוגדר, הווידג'טים בעמודה מיושרים למעלה.

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

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

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

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

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

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

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

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

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

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

הגדרת המיקום שבו טקסט יופיע עם תמונה ברשת

שדה אחד (gridItemLayout) מאפשרת להגדיר בתוך כל gridItem אם הטקסט מופיע מעל או מתחת של הפריט ברשת. אם הערך של gridItemLayout לא מוגדר, ברירת המחדל של הטקסט היא יופיעו מתחת לפריט ברשת.

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

הוספת גבול לרכיבים בממשק המשתמש

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

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

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

פתרון בעיות

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

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