Styling
styles.xml.TextView (מרג'ין 3dp, גודל 30sp, bold, צבע בורדו) ושלושה EditText (מרג'ין 7dp, אותו גודל וגם bold, צבע טקסט כחול כהה, רקע צהבהב ו-hint). הערכים חוזרים בכל הרכיבים.dimens.xml: נוצרו layout_padding (16dp), text_view_margin (3dp), any_text_size (30sp) ו-edit_text_margin (7dp), והורקו בכל מקום. שינוי עתידי, למשל ל-20, משפיע על הכל. עדיף להגדיר את הערך בקובץ המשאבים מיד, ולא לכתוב hardcoded ואז להחליף.colors.xml: text_view_text_color, edit_text_text_color ו-edit_text_back_color.Alt+Enter ו-Extract string resource עבור הטקסטים וה-hints.styles.xml יוצרים style עם name (בדוגמה TextViewStyle) ובתוכו item לכל תכונה משותפת, כשה-name הוא התכונה כולל android:. רק מה שמשותף לכל הרכיבים נכנס לסגנון. מה שלא משותף, כמו gravity או text, נשאר ברכיב.style="@style/TextViewStyle" (בלי android:). אותו דבר נעשה ל-EditTextStyle.BaseTextStyle. הסגנונות האחרים יורשים ממנו דרך parent.LinearLayout נוצר סגנון, LayoutStyle, עם match_parent לרוחב ולגובה ו-padding. ה-orientation לא נכנס כי הוא ספציפי ל-LinearLayout.פרקי ההרצאה: Styling
תמלול ההרצאה: Styling
הטקסט המלא של הדקות הראשונות בהרצאה «Styling» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
כאשר אנחנו כותבים קוד בין אם זה קוד ב-Java או בין אם זה קוד ב-XML חשוב לא לשכפל קוד וכמה שניתן לכתוב קוד פעם אחת. כאשר אנחנו מעצבים את האפליקציה שלנו אז קורה הרבה שחלקי צוב משוכפלים בין הרכיבים השונים.
מה שאנחנו הולכים לראות בסרטון הזה זה איך אנחנו יכולים למנוע את השכפולים האלה בעזרת מנגנון build-in שקיים באנדרואיד שנקרא Styles. אז בואו ראשית נבנה קטע קטן מבחינת xml עם העיצובים ולאחר מכן נראה איך אנחנו יכולים לחסוך את השכפולים שהולכים להיות כאן.
דבר ראשון בואו נבנה טקסט view נגדיר לו wrap content נוסיף לו margin נניח 3dp נגדיר לו טקסט size 30sp נגדיר לו טקסט style bold ונגדיר לו טקסט color כלשהו.
בואו נבחר איזה מרון כזה בורדו בואו נגדיר שהטקסט שלו זה welcome ובואו ניתן לו גם הגדרה של gravity או layout gravity center horizontal לצורך כך בואו נגדיר את זה כ-match parent ואז נוכל להשתמש ב-gravity בואו נבצע עוד אחד ונגדיר שהטקסט שלו זה enter your details נוריד את ה-center
הוריזונטל נשנה את זה לאוריינטיישן ורטיקל שהם יהיו אחד מתחת לשני ויש לנו בצורה כזאת את שני הטקסט view. העיצוב הבא שאנחנו רוצים או ליתר דיוק הרכיב הבא שאנחנו רוצים להוסיף זה רכיב אדיט טקסט.
אני בכוונה רוצה שיהיה לי פה מספר רכיבים שנראה אחר כך איך אפשר לקחת את כל העיצובים המשוכפלים האלה ולגרום להם להיות במקום אחד. יש לנו match parent ו-wrap content כ-width ו-height.
נגדיר מרג'ין, הפעם בואו ניתן משהו שונה, שבע dp. ניקח את אותו טקסט סייז וגם זה יהיה בולד. נגדיר טקסט קולור אחר, בואו ניקח איזה סוג של כחול כהה כזה וגם background color אבל סוג של יותר צהוב, משהו שמתאים יותר לתיבות טקסט.
כעת בואו נגדיר hint first name ונשכפל את התיבה הזאת לתיבה נוספת שהפעם אנחנו רוצים last name ואפילו city כתיבה מספר 3. וכעת סיימנו את העיצוב וכמובן אנחנו יכולים לראות שיש פה המון דברים שפשוט משוכפלים.
עכשיו ומסך אחד יכול להיות לנו עוד הרבה מסכים באפליקציה שבהמשך נראה כמובן איך בונים מסכים שונים ובמסכים אחרים גם כן יש את הרכיבים הוויזואליים האלה, יש טקסט view ויש אדי טקסט ובוא נניח שאנחנו רוצים את אותם צבעים כצבע אחיד לגבי כל הטקסט view ואת אותם צבעים כצבעים אחידים לגבי
האדי טקסט בשביל שלא יהיה דברים קצת מוזרים ושונים. זה הצבעים שאנחנו רוצים וכמובן גם תכונות אחרות כמו כל האדי טקסט הם bold ואנחנו רוצים את אותו טקסט סייז לכולם וכדומה.
אז אנחנו רואים כמובן ששינינו את כל הדברים האלה ומה קורה אם יום בהיר אחד אנחנו רוצים לשנות איזה משהו. אז כמובן אנחנו צריכים ללכת לכל אחד ולשנות בנפרד.
אז דבר ראשון שלמדנו בעבר זה שקודם כל חשוב להעתיק את כל הגדלים מכרוזות וצבעים ולשים אותם בקבצי resource מתאימים, זה הדבר הראשון שלמדנו. אז בואו קודם כל נעשה את זה ואחר כך נראה מה עוד חשוב לבצע בשביל שגם אפילו שאנחנו עושים את זה לא יהיו שכפולים נוספים.
אז דבר ראשון בואו נתחיל להשתמש בכל ה-Dimensions. ניגש לקובץ ה-Dimensions, אני רואה כבר שיש לי כאן עוד אחד שקשור ל-Width 820 dp, אפשר להיפטר ממנו בשביל שיהיה יותר סימפל כרגע, אז בואו ניגש Viewing Explorer ופשוט ניפטר מזה רק בשביל שיהיה דוגמה פשוטה.
נבצע delete, נחזור בחזרה ויש לנו סך הכל קובץ dimensions אחד, כמובן שאם אנחנו רוצים קבצים שמתאימים לדברים נוספים אז אנחנו יכולים להוסיף.
אוקיי, אז מה אנחנו רוצים להוסיף כאן ב-dimensions? אז דבר ראשון בואו נתחיל לראות איזה שימושים ב-dimensions יש לנו. הדבר הראשון שאנחנו רואים פה זה ה-16 dp של ה-padding וזה של ה-layout.
אז בואו נבנה דיימן ונגדיר לו layout padding, ניתן לו 16 dp ואנחנו רוצים להחליף את ה-16 dp הזה ב-true-dale-diamant-layout-padding, ככה שאם יש לנו אקטיביטיז נוספים אנחנו לא צריכים להגדיר עוד פעם את המספר הזה אלא ונמצא בקובץ ה-resource, שינוי עתידי כאן נניח ל-20 משפיע אוטומטית על כולם ויש אחידות.
נקסט, הדבר הבא שאנחנו רואים כאן זה שיש לנו את המרג'ינג, המרג'ינג הזה זה 3dp וזה מרג'ינג עבור הטקסט view אז בואו ניגש נשכפל את זה ctrl d נגדיר טקסט view מרג'ינג ניתן לו 3dp נחזור ובמקום ה3dp הזה אנחנו יכולים לשים דיימן טקסט view מרג'ינג הנקודה היא שעכשיו אנחנו לוקחים את זה ושמים את זה בכל מקום שהשתמשנו ב-3dp עבור
טקסט ויו מרג'ין. הנה יש לנו את זה גם כאן. הדבר הבא שאנחנו רואים זה את הטקסט סייז הזה שהוא 30sp, בואו נחזור, נשכפל קונטרול d ונסתכל רגע שה-30sp הזה בעצם נמצא גם בטקסט ויו וגם באדיטקסט, זאת אומרת החלטנו באפליקציה שלנו שכל הגדלים של הטקסטים הם 30sp.
אז השם המתאים יהיה Any Text Size או רק Text Size כלומר גודל כלשהו של כל הטקסטים יהיה 30 SP. אז בואו ניגש לכאן נמחק את ה-30 SP הזה ונגדיר Dימן Any Text Size ואנחנו יכולים עכשיו להעתיק אותו במקום כל טקסט סייז של יחידת טקסט כלשהי הנה יש לנו את זה כאן הנה יש לנו את זה כאן הנה יש לנו את זה כאן מה הדבר הבא שיש לנו?
הדבר הבא שאנחנו רואים כאן מבחינת dimension זה ה-7 dps הזה וזה בעצם עבור ה-text view margin כאשר אותו אנחנו יכולים לשכפל ולקרוא לזה edit text margin וזה היה 7. נחזור, נמחק, dimension, edit text margin.
נעתיק, נדביק במקום ה-7 הזה ובמקום ה-7 הזה. עכשיו שימו לב שכשבניתי את כל הלייאוט הזה אז קודם כל בניתי אותו עם הערכים כהארדקודד ורק לאחר מכן הלכתי לקובץ הדיימנדס כרגע ושמתי אותם ואז החלפתי כאשר במציאות יותר נוח ברגע שאתם רוצים להשתמש באיזשהו ערך לא לכתוב אותו כהארדקודד כאן אלא ממש ללכת לקובץ
הדיימנדס או הכל או רמתים להגדיר אותו שם ומיד להתייחס אליו אחרת אפשר לשכוח וזה מקור לבאגים עיצוביים בעתיד. אנחנו יכולים לגשת עכשיו ולהשתמש ב-colors.
אז הנה אנחנו רואים שיש לנו פה איזשהו color מסוים, בואו נעתיק אותו. ואנחנו רוצים לסגור את ה-dimens, לגשת ל-colors, ולהוסיף כאן עוד color.
color שהעתקנו זה היה ה-color הזה, והתפקיד שלו זה להיות טקסט view, טקסט color. אנחנו רוצים לשכפל את זה עוד פעמיים, 1. Edit טקסט טקסט קולור ו-Edit טקסט BackColor בואו רק נעתיק את הקולור הנכונים זה היה טקסט קולור של ה-Edit טקסט וזה היה BackGround קולור
של ה-Edit טקסט נדביק ועכשיו אנחנו יכולים להשתמש בהם אז בואו ניגש וניפטר מזה ניגש ל-Colors והיה לנו שמה טקסט View טקסט קולור נשכפל אותו גם לכאן עכשיו אנחנו יכולים לגשת לטקסט קולור של האדיט טקסט קולור אדיט טקסט טקסט קולור נעתיק אותו נדביק כאן לא הדבקתי מאיזושהי סיבה
קול סי קונטרול וי והאחרון אנחנו הולכים לפה ניקח קולור אדיט טקסט באק קולור קופי פייסט פייסט דבר האחרון שנשאר לנו זה המחרוזות. כאן אנחנו יכולים פשוט ללחוץ Alt Enter ואז Extract String Resource ולתת איזשהו שם למפתח של המחרוזת.
זה יהיה Welcome, ניגש לכאן, זה יהיה Enter Details. ה-Hintים, יש לנו פה את ה-First Name, יש לנו כאן Last Name ויש לנו כאן City. כל הערכים של המחרוזות נכתבו כאן מפה למטה.
אז עכשיו סיימנו להגדיר את העיצוב כך שהערכים עצמם לא משוכפלים ועשינו רק חצי דרך. למה? כי עדיין אנחנו יכולים לראות שבין רכיב לרכיב יש אותם עיצובים ואנחנו את זה גם רוצים למנוע.
אז איך אפשר לעשות את זה? אז מה שאנחנו צריכים לראות זה את הקובץ החדש הזה שתמיד היה פה ואף פעם לא השתמשנו איתו וזה ה-styles. styles.xml זה קובץ שמחזיק סטיילינג שאנחנו יכולים להגדיר עבור כל הרכיבים הוויזואליים שיש באפליקציה.
ובמקום לרשום את הערכים האלה שאנחנו רואים כאן שוב ושוב ושוב בין רכיב לרכיב אנחנו יכולים להגדיר אותם פעם אחת בקובץ הסטייל ואז פשוט לגשת לרכיב ולהגיד לו תקשיב הסטייל שלך הוא בלה וכל הערכים האלה לא משוכפלים לכל אחד אלא כתובים פעם אחת בסטייל