PracticU

Material Design - Navigation Drawer

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Material Design - Navigation Drawer
מילון מושגים:
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
Activity - ב-Android, רכיב שמייצג מסך יחיד של האפליקציה שאיתו המשתמש מתקשר.
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.
Material Design - Navigation Drawer
הרכיב Navigation Drawer הוא תפריט צדדי שנפתח מתוך האפליקציה ומציג אפשרויות ברמת האפליקציה כולה. בפרויקט לדוגמה רואים איך בונים אותו מתוך ה-Activity הראשי.
השלבים העיקריים
1. Drawer Layout: ה-Activity הראשי עטוף ב-Drawer Layout, והוא מכיל את ה-Navigation View ואת ה-include של App Bar Main.
2. App Bar Main: כאן נמצאים ה-Coordinator Layout, ה-App Bar Layout וה-Toolbar, יחד עם ה-Floating Action Button, ושם מוכנס התוכן של האפליקציה.
3. Header: בחלק העליון של ה-Navigation View יש header נפרד, שמוצג מעל התפריט ואפשר לעצב אותו בנפרד.
4. פתיחה וסגירה: לחיצה על התפריט הרגיל (Options Menu) פותחת את ה-Navigation Drawer, והוא נסגר שוב בהמשך.
5. אירועי בחירה: כל אפשרות בתפריט מפעילה את האירוע שלה בקוד, בדומה לכל לחצן אחר.
התפריט הצדדי מתאים כשצריך לתת למשתמש גישה קבועה לאפשרויות כלליות של האפליקציה.
השיעור הבא בקורס: Material Design - Tabbed Activity

פרקי ההרצאה: Material Design - Navigation Drawer

  1. 00:00

    מבנה Navigation Drawer בפרויקט הדוגמה

  2. 00:40

    שילוב Coordinator Layout וה-App Bar

  3. 01:15

    כותרת התפריט והפתיחה והסגירה שלו

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

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

  1. 00:02

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

  2. 00:17

    בואו נפתח את הפרויקט הזה ונראה שיש לנו כאן סדרה של לייאוטס. קודם כל ה-Activity Main מכיל כאן איזשהו Drawer Layout ויש לנו פה את ה-Navigation View, שזה הרכיב של ה-Navigation שאנחנו תכף הולכים לראות, ויש לו פה את ה-Include שמאפשר להכיל בתוכו את ה-Content הנוסף שלנו.

  3. 00:43

    מה שאנחנו רואים שהוא מכיל זה את ה-App Bar Main. בואו ניגש ל-App Bar Main, כאן אנחנו בעצם רואים את מה שראינו בסרטון הקודם ב-Main Activity, שזה בעצם ה-Coordinator Layout ואת ה-App Bar Layout ואת ה-Toolbar, אלה פה למעלה, ביחד עם ה-floating action button הידוע שדיברנו

  4. 01:04

    עליו, וכאן אנחנו מכניסים את ה-content של האפליקציה שלנו. בנוסף, יש לנו פה את ה-header עצמו שרואים ב-navigation drawer, תכף אתם תראו, רואים את זה למעלה, ולכן אנחנו יכולים לראות שיש לנו פה מעין מניו כזה שנפתח, זה ה-header שלו, זה ה-content שלו, הוא

  5. 01:25

    יכול להיפתח ולהיסגר ולאפשר בעצם להיות

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

ההרצאה הקודמת: Floating Action Button

ההרצאה הבאה: Material Design - Tabbed Activity

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

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

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

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