Changing Toast Layout
layout, New > Layout Resource File, ושם custom_toast עם LinearLayout כשורש. נותנים לו id, בדוגמה linearLayoutToast, והוא אנכי.drawable נוצר shape_toast שהוא rectangle עם גרדיאנט (אפור לכחול, זווית 45), stroke לבן ב-2dp ו-corners של 20dp, ומוצב כ-background.LinearLayout אופקי שמכיל ImageView בגודל 40dp (עם id) ו-TextView של הכותרת, גודל 25sp ו-bold, ממורכז אנכית. מתחתיו TextView של ההודעה.tools:text ו-tools:src: כדי לראות בדיזיינר טקסט ותמונה זמניים, בלי שיוצגו בזמן ריצה, משתמשים ב-namespace בשם tools במקום android (מוסיפים אותו עם Alt+Enter). הוא פועל רק בדיזיינר.drawable נוספו שתי תמונות, error ו-success.Toast.makeText עם this ומשך, בלי הודעה.getLayoutInflater(), וקוראים ל-inflate עם R.layout.custom_toast ועם ה-id של ה-layout.findViewById, ואז setImageResource(R.drawable.success) ו-setText לכותרת ולהודעה (בדוגמה "Last" ו"הורדה הסתיימה בהצלחה").toast.setView(linearLayoutToast), מוסיפים setGravity למרכז ו-show.CustomToast נכתבו successMessage ו-errorMessage, כל אחת עם context, כותרת והודעה, ופונקציה פרטית showMessage שמקבלת גם imageId. שתי הפונקציות הציבוריות קוראות אליה עם R.drawable.success או R.drawable.error. נדרש Activity ולא Context רגיל בגלל getLayoutInflater. מהמסך קוראים ל-CustomToast.successMessage(this, ...) ול-errorMessage.פרקי ההרצאה: Changing Toast Layout
תמלול ההרצאה: Changing Toast Layout
הטקסט המלא של הדקות הראשונות בהרצאה «Changing Toast Layout» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שראינו מה זה טוסט, איך לבצע טוסט ואיך לעצב אותו, בואו נראה איך אנחנו יכולים להגיע לרמה אחרת קצת מבחינת העיצוב על ידי זה שאנחנו פשוט מגדירים layout אחר לגמרי עבור הטוסט.
יכול להיות שאתם רוצים פעם אחת להשקיע ולעצב לעצמכם איזשהו טוסט הרבה יותר מרשים, ומעכשיו אתם יכולים להשתמש בכל מקום בפרויקט עם הטוסט המטורף הזה שפעם אחת אתם בונים.
לצורך כך אנחנו צריכים לבנות layout משלנו ולהחליף את ה-layout הסטנדרטי של הטוסט. אז קודם כל ברגע שאנחנו פותחים פרויקט אנדרואיד אנחנו כמובן רואים שיש לנו פה את ה-activity main layout הזה ואנחנו צריכים להבין שכל layout מאפשר להציג UI על מסך או על חלק ממסך לדוגמה על Toast אז מה שאנחנו רוצים לעשות זה לבנות layout אחר משלנו אז אני לוחץ בבקשה
אם אני פה על תיקיית ה-Layouts הולך ל-New ובוחר layout resource file בואו ניתן לו את השם custom-tost אנחנו רואים שה-root-element זה Linear-Layout זה מתאים לנו בואו נבצע אוקיי ויש לנו עכשיו שני לייאוטס, אחד המיין אקטיביטי ואחד קאסטום טוסט.
בואו נשים את ה-XML שלו ונראה אותו פה בצד. נסדר טיפה את הלייאוט, יש לנו כאן את ה-Weed ואת ה-Height, יש לנו את ה-Orientation, נביא אותו למטה, שתמיד ה-Weed וה-Height יהיו ראשונים כי הם שדות חובה.
ומה שאנחנו רוצים לעשות זה לעצב את הלייאוט הזה כך שהוא יתאים לכל הטוסטים שנרצה. מה שאנחנו רוצים לעצב זה לא רק הודעה אלא בוא נניח שאנחנו רוצים איזושהי כותרת, איזושהי הודעה עצמה מתחת לכותרת וליד הכותרת אפילו תמונה.
את כל הדברים האלה אין בטוסט רגיל אז אנחנו פעם אחת בונים את הלייאוט הזה ומעכשיו בכל טוסט שלנו נוכל להציג את הטוסט המרשים הזה תמונה, כותרת ותוכן.
אז בואו נראה איך אנחנו עושים את זה. דבר ראשון בואו ניתן כאן איזשהו ID כי אנחנו נצטרך אותו אחר כך. בואו נקרא לזה LinearLayoutTost בנוסף יש לנו פה את הוורטיקל ואנחנו רוצים גם להגדיר Background אבל אם אנחנו כבר מתעסקים עם עיצובים ורוצים לבצע משהו מרשים אז בואו ניקח ונעצב איזושהי שייפ שבעבר ראינו שזה ניתן
לביצוע עם איזשהו גרדיאנט כזה. אז נלך לדקיית ה-Drawable, New, Drawable Resource File וניתן פה את השם ShapeTost, נשנה את הסלקטור ב-shape, נגדיר שה-shape היא ריקטנגל כי ה-tost הוא ריקטנגל.
יכלנו גם לקחת כל צורה אחרת. בואו ניקח גרדיאנט, נגדיר כאן Start, Color, נגדיר כאן End, Color, כמובן אנחנו הולכים תכף לשנות את הצבעים, נגדיר כאן Angle, 45 סיימנו את הגרדיאנט אנחנו רוצים להגדיר סטרוק כך לבן
בגודל 2 dp ואנחנו רוצים להגדיר קורנר רדיוס 20 dp ובואו נבחר את הצבעים נגדיר שהסטארט קולור הוא סוג של איזשהו אפור ובואו ניקח אנד קולור משהו כזה סוג של כחול כזה וכעת אנחנו רוצים לקחת את הזאת ולהגדיר אותה כ-Background עבור ה-Layout של הטוסט וזה נקרא Shape Tost. אז קודם כל
אנחנו כבר רואים שה-Layout הזה מתחיל לקבל צורה מעוצבת כזאת וכל מה שנשאר לנו לעשות זה להגדיר את הרכיבים בתוכו.
אז אנחנו רוצים שיהיה לנו תמונה ובסמוך אליה בצורה אופקית אנחנו רוצים את הכותרת ומתחת לשניהם אנחנו רוצים את ההודעה עצמה. לכן בואו ניקח Linear Layout, נגדיר ראפ קונטנט כדי ששניהם יהיו אחד ליד השני, יכלנו גם לקחת כל לאוט אחר.
ניקח אימג' view, נגדיר שהוויד זה בעצם 40 dp, נגדיר it 40 dp, ניקח תמונה כזאתי לא גדולה, ניתן id image view title, ניתן מרג'ין וניתן איזה עשרה dps בצורה כזאת.
ליד התמונה אנחנו רוצים טקסט view, ניקח wrap-content, ניקח ID, טקסט view-title, מרג'ין, רוויטי, בואו ניתן סנטר ורטיקל שיסתדר בדיוק עם התמונה, טקסט סייז, איזה 25 SP,
טקסט סטייל, בואו ניתן לו בולד ויש לנו כרגע את הטקסט. לאחר מכן אנחנו רוצים בעצם עוד טקסט view, בואו ניקח את כל הטקסט view הזה ונשים אותו כאן מתחת גם הוא ראפ קונטנט ה-id שלו יהיה טקסט view message לאחר מכן יש לנו סנטר הוריזונטל כאן ו-25 סבבה עכשיו אנחנו לא בעצם רואים מה בעצם
זה יצא אז בכדי לראות מה אנחנו רואים כאן כדאי שניתן איזה שהם טקסטים זמניים כאלה בואו רק נחליף את זה במקום match parent ל-wrap-content שהוא יתפוס בדיוק כמה שהוא צריך וכרגע הוא לא תופס הרבה, הוא תופס לי רק את התמונה טיפה.
אז מה שאנחנו רוצים לעשות זה לתת איזה שהם ערכים לטקסטים. כאן אנחנו רוצים לתת header, טקסט header וכאן אנחנו רוצים לתת טקסט מסג'.
מה הבעיה עם מה שעשיתי עכשיו? הבעיה היא שהערך טקסט זה באמת ערך אמיתי שאנחנו רוצים לתת, אבל אנחנו לא באמת רוצים להציג את המחוזת header.
כל מה שאנחנו רוצים לעשות זה רק בדיזיינר לראות איפה זה נמצא, כנ"ל התמונה. פה אנחנו רוצים להציב איזושהי תמונה, ואנחנו רוצים מבחינת הדיזיינר לראות רק איך זה נראה.
עכשיו, אם אנחנו משתמשים עם התכונה טקסט, זה אומר שכאשר ה-Layout הזה יהפוך להיות אובייקט אמיתי, אז אנדרואיד באמת תשים בתוכו את המילה "Header", ואז תחליף אותה למילה שלנו.
אנחנו לא רוצים שאנדרואיד בכלל ישים את המילה "Header" כאן בכותרת, ואת המילה "Message" אנחנו רק רוצים לראות את זה בדיזיינר.
ולכן יש לנו כאן יכולת להשתמש במשהו שנקרא "Tools". אולי ננסה לעשות את זה כאן, "Tools" בצורה כזאת. עכשיו המערכת אומרת לי שהיא לא מכירה את זה, אז אנחנו נצטרך ללחוץ על Alt-Enter ואז מה שקרה ושהתווסף לנו ה-Namespace הזה פה למעלה ו-Tools זה ניימספייס שאחראי אך ורק על הדיזיינר וברגע שכתבנו לו
tools.txt במקום android.txt אז עדיין אנחנו רואים כאן את ההדר אבל שום דבר שקשור לזמן הריצה לא יתבצע כאן. ה-Tools מיועד אך ורק לדיזיינר וההדר הזה נראה רק בדיזיינר ולא קיים בזמן הריצה.
בואו נשים את זה גם כאן, tools, בצורה כזאת, ושחררנו את המחרוזות האלה מזמן הריצה ואנחנו כן רואים אותן בזמן הפיתוח. בואו נשים כאן גם תמונה והכנתי כאן בדסטופ שתי תמונות, הרור וסקסס במיוחד עבור טוסטים להצגת הודעות הצלחה והודעות שגיאה.
אז בואו נחזור לאנדרואיד סטודיו, נלך לדראבל ונדביק בתוכו את שתי התמונות. הנה אנחנו רואים אותם וכעת בואו ניגש לתמונה ובמקום לתת לה src in איזושהי תמונה, רציתי לתת לה את ה success אז במקום android אנחנו מחליפים את זה לתולס ואנחנו עדיין רואים את התמונה אבל בזמן הריצה התמונה הזאת לא תינתן ואז תוחלף אלא רק התמונה שנחליט
בזמן הריצה היא היחידה שתינתן. אז הנה אנחנו רואים טוסט ממש מעוצב בצורה יפה והשאלה היא איך אנחנו לוקחים את הלייאוט הזה שבנינו ואין לו שום קשר לשום טוסט ופשוט מחליפים את הלייאוט הסטנדרטי של הטוסט בלייאוט הזה ולא רק זה גם
קובעים מהי התמונה שאנחנו רוצים מהי הכותרת ומהי ההודעה. לצורך כך בואו נחזור לאקטיביטי מיין יש לנו פה את הנחצן הזה בואו נגדיר כאן show success toast on-click show success toast ניגש לקוד ומה שאנחנו רוצים לעשות זה לבנות אובייקט toast זה הדבר הראשון על ידי הפונקציה make text this זה אנחנו אנחנו לא
רוצים לתת כרגע הודעה מפני שאנחנו לא רוצים שההודעה הזאת תלך ללאוט הדיפולטי של הטוסט אלא אנחנו רוצים ללאוט שלנו אנחנו כן רוצים לתת אורך ומה שאנחנו רוצים לעשות זה להתחיל להגדיר את ה-Layout.
אז קודם כל בכדי לקחת קובץ Layout ולגרום לו להיות ממש אובייקט UI שמוצג על פני משהו אנחנו צריכים להשתמש במחלקה שנקראת Layout Inflator לבנות אובייקט Layout Inflator. Inflator זה בא מהמונח שזה בעצם לנתח משהו מה הרעיון layout זה רק קובץ xml ואם אנחנו רוצים לקחת את המידע הטקסטואלי הזה של קובץ הxml את התוכן של הקובץ xml ולגרום לו להיות באמת
אובייקטים אמיתיים ויזואליים שרואים אותם אז הקונספט באנדרואיד אומר שאנחנו צריכים לבצע מעין הוויכוח של ה-XML וזה בעצם ההפיכה של כל האלמנטים שנמצאים פה לאיזשהו אובייקט ויזואלי אמיתי.
הרכיב שעושה את זה נקרא Layout Inflator. עכשיו, אנחנו לא בונים אובייקט חדש ל-Layout Inflator, אנחנו צריכים לקחת איזשהו Layout Inflator מהמערכת.
למי יש Layout Inflator? ל-Activity. זה אחד מהשירותים של ה-Activity או של ה-Context. והשירות הזה נקרא getLayoutInflator אז הפונקציה הזאת getLayoutInflator מחזירה לנו אובייקט שמסוגל לנפח קבצי XML בכדי להפוך אותם ל-Layout אמיתי.
ה-Layout שבנינו נקרא LinearLayout אז בואו נבנה LinearLayoutPost שווה בדיוק ה-Layout שבנינו ואנחנו רוצים לגשת ל-LayoutInflator ושמנפח לנו את ה-Layout ולקרוא לפונקציה inflate בשביל לנפח את ה-Layout.
הדבר הראשון שהוא שואל אותנו ואוקיי איזה ליאאוט אתם רוצים לנפח, זה יהיה r.Layout; וקראנו לו custom-tost. הדבר השני שהוא שואל אותנו זה אוקיי מה ה-ID