PracticU

Material Design - Card View

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

Material Design - Card View
Material Design - Card View מציג את רכיב Card View, שמאפשר להציג כרטיסים עם הצללה, ובתוכם כל תוכן שרוצים. בהמשך מוצגת גם אנימציה שמופעלת בלחיצה על הכרטיס.
השלבים העיקריים
1. התלות: מוסיפים את ספריית card view לפרויקט.
2. הכרטיסים: בדוגמה יש ארבעה כרטיסים. בכל כרטיס יש Frame Layout עם תמונה וטקסט, והכרטיסים יכולים להיות מסובבים או מונחים אחד על השני.
3. Card Elevation: גובה ההצללה של כל כרטיס מסמן כמה הוא גבוה מהכרטיסים האחרים ומהמשטח, בהתאם לעקרון של Material Design.
4. אנימציה בלחיצה: בלחיצה על הכרטיס מופעלת אנימציה שמזיזה את ה-translation z מ-2 dp ל-10 dp וחזרה, כך שנראה שהכרטיס מתרומם.
5. אירוע קליק: לכרטיס אפשר לחבר פעולה, למשל הצגת הודעה.
בסיום ההרצאה הסטודנט יודע להוסיף כרטיסים עם הצללה ותוכן חופשי לפרויקט, ולחבר להם אנימציית לחיצה.
השיעור הבא בקורס: Material Design -Transitions

פרקי ההרצאה: Material Design - Card View

  1. 00:00

    הצגת רכיב Card View ומאפייניו

  2. 00:40

    שימוש ב-CardView והוספת Dependency

  3. 01:18

    הרצה ובדיקת אפקט ההצללה בלחיצה

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

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

  1. 00:02

    רכיב נוסף שהתווסף במטריאל דיזיין זה ה-Card View. ה-Card View מאפשר פשוט להציג כרטיסים ובתוכם כל תוכן שאנחנו רוצים.

  2. 00:16

    כאן יש לנו ארבעה Cards View כאלה ואנחנו כמובן יכולים גם לסובב אותם, לשים אותם אחד מעל השני, יש לכל אחד גם אפשרות להצללה, Card Elevation זה בדיוק מה שראינו במסמך ה-Material דיזיין של כמה הוא גבוה מקארד אחר ובתוך כל קארד אנחנו יכולים להכניס כל תוכן שאנחנו רוצים, לדוגמה בכל כרטיס יש לנו פה Frame

  3. 00:44

    Layout עם Image Layout ו-Text View וזה בעצם מה שאנחנו רואים על כל אחד מהכרטיסים. לצורך השימוש ברכיב הזה אנחנו צריכים להוסיף Dependency וה-Dependency שאנחנו צריכים להוסיף זה פשוט card view מקודם הוספתי אותו כאן הנה הוא פה card view.

  4. 01:06

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

  5. 01:29

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

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

ההרצאה הקודמת: Material Design - Tabbed Activity

ההרצאה הבאה: Material Design -Transitions

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

  • הסבר על Material UI
  • כניסה ל-Windows עם Smart Card
  • VIEW עם Check
  • Debug View

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

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