Vector Drawable - SVG
drawable, וההרצאה מציירת בו משולש ומציבה אותו כרקע של רכיבים.vector: יוצרים קובץ ב-drawable (בדוגמה vector_triangle) ומחליפים את תגית השורש מ-selector ל-vector.viewportWidth ו-viewportHeight הם מידות המשטח כולו (קנבס), בלי יחידות, ובדוגמה 300 כל אחד. width ו-height הם מידות הציור עצמו, עם יחידות.path: מקבלת fillColor (בדוגמה אדום כהה) ו-pathData, מחרוזת בשפת SVG שמתארת את הציור.M היא move to, מעבר לנקודה בלי למתוח קו. L היא line to, קו אל נקודה. Z סוגרת את הצורה. אות גדולה מציינת קואורדינטות מוחלטות ביחס לקנבס, ואות קטנה מציינת תזוזה יחסית לנקודה האחרונה.z. במוחלט מגיעים לאותה תוצאה עם הנקודות 100,100, 200,200 ו-100,300 וסגירה ב-Z.background של Button בגודל 200dp על 200dp, או של View רגיל (מחלקת הבסיס של הרכיבים הוויזואליים) כשרוצים רק את הציור.פרקי ההרצאה: Vector Drawable - SVG
תמלול ההרצאה: Vector Drawable - SVG
הטקסט המלא של הדקות הראשונות בהרצאה «Vector Drawable - SVG» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנדרואיד סטודיו תומכת ביצירת ציור על ידי פורמט שנקרא SVG. SVG זה קיצור של Scalable Vector Graphics. זה בעצם פורמט שנכתב ב-XML לצורך הגדרת ציור על ידי וקטורים.
וקטורים זה גודל וכיוון. לדוגמה קו שמתחיל מנקודה מסוימת הולך בכיוון מסוים עד נקודה אחרת ונעצר. מה היתרון בציור ב-SVG? הבטרון זה שכאשר מתבצע לדוגמה זום אין אז התמונה לא מתפקסלת ולא רואים פיקסלים פיקסלים כי וקטור אנחנו יכולים להסתכל עליו בכל זומינג והוא עדיין יראה אותו הדבר.
אז בואו נראה איך אנחנו יכולים להגדיר תמונה בפורמט svg. הדבר הזה מתבצע שוב פעם בתיקיית drawable. אנחנו ניגשים לתיקיית drawable ומוסיפים קובץ resource, בואו נקרא לו וקטור triangles ואנחנו בעצם הולכים לצייר משולשים.
בואו בעצם נקרא לו וקטור טריאנגל, משולש אחד. הדבר הראשון שאנחנו צריכים לעשות זה לשנות את התגית הראשית מסלקטור לווקטור. הדבר הבא שאנחנו צריכים לעשות זה להגדיר את הממדים הדרושים.
כאן בעצם אנחנו מגדירים רוחב וגובה אבל יש לנו פעמיים רוחב ופעמיים גובה. דבר ראשון אנחנו מגדירים viewport width וזה בעצם הרוחב של כל המשטח עצמו. בואו נגדיר 300. הדבר הזה לא מקבל יחידות זה בעצם מידה שהיא פלואוטית.
הדבר הבא שנגדיר זה viewport-height. פה נגדיר גם כן 300. הרוחב והגובה הבא שאנחנו מגדירים זה של הציור עצמו שנמצא בתוך המשטח. בואו נגדיר אותו גם כן באותם מימדים.
זה מתבצע על ידי weed, אבל זה כן מקבל יחידות מידה ו-height. אז יש לנו פה הגדרת רוחב וגובה של כל המשטח ורוחב וגובה רק של הציור עצמו בתוך המשטח. מכאן אנחנו בעצם יכולים לצייר.
הסיור מתבצע על ידי path, path מקבלת קודם כל fill color, בואו נבחר איזשהו צבע, נהיר שחור רק כדי שנוכל להיכנס לפלטה של הצבעים, ונגדיר איזשהו אדום כהה כזה.
והדבר הבא שאנחנו צריכים להגדיר זה path data. path data זה בעצם מחרוזת שמוגדרת בשפה שמתארת בדיוק את הוקטורים האלה.
יש בעצם שתי שפות שעשו מהן איזשהו חיבור בשביל לייצר את שפת svg. אחת השפות נקראת vml, Vector Markup Language, ויש עוד איזושהי שפה, אבל עשו מהן איזשהו מישמש והגדירו שפה אחת שמייצגת את שפת ה-svg.
בואו נראה כמה עקרונות בנוגע לשפה הזאת. השפה הזאת בעצם מתארת לנו איך לצייר ומה לצייר ואיך בעצם קווים נמתחים בין הנקודות, כאשר השפה מגדירה אותיות מסוימות.
לדוגמה האות m מתארת move to לאן אנחנו רוצים לגשת בציור אבל מבלי למתוח קו כאילו שאנחנו מרחפים ושמים את העט בנקודה מסוימת ואז כמובן לאיזה נקודה אנחנו רוצים להגיע.
בואו נגיע לדוגמה לנקודה 100 100. בעצם כאן אנחנו זזים לנקודה שנקראת 100 100. אם ההתחלה היא 0, 0 אז אנחנו אמורים לזוז ל-100, 100. עכשיו יש הבדל בין אותיות גדולות לאותיות קטנות.
אותיות גדולות מתארות שהנקודות שאנחנו מגדירים הן יחסית לקנבאס עצמו, קנבאס זה המשטח עצמו שאנחנו מציירים עליו, כאשר הראשון זה כמובן x והשני זה y, תמיד ההתחלה זה 0, 0, x עולה הולך ימינה, y עולה הולך למטה.
אז יש לנו פה m, זה אומר שאנחנו הולכים למיקום 100 100 יחסית לקנבס. אם היינו מגדירים אותיות קטנות, זה אומר שהתזוזה היא תמיד יחסית לנקודה האחרונה שהיינו בה.
בהתחלה אנחנו עדיין כמובן ב-0,0 ולכן בהתחלה זה לא משנה. בואו נישאר עם m קטנה בתור התחלה. אז מה שאמרנו כרגע זה move to נקודה x שווה 100, y שווה 100, הוא אמור לגשת לנו למיקום כזה ולשים פה את ההתחלה של הציור.
כאשר הגדרנו לפני זה שכל ה-canvas הוא 300 על 300. לאחר מכן אנחנו מגדירים לו LL מתאר Line 2, לאן אנחנו רוצים עכשיו לבצע את הציור עצמו. בואו נצייר משולש.
זאת אומרת, מפה אנחנו הולכים לכאן, לכאן ובחזרה. אז מה זה אומר שאנחנו הולכים לכאן? זה אומר שיש לנו קו שמתקדם X מהו ו-Y מהנוספים.
אז X יהיה בעצם 100 ימינה ו-Y יהיה 100 למטה בגלל שה-L היא קטנה אז זה אומר שאנחנו מתקדמים 100 ו-100 מהנקודה הנוכחית שלנו אז בואו ניקח 100 100 ויש לנו כאן בעצם איזשהו ציור וירטואלי שהולך לכאן כי התקדמנו 100 ימינה מהנקודה הנוכחית שלנו ו-100 למטה מהנקודה הנוכחית שלנו בואו
נחזור עכשיו אם התקדמנו מכאן לכאן אנחנו רוצים לחזור לכאן. בואו נראה רגע מה יקרה אם אני מפרש את זה, אולי הוא יראה לנו משהו, עדיין לא מראה כלום.
אז בייסיקלי, אולי כדאי שאפילו נצייר את זה. אנחנו רוצים פשוט לקחת קו ראשון, אם זה ההתחלה 0,0 וזה 100,100, אנחנו רוצים קו אחד לכאן, לאחר מכן אנחנו רוצים קו אחד לכאן, ולאחר מכן אנחנו רוצים לחזור בחזרה לכאן וליצור משולש סגור.
אז אם זאת הנקודה 100,100, אז אנחנו רוצים להתקדם ימינה 100 ולמטה 100, התקדמנו, אז עכשיו אנחנו כאן, ועכשיו אנחנו רוצים לחזור שמאלה 100 ועדיין למטה 100. זאת אומרת שה-x צריך להיות הפעם מינוס 100 וה-y עדיין מתקדם למטה 100.
בואו נחזור בחזרה ונגדיר לו פשוט עוד נקודה, מינוס 100 על 100. וכבר אנחנו רואים שיש לנו סוג של משולש והוא נסגר לנו. אנחנו יכולים כמובן להמשיך ולסגור אותו בעוד צורה והצורה זה פשוט לחזור בחזרה.
מה זה אומר בחזרה?