Relative Layout
RelativeLayout, שורה אחר שורה ב-XML. כל רכיב מוצב ביחס למסך או לרכיב אחר, והתוצאה נראית זהה במכשירים שונים.RelativeLayout, מגדירים padding של 16dp (הנחשב סטנדרט נוח), ופותחים את חלונית ה-Preview כדי לראות את התוצאה תוך כדי בנייה.TextView עם ID textViewRegister, טקסט register, textSize של 25sp, מודגש, centerHorizontal true ו-marginTop של 30dp.TextView עם ID textViewFullName, 25sp, centerVertical ו-toLeftOf שמצביע על textViewRegister, שמיישר אותו עם הקו.EditText ברוחב 200dp, עם ID editTextFullName, רקע, 25sp, toRightOf ו-alignBaseline מול textViewFullName, ו-marginLeft של 20dp.below ו-alignLeft מול textViewFullName עם marginTop של 10dp. השדה עם alignBaseline מול תווית ה-email ו-alignLeft מול שדה ה-full name.Button עם wrap_content, טקסט OK, below שדה ה-email, alignRight ומרווח עליון של 10dp.15sp, טקסט הסכמה לתנאי שימוש, alignParentBottom true. הוא כבר נמצא שמאלה.textViewFullName.dp, וגדלי גופן ב-sp.RelativeLayout כך שכל רכיב מוצמד לרכיב אחר או למסך.פרקי ההרצאה: Relative Layout
תמלול ההרצאה: Relative Layout
הטקסט המלא של הדקות הראשונות בהרצאה «Relative Layout» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שראינו אילו רכיבי לייאוט קיימים בואו נראה דוגמה לשימוש בכל אחד מהם. שימוש ברכיבי לייאוט הוא מאוד בסיסי ומאוד חשוב וזה בעצם הבסיס של עיצוב אפליקציה שלנו.
כל אפליקציה שאנחנו רוצים לבנות קודם כל אנחנו צריכים להבין בכל מסך ומסך באיזה לייאוט כדאי לנו להשתמש בכדי שיהיה לנו הכי נכון והכי נוח לשימוש וגם שהאפליקציה תיראה באופן זהה במגוון מכשירים.
אז מה שאנחנו הולכים לעשות, אנחנו הולכים לראות דוגמה מהירה לשימוש בכל אחד מהלייאוטים שקיימים כאן.
הדבר הראשון שנתחיל זה Relative Layout. קודם כל בואו נראה לאן אנחנו רוצים להגיע. יש לנו את הציור הזה של האפליקציה. זה בעצם טופס רג'יסטריישן מאוד פשוט, יש לנו פה למעלה טקסט view של רג'יסטר, פול ניים ואדי טקסט, אימייל ואדי טקסט, לחצן אוקיי ופה למטה איזשהו צ'אטבוקס של אני מסכים לתנאי השימוש.
ואנחנו רוצים לבנות את הדבר הזה בעזרת רלטיב לייאוט. אז מה יש לנו פה? הטקסט ויו הזה העליון אנחנו רואים שהוא פשוט נמצא יחסית למסך בדיוק באמצע מבחינה אופקית.
יש לנו פה את הטקסט ויו של הפול ניים שנמצא באמצע המסך מבחינה אנכית ואנחנו רואים גם שהוא מיושר לשמאל של הרג'יסטר. יש לנו את האדי טקסט הזה שנמצא מימין לטקסט דיו של הפול ניים, ואנחנו רואים שיש פה איזשהו מרווח מסוים, זאת אומרת מרג'ין.
כמו כן יש כאן ישור שכדאי שיהיה של הטקסטים, זאת אומרת הבייסליין ביניהם. הטקסט דיו של האימייל אנחנו רואים שהוא מיושר לשמאל של הפול ניים, לאחר מכן אנחנו רואים את האדי טקסט של האימייל שמיושר לשמאל של האדי טקסט שמעליו של הפול ניימפ הלחצן מיושר מימין לאדי טקסט הזה של האימייל ולבסוף הצ'ק בוקס פה זרוק למטה הכי
למטה והכי שמאלה יחסית למסך אז בואו נראה טיק טק איך אנחנו יכולים לבנות את זה בעזרת ה-XML אז דבר ראשון בואו ניכנס ונתחיל לנקות דברים שאנחנו לא צריכים יש לנו כאן בעצם את כל אלה שאנחנו רוצים להיפטר מהם.
אנחנו כן רוצים להשאיר Relative Layout, אנחנו לא רוצים לשנות את ה-Layout עצמו, אבל אנחנו רוצים להגדיר Adding של 16 dp מפני שזה בעצם איזשהו סטנדרט מאוד נוח.
תמיד כדאי להציג את החלונית של ה-Preview, לעשות איזשהו רפרש ולראות איך נראית האפליקציה תוך כדי זה שאנחנו בונים אותה.
אז נתחיל עם הטקסט ויו העליון יש לנו ראפ קונטנט גם בוויד וגם בהייט יש לו קודם כל איזה שהוא איי-די נקרא לו טקסט ויו רג'יסטר לאחר מכן הטקסט שלו הוא רג'יסטר אנחנו רוצים טקסט סייז בואו נחליט על 25 SP יש לו טקסט סטייל bold קצת מודגש כזה יש לו center horizontal true ואז זה זורק אותו במרכז המסך ואנחנו רוצים שיהיה לו קצת
מרווח מלמעלה וזה יהיה margin top של בוא נגיד 30 dp ואז זה ייראה זהה בכל המכשירים אז אנחנו רואים שבקלות אנחנו יכולים להתחיל לבנות את התגיות השונות התגית הבאה שראינו הייתה text view ניתן לה wrap content גם ב-width גם ב-height והתגית הזאת הייתה עבור הטקסט של ה-full name אז דבר ראשון תמיד נגדיר
ID מיד אחרי ה-width וה-height ויש לנו פה text view full name שימו לב שתמיד אני אישית מגדיר את האיי-די כהתחלה של הרכיב עצמו טקסט-ויו רק זה טקסט עם t קטנה האות הראשונה תמיד היא מתחילה באות קטנה מפני שזה שם של משתנה ושמות של משתנים תמיד מתחילים באות קטנה הטקסט-ויו
הזה זה שם של מחלקה ושמות של מחלקה תמיד מתחילים באות גדולה אז התחילית של האיי-די היא תמיד השם של הרכיב ואז מה הוא מייצג full name הכל מילים מחוברות זה בעצם ה-convention בג'אווה.
לאחר מכן אנחנו רוצים להגדיר את הטקסט שלו והטקסט שלו יהיה full name ושימו לב שמיד אנחנו רואים אותו זרוק בפינה השמאלית העליונה מפני שלא הגדרנו לו את היחסיות למסך או לרכיבים אחרים.
הדבר הבא שאנחנו רוצים להגדיר לו זה טקסט סייז זה יהיה אותו הדבר 25sp לאחר מכן אנחנו רוצים שהוא יהיה center vertical כפי מולא אנחנו ממש משתמשים עם התכונות שעברנו עליהן בעבר ולבסוף אנחנו רוצים שהוא יהיה to left off ונחפש את ה-id text view register וזה שם לנו אותו ממש מיושר עם הקו בדיוק כמו שראינו
בסרטוט נקסט הדבר הבא שאנחנו רוצים להגדיר זה edit ניתן לו רוחב 200 dp ניתן לו גובה wrap content בצורה כזאת אנחנו כבר רואים שהוא זרוק שם למעלה לאחר מכן נגדיר לו מיד ID כי אנחנו הולכים להשתמש עם ה-ID שלו ואנחנו רוצים שאחרים יהיו יחסית אליו לכן יש לו ID וה-ID שאנחנו רוצים לתת לו זה edit
text full name כי זה בעצם מה שהוא מקבל מקבל full name background אנחנו גם רוצים לתת לו יש לנו אפשרות לתת לו איזשהו סוג של אפור כזה text size יגדיל אותו גם כן בואו ניתן להם את אותו הגודל 25 sp לאחר מכן אנחנו רוצים לתת לו to write off ולחפש את ה-id של text view full name כדי שהוא יהיה מימין
אליו ואנחנו רוצים ליישר אותו עם ה-baseline עליין בייס ליין גם כן טקסט ויו פול ניים ואז הוא מיושר מיידית עם הפול ניים בנוסף אנחנו רוצים איזשהו מרווח ביניהם וזה יהיה מרג'ין לפט בואו ניקח 20 dp ויש לנו טיפה שהוא זז ימינה ממנו לאחר מכן אנחנו רוצים שוב אדיט טקסט וטקסט ויו עבור האימייל בגלל שאנחנו עובדים עם
ה-XML מאוד קל לנו פשוט לעשות קופי ופייסט ומיידית יש לנו עוד שני רכיבים ועכשיו אנחנו רק צריכים לגשת ולשנות את הערכים המתאימים שלהם אבל אם אתם עושים קופי פייסט מאוד חשוב שתעבדו