PracticU

Transition Drawable

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Transition Drawable
מילון מושגים:
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
XML - שפת סימון לייצוג נתונים מובְנים בעזרת תגיות, המשמשת להחלפת מידע בין מערכות ולקובצי הגדרות.
אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.
View - רכיב שאחראי על הצגת המידע למשתמש (התצוגה) בדפוס MVC. גם טבלה וירטואלית מבוססת שאילתה במסד נתונים.
בוליאני - סוג נתונים שיכול לקבל אחד משני ערכים בלבד: אמת (true) או שקר (false).
מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

Transition Drawable
Transition Drawable מאפשר מעבר הדרגתי ונעים בין שני מראות של רכיב, למשל בין שתי צורות או שני צבעים של לחצן. ההרצאה בונה לחצן מתג שמחליף מראה במשך שנייה, ומראה איך לשמור את מצבו של כל מתג בנפרד בעזרת tag.
השלבים העיקריים
1. שני shape: יוצרים shape_regular_button (מלבן עם גרדיאנט משחור לכחול, גבול ופינות עגולות) ו-shape_pressed_button שמועתק ממנו, עם צבע סיום צהוב, זווית 45 וגבול שחור.
2. קובץ המעבר: יוצרים קובץ בתיקיית drawable שבו תגית transition במקום selector, ובתוכה שני item עם drawable: הראשון הרגיל והשני הלחוץ.
3. ToggleButton: זה לחצן שנשאר לחוץ עד הלחיצה הבאה, ולכן רואים בו היטב את שני המצבים. קובעים לו textOn ו-textOff (בדוגמה "Turn off sounds" ו-"Turn on sounds"), textAllCaps="false" ואת קובץ המעבר כ-background.
4. מפעילים מהקוד: את המעבר אי אפשר להפעיל מה-XML. באירוע הלחיצה לוקחים את view.getBackground() כ-TransitionDrawable. מפעילים startTransition(1000) למעבר קדימה, ו-reverseTransition(1000) להחזרה. הערך 1000 הוא אלפית שנייה, כלומר שנייה אחת.
5. בעיית המצב ההתחלתי: כשמצב ההתחלה היה מוגדר הפוך, הלחיצה הראשונה לא עבדה כמו שצריך. התיקון היה להתחיל מהערך הנכון.
6. כמה מתגים ביחד: בדוגמה יש שלושה מתגים: צלילים, מיקרופון ואוזניות. במקום דגל בוליאני לכל אחד משתמשים ב-tag של הרכיב, מאפיין מסוג Object שהמערכת לא משתמשת בו ושמיועד למתכנת. מציבים בו true כמצב התחלתי.
7. בדיקה לפי ה-tag: קוראים view.getTag(), ממירים למחרוזת ואז לבוליאני. אם הערך true מפעילים startTransition ומציבים setTag עם false. אחרת מפעילים reverseTransition. כך כל מתג שומר את מצבו בעצמו, ולוחצים עליהם בסדר כלשהו ללא תלות.
שימו לב
- ה-tag יכול להחזיק אובייקט אחד בלבד, אך זה יכול להיות גם אובייקט מורכב.
- יתרון המעבר הוא שהשינוי נמשך זמן ונראה כאנימציה.
אחרי ההרצאה אפשר להגדיר מעבר בין שני מצבים בקובץ XML, להפעיל אותו מהקוד, ולנהל כמה לחצנים עם tag בלי דגלים נפרדים.
השיעור הבא בקורס: Vector Drawable - SVG

פרקי ההרצאה: Transition Drawable

  1. 00:00

    מהו Transition Drawable

  2. 00:41

    יצירת Shape ללחצן רגיל

  3. 02:08

    יצירת Shape ללחצן לחוץ

  4. 03:14

    בניית קובץ Transition ל-ToggleButton

  5. 04:35

    הגדרת ToggleButton ב-Layout

  6. 07:00

    הפעלת המעבר מקוד Java

  7. 08:13

    startTransition והגדרת משך המעבר

תמלול ההרצאה: Transition Drawable

הטקסט המלא של הדקות הראשונות בהרצאה «Transition Drawable» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:16

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

  3. 00:34

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

  4. 01:11

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

  5. 02:00

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

  6. 02:46

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

  7. 03:12

    בואו נצרף אותו, נקרא לו Transition ונשתמש בו עבור Toggle Button. Toggle Button זה בעצם לחצן שאנחנו יכולים ללחוץ עליו, אבל הלחצן ממשיך להישאר לחוץ עד הלחיצה הבאה ואז הוא נראה לא לחוץ.

  8. 03:33

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

  9. 03:49

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

  10. 04:05

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

  11. 04:35

    כעת אנחנו יכולים לגשת למיין אקטיביטי וכאן להגדיר את ה-Taggle בטל. אז בואו ניתן לו Match Parent כ-Weed, Wrap Content כ-Height, והנה יש לנו כאילו לחצן רגיל אבל זה Taggle, Taggle זה מעין מתג כזה, On/Off.

  12. 04:54

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

  13. 05:23

    אז בואו נגדיר שזה יהיה turn off sounds ואנחנו רוצים טקסט on, off turn on sounds. זאת אומרת שאם אנחנו נמצאים במצב של on אנחנו רוצים שיהיה כתוב turn off, ואם אנחנו נמצאים במצב של off אנחנו רוצים שיהיה כתוב turn on.

  14. 05:47

    שינוי המצב טקסט all caps false, כדי שהכתב יהיה כתב רגיל ולא Capital Letters ולבסוף Background, ה-Background שאנחנו רוצים נמצא בדרובול והוא נקרא Transition Toggle Button, אחרי שקראתי לו טאבל, בואו נשנה אותו Shift F6 Toggle Button Factor,

  15. 06:20

    הכל בסדר. עכשיו אם אנחנו מסתכלים אנחנו רואים שיש לנו פה את הצבע הכחול הזה, ובעצם זה הצבע הראשון שהוגדר, בואו נסתכל עוד פעם על ה-transition toggle-button ונראה שזה הצבע הראשון שהוגדר, אנחנו רואים פה-shape-regular-button בואו ניגש ל-shape-regular-button ונראה שזה בעצם הגרדיאנט הזה, הפרסט זה הסוג

  16. 06:49

    של הצהוב השני שהגדרנו. כאשר אנחנו רוצים לבצע את ההפיכה של ה-transition אנחנו יכולים לעשות את זה אך ורק דרך הקוד ולא דרך ה-XML.

  17. 07:03

    זה אומר שאנחנו צריכים עכשיו לגשת ל-on click ולבחור פה אירוע click, toggle button, נגיע לקוד וכאן אנחנו בעצם רוצים להחליף את המצב שלו.

  18. 07:28

    אז השיטה הפשוטה ביותר להשיג את הפעילות הזאת זה לבנות איזשהו משתנה בולעני, דגל מסוים, בוא נניח שהדגל הזה בתור התחלה יהיה false וכאן לבדוק במידה והדגל רו שאפשר כמובן להשאיר את זה כ-if flag בצורה כזאת אז אנחנו רוצים עכשיו לשנות את המצב לצורך כך אנחנו צריכים משתנה מסוג transition droble ניגש ל-view שזה אותו

  19. 08:27

    toggle button שהפעיל אותנו וניגש וניקח את ה-background שלו ומה שאנחנו רוצים לעשות עכשיו זה זה טרנזישן דרובל נקודה סטארט טרנזישן ואנחנו קובעים כמה זמן אנחנו רוצים שהשינוי ייקח.

  20. 08:47

    1000 זה אומר שנייה אחת ל-1000 מיליסקונט אלס,

לקורס המלא: קורס פיתוח אפליקציות לאנדרואיד

ההרצאה הקודמת: State Drawable

ההרצאה הבאה: Vector Drawable - SVG

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון