Table Layout
TableLayout. הוא דומה לתגית table ב-HTML, אבל בלי תאים: שמים רכיבים ישירות בשורות.RadioButton ושלושה CheckBox.TableLayout ומגדירים padding של 16dp. בתוכו כל שורה היא TableRow.TextView עם הטקסט order your favorite pizza, 20sp ומודגש. כדי למרכז אותו משתמשים ב-gravity של center_horizontal, אבל כברירת מחדל הוא בעמודה הראשונה. לכן מוסיפים layout_span בערך 4, כדי שיתפרס על ארבע עמודות.TableLayout מגדירים stretchColumns בערך 0, כדי שהעמודה הראשונה תתרחב על כל המקום הפנוי. בלי זה הטקסט לא מוצג כמו שצריך.View רגיל, שמתפרס על 4 עמודות, בגובה 2dp וברקע כחול. מוסיפים layout_marginBottom של 20dp לשורות כדי לרווח.TextView מודגשים עם הטקסטים cheese, olives ו-mushrooms. כדי להזיז אותם מהעמודה הראשונה נותנים לראשון layout_column בערך 1.RadioButton עם הטקסט napolitana, ואחריו שלושה CheckBox. הראשון מסומן checked והאחרים לא. כל רכיב נכנס לעמודה משלו אוטומטית.layout_span מותח רכיב על כמה עמודות.layout_column מציב רכיב בעמודה מסוימת לפי אינדקס.stretchColumns מותח עמודה על כל המקום הפנוי.TableLayout.פרקי ההרצאה: Table Layout
תמלול ההרצאה: Table Layout
הטקסט המלא של הדקות הראשונות בהרצאה «Table Layout» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
ה-layout הבא שאנחנו הולכים לראות איך אפשר לעבוד איתו נקרא TableLayout. TableLayout מאפשר לנו להציג מידע טבלאי. קודם כל בואו נראה לאן בדיוק אנחנו רוצים להגיע מבחינת האפיון הדרוש.
אז יש לנו כאן את התמונה הזאת שבה אנחנו כאילו בונים אפליקציה להזמנת פיצה. יש לנו פה למעלה איזושהי כותרת Order your favorite pizza יש לנו פה איזשהו קו הפרדה ואז אנחנו רואים שיש לנו מעין טבלה כאשר בשורה הראשונה אנחנו רואים שיש לנו סך הכל שלוש כותרות ויש לנו עכשיו שורות שורות
שבכל שורה יש פיצה אחרת שניתן להזמין אותה. הרכיב הראשון בכל שורה זה radio button ולאחר מכן יש לנו שלושה רכיבי checkbox. זאת אומרת שבכל שורה מכאן והלאה יש ארבעה רכיבים.
בשורה הקודמת הזאת יש שלושה רכיבים פה יש רכיב אחד ופה יש רכיב אחד. מה זה לאאוט של טייבל לאאוט טייבל לאאוט בא לתת מענה לטבלה בדומה לשפת html הרבה מתכנתים מכירים את שפת html ב html יש תגית טייבל שם מה שקורה זה שבתוך טייבל יש שורות שורות n עמודות בטבלה בשפת html שאיתה בונים אתרי אינטרנט
יש שורה ובתוך שורה אנחנו יכולים להגדיר מה שנקרא תאים תאים ובכל תא לשים איזה רכיבים שאנחנו רוצים. אז הטייבל לייאאוט שיש לנו כאן באנדרואיד בא בעצם להראות או להיות איזושהי תגיד שהיא מאוד דומה לתגיד הזאת.
גם כאן יש לנו טייבל לייאאוט ובתוכה יש לנו שורות שורות אבל אין לנו תאים ספציפיים בתוכה, אלא פשוט אנחנו זורקים רכיבים בתוך השורות ואז אנחנו מגדירים כל מיני נתונים לרכיבים האלה בשביל להגדיר האם הרכיב הזה נמצא בעצם בשורה או ביתר דיוק בעמודה השנייה, האם הוא מתפרס על הכל וכו'.
אז הרכיב הזה הוא מאוד דומה ל-Table של ה-HTML, אם אתם מכירים, אם לא זה ממש בסדר. בואו נצלול פנימה ונראה איך אנחנו עובדים עם Table Layout.
דבר ראשון, נגיע ונחליף את ה-relative layout ל-table layout. אין לנו צורך כאן ב-tools, padding, כמו תמיד אנחנו מגדירים אחד ויחיד 16 dp עבור כולם.
אז יש לנו פה layout של table layout וכל מה שאנחנו צריכים להגדיר בתוכו זה פשוט שורות שורות. אז מה יש לנו כאן?
יש לנו פשוט מאוד table row, דומה ל-HTML. בתוך הטייבל רואו אנחנו יכולים פשוט לזרוק את הרכיבים השונים. נתחיל עם הטקסט ויו הראשון, שמה שאנחנו רוצים להגדיר בתוכו זה קודם כל טקסט.
אנחנו רוצים שיהיה שם order your favorite pizza, נגדיר אותו כtext size של 20sp, נגדיר אותו כtext style bold, אנחנו רוצים לזרוק אותו בדיוק באמצע אז אם אנחנו זוכרים נכון זה יהיה גרוויטי של סנטר הוריזונטל הדבר הזה אמור לזרוק אותו באמצע והוא לא זורק אותו באמצע מפני שבי דיפולט הדבר הזה הטקסט דיו נמצא כעמודה ראשונה אז כל מה שאנחנו צריכים
לעשות זה לגרום לו להתפרס על ארבע עמודות אז יש לנו כאן את האטריביוט layout span 4 וזה אומר שעכשיו אנחנו בעצם נתפרסים על ארבע עמודות שלמות. עכשיו הסיבה שאנחנו עדיין לא רואים את הטקסט היא מפני שיש לנו כביכול כאן התפרסות על פני ארבע עמודות וזה די משבש כאן את כל הטקסט שאמור להיות מוצג.
מה שאנחנו יכולים לעשות זה פשוט לומר לטייבל לייאאוט 2 טראץ' קולומס 0. זה אומר שעמודה מספר 0 שזאת העמודה הראשונה צריך בעצם לעשות עבורה סטראץ' למתוח אותה על כל העמודות האחרות במידה ואין עמודות כאלה.
וכאן אנחנו רואים באמת שאין לנו עוד עמודות יש לנו רק עמודה אחת כי יש לנו פה רכיב אחד ויחיד בתוך השורה. אז שוב מה יש לנו פה? יש לנו טייבל לייאוט שמחזיק לנו את כל הטבלה בתוכו אנחנו פשוט מגדירים שורות שורות כרגע הגדרנו שורה אחת וזורקים בתוכה רכיבים אנחנו רוצים רכיב אחד בלבד כשורה ראשונה אז פשוט שמנו את הרכיב האחד והיחיד הזה טקסט view הגדרנו את ההגדרות השונות שלו אמרנו
לו לתפוס ארבע עמודות ולהתפרס בעצם על כל מה שניתן במידה ואין עמודות נוספות שיש כאן ואין כאן עמודות נוספות אז פשוט אפשר שהוא יתפרס על הכל אנחנו רוצים שורה נוספת בואו נייצר נייצר פה עוד table row ובתוכה אנחנו רוצים להגדיר בעצם איזשהו קו כזה בואו נסתכל עוד פעם על התמונה היה לנו כאן את
order your favorite pizza ופה אנחנו רוצים איזשהו קו אז איך אנחנו עושים קו אז אנחנו יכולים פשוט להשתמש ברכיב בסיסי שנקרא view, view זה בעצם התגית שהיא או המחלקה שהיא מחלקת הבסיס של כל הרכיבים ואנחנו יכולים להשתמש איתה בשביל להציג סתם איזושהי צורה פשוטה גם כאן נגדיר שהתגית הזאת מספרסת על ארבע תגיות אחרות ארבע עמודות נגדיר לה איזשהו
height של שני dp ונגדיר לה איזשהו background כזה שיהיה לו צבע כחול 0 Red 0 Green ובואו נגדיר B כחול ואנחנו רואים את הקו הזה שהוא בצבע כחול עכשיו אנחנו רוצים טיפה לרווח אותם כמו שאנחנו רואים כאן בסרטוט עצמו אז מה אנחנו יכולים לרווח אנחנו יכולים לרווח את הטייבל רואו כאן
אנחנו יכולים להגדיר מרג'ין בוטום בואו ניתן לו 20 dp נטפל את הדבר הזה גם לשורה הבאה ויש לנו עכשיו שתי שורות ראשונות בואו ניגש ונבנה את השורה השלישית טייבל רואוט בתוך השורה השלישית אנחנו רוצים להגדיר טקסט ויוז עבור העמודות השונות בואו נסתכל מה היה לנו שמה אנו צ'יז אוליבס ומשרומס כל אלה נמצאים בשורה
אחת אז בייסיקלי יש לנו פה רק שלוש עמודות או שלושה רכיבים ליתר דיוק אבל הרכיב הזה נמצא בעמודה השנייה שהאינדקסט שלה הוא אחד אז בואו נראה איך אנחנו עושים את זה אז יש לנו פה את הטקסט view הראשון ואנחנו רוצים שהטקסט שלו יהיה