PracticU

Absolute Layout

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

Absolute Layout
ב-AbsoluteLayout מציבים כל רכיב בקואורדינטות X ו-Y מדויקות. השיעור בונה איתו מסך login קטן ומסביר למה אנדרואיד לא ממליצה להשתמש בו.
איך זה עובד
הנקודה (0,0) היא הפינה השמאלית העליונה של המסך. ככל שזזים ימינה X גדל, וככל שיורדים למטה Y גדל.
השלבים העיקריים
1. הכנה: מחליפים ל-AbsoluteLayout. אין צורך ב-padding, כי כל רכיב ממוקם בדיוק לפי המסך.
2. תווית username: TextView עם wrap_content, טקסט username, ‏20sp, וערכים x ו-y של 50dp. בלי הערכים הוא נשאר בפינה.
3. שדה username: EditText ברוחב 150dp, ‏wrap_content בגובה, ‏20sp, רקע אפור (#888), ‏x בערך 180dp ו-y של 50dp.
4. שדה password: מעתיקים את שני הרכיבים, משנים לטקסט password ו-y ל-100dp.
5. הכפתור: Button ברוחב 80dp, ‏20sp, ‏textAllCaps כבוי, הטקסט login, ‏x של 250dp ו-y של 150dp.
6. דיזיינר: גם בדיזיינר אפשר להזיז רכיבים, וההזזה מעדכנת את קובץ ה-XML.
שימו לב
תגית AbsoluteLayout מסומנת בקו חוצה, כלומר היא deprecated. אנדרואיד לא ממליצה עליה, כי המיקומים נמדדים תמיד מהפינה השמאלית העליונה, ובמכשיר בגודל אחר הגרפיקה לא תיראה טוב. את אותו עיצוב אפשר להשיג בעזרת ה-Layout האחרים.
אם בכל זאת צריך למקם רכיבים ידנית, אפשר לעשות זאת כך עם x ו-y.
השיעור הבא בקורס: Main Layout

פרקי ההרצאה: Absolute Layout

  1. 00:00

    היכרות עם Absolute Layout

  2. 00:58

    מעבר ל-Absolute Layout

  3. 01:37

    הגדרת TextView ומיקום X ו-Y

  4. 02:22

    הוספת EditText עם רקע אפור

  5. 03:19

    שכפול שדות username ו-password

  6. 04:25

    שינוי מיקומים עם הדיזיינר

תמלול ההרצאה: Absolute Layout

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

  1. 00:03

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

  2. 00:22

    הנקודה הזאת של המסך זה נקודה שנחשבת כ-X0 ו-Y0. ככל שאנחנו מתקדמים יותר ימינה ה-X גדל, ככל שאנחנו מתקדמים יותר למטה ה-Y גדל. כך על ידי הגדרה של X ו-Y אנחנו יכולים להציב כל רכיב שאנחנו רוצים בכל מקום על גבי המכשיר.

  3. 00:42

    קודם כל בואו נראה לאן אנחנו רוצים להגיע. אנחנו רוצים לעצב את ה-Layout הפשוט הזה. יש לנו פה Username עם תיבת טקסט כזאת EditText, יש לנו Password עוד EditText ויש לנו פה לחצן Login.

  4. 00:59

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

  5. 01:32

    להגדיר את הרכיבים השונים שבו אז יש לנו טקסט view ה-width שלו זה ראפ קונטנט ההייט שלו זה ראפ קונטנט יש לו איזשהו טקסט יוזרניים בצורה כזאת יש לו טקסט סייז של 20 SP ומכאן אנחנו רוצים להציג את ה-X ואת ה-Y שלו בואו רגע נציג את הפריוויו ונראה שהוא ממש כאן בפינה כל מה שאנחנו רוצים לעשות זה להגדיר לו X ולתת לו 50 dp ו-y ולתת לו גם 50 dp ואז

  6. 02:15

    הוא זז בדיוק למקום שבו רצינו שהוא יהיה אנחנו רוצים אדי טקסט להגדיר לו שהוויד שלו זה 150 dp ההייט שלו זה ראפ קונטנט אנחנו רוצים להגדיר טקסט סייז אותו הדבר 20 sp אנחנו רוצים להגדיר background 888 סולמית פוג של אפור כזה ואנחנו רוצים לתת לו את המיקום שלו הx שאנחנו

  7. 02:53

    רוצים לתת לו זה באזור ה-180 dp בואו נראה לאן הוא יביא אותנו פחות או יותר בסדר ואנחנו רוצים לתת לו את אותו ה-y של מקודם וזה יהיה 50 dp בצורה כזאת יש לנו ממש אחד ליד השני בואו נגדיל את זה טיפה ועכשיו אנחנו יכולים פשוט להעתיק את שני החבר'ה האלה ctrl c להדביק אותם נשנה את ה-user name ל-password נשנה

  8. 03:27

    את ה-x ל-x בעצם אמור להיות 50 נשנה את ה-y ל-100 ואז יותר למטה גם את ה-y הזה נשנה ל-100 good ויש לנו עכשיו user name ו-password נשאר לנו את הלחצן ניקח button נגדיר לו Read 80 dp, נגדיר לו High drop content, ניתן לו טקסט סייז של 20 sp, נגדיר לו טקסט All caps false,

  9. 04:06

    נגדיר לו שהטקסט שלו ולוגין והx ניתן לו 250 dp וניתן לו y 150 dp והנה התייצב בדיוק במקום שלו כמובן שאם אנחנו רוצים לשחק עם זה ולראות בדיוק את המיקומים אנחנו יכולים לגשת כאן ל-Layout ולהזיז אותו לכל מיני מקומות ואז זה כמובן מעדכן את קובץ ה-XML אז יש חשיבות לדיזיינר הזה יש חשיבות דווקא די נוחה לשימוש בואו נחזיר את זה בחזרה זה היה 250 זה היה

  10. 04:51

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

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

ההרצאה הקודמת: Grid Layout

ההרצאה הבאה: Main Layout

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

  • יצירת Layout
  • יצירת קומפוננטה של Layout ב-React
  • Page Layout - Float - CSS
  • מבנה אתר אינטרנט - Grid Layout - חלק 1

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

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