PracticU

State Drawable

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

State Drawable
State Drawable הוא קובץ XML בתיקיית drawable שמגדיר איך רכיב ייראה בכל אחד ממצביו, למשל לחצן רגיל לעומת לחצן שנלחץ כרגע. הרכיב מחליף את המראה לבד לפי המצב, בלי קוד Java.
איך בונים
1. קובץ עם selector: יוצרים בתיקיית drawable קובץ, למשל state_button. בתוכו תגית selector עם כמה item, שלכל אחד מהם מצב.
2. מצב לחצן: משתמשים ב-android:state_pressed. פריט עם state_pressed="false" הוא המצב הרגיל, ופריט עם true הוא המצב הלחוץ. בכל פריט מגדירים drawable.
3. הצבעים בקובץ colors.xml: לא כדאי לכתוב צבע ישירות בפריט, כי זה לא תמיד עובד. מגדירים בקובץ הצבעים תגיות color, למשל button_background_regular ו-button_background_pressed (כהה יותר), ומפנים אליהן מהפריט.
4. מציבים כ-background: בלחצן כותבים android:background="@drawable/state_button". בהרצה רואים שהצבע משתנה ברגע הלחיצה.
דוגמאות למצבים נוספים
- שדה טקסט: state_focused עם false ו-true. השדה שמקבל פוקוס מוצג בצבע בהיר יותר, ובדוגמה יש שלושה שדות, כך שרואים את הפוקוס עובר ביניהם. כדי לשנות שם של קובץ בבטחה משתמשים ב-Shift+F6.
- תיבת סימון (CheckBox): state_checked עם false ו-true. הצבעים סגול בהיר כשלא מסומן וסגול כהה כשמסומן.
שימו לב
מצב ברירת המחדל מוגדר כ-false, והפריט של המצב הפעיל מוגדר ב-true. הרכיב עצמו משנה את הרקע לפי המצב שלו.
עכשיו אפשר להגדיר לכל רכיב מראה נפרד למצב רגיל, לחוץ, פוקוס או מסומן, בקובץ אחד.
השיעור הבא בקורס: Transition Drawable

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

  1. 00:00

    מהו State Drawable

  2. 00:45

    הגדרת מצב state_pressed ללחצן

  3. 01:59

    הגדרת צבעים לכל מצב

  4. 03:21

    החלת ה-State על לחצנים

  5. 04:31

    מצב Focused לתיבת טקסט

  6. 06:48

    בדיקת הרקע על EditText

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

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

  1. 00:03

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

  2. 00:20

    לדוגמה, אם אנחנו מדברים על לחצן, לחצן יכול להיות במצב רגיל או במצב שהוא כרגע לחיץ, ואנחנו יכולים עבור כל מצב להגדיר תכונות מסוימות.

  3. 00:32

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

  4. 01:07

    state אני רואה כל מיני מצבים שאני יכול להגדיר. עבור לחצן אנחנו יכולים להגיע ל-State Pressed, ובוא נניח שאנחנו נמצאים במצב ה-Defaultי שהלחצן הוא לא לחוץ כרגע.

  5. 01:21

    State Pressed שווה False. במידה ו-State Pressed שווה False מה בדיוק אנחנו רוצים להגדיר עבור הלחצן הזה? לדוגמה אנחנו רוצים Drawable ואיזשהו צבע. עכשיו אנחנו לא יכולים במקרה הזה להגדיר פה צבע בצורה כזאת, הדבר הזה לא תמיד עובד ולמרות שאנחנו כרגע רואים שאנחנו כן מצליחים לראות פה שחור עדיף לגשת ולהגדיר את הצבע בתיקיית ה-colors או ליתר דיוק בקובץ ה-colors.xml זה הדבר הנכון

  6. 01:58

    לבצע וזה בוודאות יעבוד אז בואו ניגש ונייצר תגיד color נגדיר את ה-name שלה כ-button background regular זאת אומרת שכרגע הלחצן הוא לא לחוץ רגולר זה אומר שהוא לא לחוץ בואו ניגש ונבחר איזשהו צבע נניח שאנחנו רוצים ברגע שהלחצן לא לחוץ לבחור כחול כזה מעין כחול רך כזה בואו נחזור וניתן לו את שטרודל קולור ויש לנו פה באטרן רגולר בואו ניגש ונייצר עוד צבע נשכפל

  7. 02:44

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

  8. 03:22

    למיין אקטיביטי ונגדיר לחצנים הנה יש לנו פה בטון בואו נגדיר לו match parent ו-rub content בואו נגדיר לו text size 20 ונגדיר לו background ה-background נמצא בתיקיית drawable והוא נקרא state pattern בואו נגדיר עוד לחצן אחד פעם נגדיר אותו כ-cancel קצת איזה מרג'ין כזה ובואו נריץ והנה אנחנו רואים שהתוכנית רצה

  9. 04:26

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

  10. 05:01

    בטקסט בוקס יכול להיות לנו מצב של סטייט פוקוס אם הוא פולס אנחנו רוצים נכניס איזשהו drawable מסוים ואם הותרו אנחנו רוצים להכניס drawable האחר נפל את זה ונגדיר שזה יהיה טור אז לצורך כך בואו ניגש לדוגמה ל-colors נשכפל ונגדיר במקום button נגדיר

  11. 05:40

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

  12. 06:39

    מתבצע על ידי שיפט F6 יש לנו פה אדיט טקסט והריפקטור והנה יש לנו עכשיו את המסמך הזה וכל מה שאנחנו רוצים להגדיר כאן כרגע ושבתיקיית color יש לנו edit-text-background-regular ויש לנו edit-text-background-focus וכעת אנחנו יכולים לבדוק את זה, נייצר edit-text, נגדיר לו text-size,

  13. 07:30

    נגדיר לו מרג'ין, נגדיר לו ולבסוף נגדיר לו background.

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

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

ההרצאה הבאה: Transition Drawable

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

  • הבדלים בין CC State לבין FC State
  • Distance-Vector vs Link-State

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

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