PracticU

Material Design -Transitions

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Material Design -Transitions
מילון מושגים:
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.

Material Design -Transitions
כשעוברים בין מסכים באפליקציה, אפשר להפוך את המעבר לנעים וחלק בעזרת Transitions של Material Design. השיעור מדגים את זה במעבר בין שני Activities עם רכיבים דומים.
השלבים העיקריים
1. שמות למעבר: לכל רכיב שרוצים להנפיש נותנים Transition Name. בדוגמה לתמונה ניתן השם Header Image, וללחצן השם Fab Button.
2. אותם שמות במסך היעד: ברכיבים המקבילים במסך השני נותנים את אותם שמות, כדי שיהיה קל לזכור ולחבר ביניהם.
3. הגדרת המעבר: בלחיצה על הכפתור מחברים את הרכיב במקור לשם היעד, ובוחרים את סוג הטרנזישן הרצוי. המערכת מבצעת את המעבר.
4. חזרה למסך הקודם: בחזרה למסך הראשון קוראים לפונקציה onBackPressed.
בהרצה רואים שהמעבר נראה רך יותר מהחלפה חדה של מסכים, בעיקר כשהרכיבים בשני המסכים דומים.

פרקי ההרצאה: Material Design -Transitions

  1. 00:00

    מעברים בין מסכים עם Transitions

  2. 00:39

    מעבר בין שני Activities עם אפקט

  3. 01:16

    שיוך Transition Name לרכיבי המקור והיעד

תמלול ההרצאה: Material Design -Transitions

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

  1. 00:02

    חלק מכלי העיצוב של ה-Material Design מדברים על מעברים, כלומר Transitions. איך אנחנו יכולים לעבור בין UIs שונים או בין מסכים שונים?

  2. 00:15

    בדוגמה הזאת אנחנו רואים שיש לנו Activity Main וב-Activity Main יש לנו פה את התמונה למעלה, את ה-Cover הזאת ויש לנו לחצן שהוא מאוד דומה ל-Floating Action Button שתמיד התעסקנו איתו והוא נמצא פשוט כאן.

  3. 00:31

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

  4. 00:54

    אז יש כל מיני אפקטי טרנזישן שונים בדוגמה הזאת אנחנו מציגים אחד מהם אבל העיקרון שעומד מאחורי זה זה שאנחנו פשוט נותנים לרכיב Transition Name, לדוגמה לתמונה נתנו Header Image, לבטון נתנו Fab Button, ובדיוק את אותם Transitions אנחנו נותנים גם לרכיבי היעד, בכדי שיהיה לנו יותר קל לזכור,

  5. 01:20

    תמונה הזאת מקושרת עם ה-Header Image, הבטון מקושר עם ה-Fab Button, ועכשיו כאשר לוחצים על הכפתור אנחנו פשוט משייכים תמונת מקור לטרנזישן name יעד ולחצן מקור לטרנזישן name יעד ונותנים לו את הטרנזישן הרצוי והוא מבצע את זה.

  6. 01:42

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

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

ההרצאה הקודמת: Material Design - Card View

ההרצאה הבאה: הסבר על Android Wear

הרצאות קשורות מקורסים אחרים

  • הסבר על Material UI
  • Page Object Design - חלק 1
  • פייטון design pattern factory

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

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