שליחת מאפיינים לרכיב

בלי כתוביותעם כתוביות

מילון מושגים:

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

בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.

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

Android - מערכת הפעלה מבוססת Linux לטלפונים ולמכשירים ניידים, שפותחה על ידי גוגל.

מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

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

XML - שפת סימון לייצוג נתונים מובְנים בעזרת תגיות, המשמשת להחלפת מידע בין מערכות ולקובצי הגדרות.

Integer - סוג נתונים למספר שלם, כלומר מספר ללא חלק עשרוני.

שליחת מאפיינים לרכיב

אפשר להעביר לרכיב שבנינו מאפיינים מה-layout: מאפיינים קיימים כמו layout_width, וגם מאפיינים חדשים שמגדירים בעצמנו. ההרצאה מראה איך לקבל אותם בקוד ולצייר לפיהם.

קבלת מאפיינים קיימים

1. דרך ראשונה, getAttributeValue: ב-constructor של CanvasView קוראים ל-attrs.getAttributeValue עם ה-namespace של Android ושם המאפיין, layout_width או layout_height. מקבלים מחרוזת כמו 300.0dip, ולכן צריך parsing, ולרוב רוצים פיקסלים ולא DIP.

2. דרך שנייה, TypedArray: מגדירים מערך attrs עם הקבועים android.R.attr.layout_width ו-android.R.attr.layout_height, וקוראים ל-context.obtainStyledAttributes(attrs, attrsArray).

3. שליפה בפיקסלים: קוראים ל-getDimensionPixelSize עם אינדקס 0 לרוחב ואינדקס 1 לגובה, וערך ברירת מחדל ViewGroup.LayoutParams.MATCH_PARENT. שומרים בשדות widthInPixels ו-heightInPixels.

4. שחרור: בסיום קוראים ל-recycle() על ה-TypedArray.

5. ציור לפי הערכים: פונקציה drawRectangle מציירת מ-(0,0) עד הרוחב והגובה בפיקסלים, עם STROKE, עובי 10 וצבע כחול. הגודל קצת שונה בין המכשירים כי ה-density שונה.

מאפיינים חדשים

1. קובץ attrs.xml: יוצרים קובץ משאבים בתיקיית values. בתוך resources פותחים declare-styleable ששמו כשם הרכיב, CanvasView.

2. הגדרת המאפיינים: בתוכו attr בשם headerText מסוג string, ו-attr בשם headerSize מסוג integer.

3. שימוש ב-layout: כותבים app:headerText ו-app:headerSize. ה-namespace של app שייך לאפליקציה, ומעתיקים אותו לראש הקובץ. בהדגמה "welcome to my app" ו-80.

4. קבלה ברכיב: קוראים ל-context.obtainStyledAttributes(attrs, R.styleable.CanvasView). שולפים getString(R.styleable.CanvasView_headerText) ו-getInt(R.styleable.CanvasView_headerSize, 50), כאשר 50 הוא ערך ברירת מחדל, ושומרים בשדות כדי להשתמש בהם מחוץ ל-constructor. גם כאן קוראים ל-recycle.

5. ציור הטקסט: פונקציה drawText יוצרת Paint בצבע magenta וגודל טקסט headerSize, ומציירת את headerText במיקום 100,150.

שימו לב

במכשיר האמיתי הטקסט גולש מעט מהרכיב, ובהדגמה לא מטפלים בזה. הנקודה העיקרית היא שמאפיינים שנכתבים ב-layout מגיעים לרכיב ומשפיעים על הגרפיקה.

השיעור הבא בקורס: ציור על Canvas על ידי מגע

פרקי ההרצאה: שליחת מאפיינים לרכיב

תמלול ההרצאה: שליחת מאפיינים לרכיב

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

00:02
לפני שנראה איך היוזר יכול לצייר בעצמו בצורה גרפית על המסך, בואו נראה איך אנחנו יכולים לשלוח לרכיב שבנינו את המאפיינים שאנחנו כותבים כאן ולקבל אותם ברכיב שבנינו.
00:18
אז בעצם יש כאן שני דברים שאנחנו יכולים לבצע. א', להשתמש באטריביוטס קיימים, לדוגמה ל-outweed, לדוגמה ל-outheight, בדיוק כמו שיש פה, וכמובן גם כל אטריביוט קיים אחר שאנחנו יכולים לבחור, ואנחנו רוצים לשלוח את זה לרכיב החדש שבנינו.
00:42
והאפשרות השנייה היא להמציא רכיבים, או ליתר דיוק אטריביוטס שלא קיימים, אטריביוטס חדשים שאנחנו יכולים לכתוב כאן ולשלוח לרכיב שבנינו.
00:54
כמובן ברכיב הזה, שבמקרה הזה הוא Canvas View, אנחנו רוצים לקבל את המידע הזה ולהשתמש בו בגרפיקה ולהציג דברים כתלות במידע הזה. אז דבר ראשון בואו נראה איך אנחנו יכולים לקבל את ה-Layout Width ואת ה-Layout Height וכמובן להשתמש בהם בכדי לצייר משהו גרפי בהתאם לערכים שלהם.
01:16
אז הרכיב שיש לנו כאן והרכיב כאן והסביר שבנינו בתרגיל הקודם בסרטון הקודם אבל ניקיתי ממנו את הכל כי אני רוצה שהוא יהיה נקי לגמרי ולהצליח לקבל רק את המידע שאני רוצה לשלוח ולהשתמש בו.
01:35
אז דבר ראשון, אנחנו יודעים שכל האטריביוטס האלה שנכתבים כאן נשלחים לרכיב לאטריביוט סט. אם אנחנו בקונסטרקטור פונים לאטריביוט סט, יש לנו יכולת לקבל על ידי פונקציות get אטריביוט שונות את הערכים שנשלחים.
01:55
לדוגמה, get attribute value, בואו נחפש את get attribute value וניקח את ההעמסה הזאת. get attribute value אומרת לנו, תגידו לי מה ה-namespace שבו יושב אותו אטריביוט.
02:10
אם נחזור ל-layout, אנחנו נראה שהאטריביוט של אנדרואיד יושבים ב-namespace הזה של אנדרואיד. בואו נעתיק את ה-namespace ונדביק אותו פה במחור הזה.
02:25
והדבר הבא זה מהו האטריביוט שאנחנו רוצים, זה יהיה ה-Layout-Wid ו-Layout-Height. אז בואו נקבל פה את ה-Layout-Wid ונפתח פה איזשהו סטרינג Layout-Wid שווה, למה?
02:44
מפני ש-Get-Attribute-Value מחזירה לנו סטרינג, אנחנו יכולים לראות את זה כאן. אותו הדבר בואו נבצע עבור Layout-Height ונגדיר כאן גם שאנחנו רוצים את ה-Layout height נגדיר כאן נקודה פסיק רק בסוף וכל מה שאני רוצה לעשות זה רק להציג את זה כרגע באיזשהו טוסט בכדי לראות מה בעצם קיבלנו יש לנו פה את הקונטקסט
03:14
שקיבלנו אותו גם לקונסטרקטור אז נשתמש בו בטוסט ואנחנו רוצים להציג את ה-Layout with משורשר עם layout height ונגדיר כאן איזשהו LengthLongShow ובואו נניח שנסתפק בזה כרגע כי אני רק רוצה להציג את הערכים ולראות האם באמת קיבלנו 300 ו-400 בואו נריץ את זה אז הנה אנחנו רצים על האמולטור
03:50
ואנחנו רואים 300.0 DIP וגם כאן 300.0 DIP כלומר Density Independent Pixels אוקיי, אז קיבלנו את המידע הזה כסטרינג. זה ממש היה 300.0 DIP ו-400.0 DIP. בואו נרשום את זה.
04:23
ו-400.0 DIP. עכשיו, אין לנו כל כך מה לעשות עם הערכים האלה. קודם כל, בגלל שזה מכרוזות. ב' צמוד אליהם DIP. אפשר כמובן לעשות פארסינג על המכרוזת ופשוט לחלק את זה.
04:36
זה והדבר הבא זה שאנחנו לא בטוח שאנחנו רוצים DIP כי אם אנחנו עובדים בקוד מה שאנחנו רוצים זה פיקסל לכן אנחנו יכולים להשתמש בטכניקה הזאת אבל בואו נראה טכניקה שאולי תהיה קצת יותר קלה ונוכל פשוט לקבל את הערכים בפיקסלים ולהשתמש בהם אז מה שאנחנו רוצים לעשות זה לקחת קודם כל
05:01
מערך שמגדיר attributes array כאשר מה שיש בו זה קבועים שמייצגים את האטריביוטס שאנחנו רוצים. אז אנחנו רוצים קודם כל את ה-Layout-Weed בואו ניקח android.r.attr ויש לנו בתוכו Layout-Weed אותו הדבר נבצע android.r.attr layout-height וכעת יש לנו מערך שמייצג את הקבועים האלה.
05:39
הדבר הבא שאנחנו צריכים זה אובייקט מיוחד שנקרא typed array. בואו ניקח משתנה ממנו ואנחנו צריכים לגשת לקונטקסט ו-to obtain styled attributes.
06:00
זה מחזיר לנו את האובייקט typed array הזה ואנחנו רוצים לתת לו את ה-attribute set ביחד עם המערך שבנינו. ttrs array עכשיו מה בעצם קורה כאן האטריביוט סט מכיל בתוכו את אוסף האטריביוטס שנשלחו מהלייאוט והמערך הזה מייצג איזה קבועים אנחנו בעצם רוצים לשלוף
06:33
הטייפ טרי הזה זה אובייקט שיכיל עכשיו את הערכים בצורה הרבה יותר נוחה מבחינתנו ודרך הטייפ טרי הזה אנחנו יכולים לשלוף את המידע כל מיני פורמטים שונים.
06:46
לדוגמה, אם אנחנו רוצים את הרוחב בפיקסלים, בואו נגדיר כאן באזור הגלובלי private int width in pixels ו-private int height in pixels. אז אנחנו יכולים פשוט לבוא לפה ל-width in pixels ולהכניס לתוכו את typed array, ויש לנו כל מיני פונקציות שהתפקיד שלהן זה להחזיר מידע מהאטריביוצ האלה.
07:19
לדוגמה, get dimension pixel size ולתת לו את האינדקס שקיים במערך שמתאר את הקבועים.
07:34
ה-weave נמצא כפרמטר ראשון ולכן האינדקס שאנחנו נותנים זה 0. לאחר מכן אנחנו צריכים לספק איזשהו default value אז בואו ניתן view group. layout-arams.match-parent בכדי לייצג את הקבוע עבור match-parent.
07:56
בואו נשכפל את כל הסיפור הזה ל-height in pixels ואנחנו רוצים את אינדקס מספר 1 והנה יש לנו את ה-width וה-height בפיקסלים.