‫Android Kotlin Fundamentals 03.1: Create a fragment

ה-codelab הזה הוא חלק מהקורס Android Kotlin Fundamentals. כדי להפיק את המרב מהקורס הזה, מומלץ לעבוד על ה-codelabs לפי הסדר. כל ה-codelab של הקורס מפורטים בדף הנחיתה של ה-codelab בנושא יסודות Kotlin ל-Android.

ב-Codelab הזה תלמדו על Fragments ותיצרו Fragment בתוך אפליקציית Starter שנקראת AndroidTrivia. ב-codelab הבא תוכלו לקרוא מידע נוסף על ניווט ולבצע עבודה נוספת באפליקציית AndroidTrivia.

מה שכדאי לדעת

• העקרונות הבסיסיים של Kotlin
• איך יוצרים אפליקציות Android בסיסיות ב-Kotlin
• איך עובדים עם פריסות

מה תלמדו

• איך מוסיפים Fragment באופן סטטי לאפליקציה

הפעולות שתבצעו:

• יוצרים קטע בתוך פעילות.

ב-3 ה-codelab שמרכיבים את השיעור הזה, תעבדו על אפליקציה בשם AndroidTrivia. האפליקציה המוגמרת היא משחק שבו המשתמש עונה על שלוש שאלות טריוויה בנושא תכנות ל-Android. אם המשתמש עונה נכון על כל שלוש השאלות, הוא מנצח במשחק ויכול לשתף את התוצאות שלו.

אפליקציית AndroidTrivia ממחישה דפוסי ניווט ופקדים. האפליקציה מורכבת מכמה רכיבים:

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

בחלק העליון של האפליקציה מוצג תצוגה צבעונית שנקראת סרגל האפליקציה, שנקרא גם סרגל הפעולות.

ב-codelab הזה תעבדו עם אפליקציית התחלה שמספקת קוד תבנית ומחלקות של קטעים שנדרשים להשלמת אפליקציית הטריוויה.

1. מורידים את פרויקט Android Studio‏ AndroidTrivia-Starter.
2. פותחים את הפרויקט ב-Android Studio ומריצים את האפליקציה. כשהאפליקציה נפתחת, היא לא עושה שום דבר חוץ מלהציג את שם האפליקציה ומסך ריק.
   
   
   
3. בחלונית Project (פרויקט) ב-Android Studio, פותחים את התצוגה Project: Android (פרויקט: Android) כדי לעיין בקובצי הפרויקט. פותחים את התיקייה app > java כדי לראות את המחלקה MainActivity ואת מחלקות הפראגמנטים.
   
   
4. פותחים את התיקייה res > layout ולוחצים לחיצה כפולה על activity_main.xml. הקובץ activity_main.xml יופיע בכלי לעריכת פריסות.
5. לוחצים על הכרטיסייה עיצוב. בעץ הרכיבים של קובץ activity_main.xml, הפריסה הבסיסית מוצגת כפריסה אנכית LinearLayout.
   
   
   
   בפריסה לינארית אנכית, כל תצוגות הצאצא בפריסה מיושרות אנכית.

Fragment מייצג התנהגות או חלק מממשק משתמש (UI) בפעילות. אפשר לשלב כמה קטעי קוד בפעילות אחת כדי ליצור ממשק משתמש עם כמה חלוניות, ואפשר להשתמש שוב בקטע קוד בכמה פעילויות.

אפשר לחשוב על פרגמנט כעל חלק מודולרי של פעילות, כמו 'פעילות משנית' שאפשר להשתמש בה גם בפעילויות אחרות:

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

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

שלב 1: מוסיפים מחלקת Fragment

בשלב הזה יוצרים כיתה ריקה TitleFragment. מתחילים ביצירת מחלקת Kotlin בשביל פרגמנט חדש:

1. ב-Android Studio, לוחצים על מקום כלשהו בחלונית Project (פרויקט) כדי להחזיר את המיקוד לקבצי הפרויקט. לדוגמה, לוחצים על התיקייה com.example.android.navigation.
2. בוחרים באפשרות קובץ > חדש > מקטע > מקטע (ריק).
3. בשם הפרגמנט, משתמשים ב-TitleFragment. מבטלים את הסימון של כל תיבות הסימון, כולל יצירת XML של פריסה, הכללת שיטות ליצירת רכיבים והכללת קריאות חוזרות (callback) של ממשק.
4. לוחצים על סיום.
5. פותחים את קובץ ה-TitleFragment.kt fragment, אם הוא לא פתוח. הוא מכיל את ה-method‏ onCreateView(), שהיא אחת מה-methods שמופעלות במהלך מחזור החיים של fragment.
6. ב-onCreateView(), מסירים את הקטע return TextView(activity).apply, כולל השורה שמתחילה ב-setText. הפונקציה onCreateView() נשארת עם הקוד הבא בלבד:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

יצירת אובייקט קישור

הקטע לא יקומפל עכשיו. כדי לקמפל את הפראגמנט, צריך ליצור אובייקט binding ולנפח את התצוגה של הפראגמנט (שזה שווה לשימוש ב-setContentView() לפעילות).

1. בשיטה onCreateView() ב-TitleFragment.kt, יוצרים משתנה binding (val binding).
2. כדי להרחיב את התצוגה של קטע הקוד, קוראים לשיטה DataBindingUtil.inflate() באובייקט Binding של קטע הקוד, שהוא FragmentTitleBinding.
   
   מעבירים ארבעה פרמטרים ל-method:

• ‫inflater, שהוא LayoutInflater שמשמש להרחבת פריסת הקישור.
• משאב הפריסה ב-XML של הפריסה להרחבה. משתמשים באחת מהפריסות שכבר הוגדרו עבורכם, R.layout.fragment_title.
• container להורה ViewGroup. (הפרמטר הזה הוא אופציונלי.)
• ‫false לערך attachToParent.
  

2. מקצים את הקישור שמוחזר על ידי DataBindingUtil.inflate למשתנה binding.
3. השיטה מחזירה את binding.root, שמכיל את התצוגה המורחבת. השיטה onCreateView() שלכם נראית עכשיו כמו הקוד הבא:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

שלב 2: מוסיפים את קטע הקוד החדש לקובץ הפריסה הראשי

בשלב הזה מוסיפים את TitleFragment לקובץ הפריסה activity_main.xml של האפליקציה.

1. פותחים את res > layout > activity_main.xml ולוחצים על הכרטיסייה Text כדי לראות את קוד ה-XML של הפריסה.
2. בתוך האלמנט הקיים LinearLayout, מוסיפים אלמנט fragment.
3. מגדירים את המזהה של הפריט ל-titleFragment.
4. מגדירים את שם הקטע לנתיב המלא של מחלקת הקטע, שבמקרה הזה הוא com.example.android.navigation.TitleFragment.
5. מגדירים את הרוחב והגובה של הפריסה ל-match_parent.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

6. מריצים את האפליקציה. הפריט נוסף למסך הראשי.

פרויקט Android Studio: ‏ AndroidTriviaFragment

בשיעור ה-Codelab הזה הוספתם קטע לאפליקציית AndroidTrivia, ותמשיכו לעבוד עליה בשני שיעורי ה-Codelab הבאים בשיעור הזה.

• פרגמנט הוא קטע מודולרי של פעילות.
• לכל פרגמנט יש מחזור חיים משלו והוא מקבל אירועי קלט משלו.
• משתמשים בתג <fragment> כדי להגדיר את הפריסה של ה-Fragment בקובץ הפריסה של ה-XML.
• ניפוח הפריסה של fragment ב-onCreateView().
• אפשר להוסיף או להסיר קטע בזמן שהפעילות פועלת.

קורס ב-Udacity:

• פיתוח אפליקציות ל-Android באמצעות Kotlin

מסמכי תיעוד למפתחי Android:

• פריסה לינארית
• LinearLayout
• מחזור החיים של Fragment
• DataBindingUtil

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

• אם צריך, מקצים שיעורי בית.
• להסביר לתלמידים איך להגיש מטלות.
• בודקים את שיעורי הבית.

אנשי ההוראה יכולים להשתמש בהצעות האלה כמה שרוצים, ומומלץ להם להקצות כל שיעורי בית אחרים שהם חושבים שמתאימים.

אם אתם עובדים על ה-codelab הזה לבד, אתם יכולים להשתמש במשימות האלה כדי לבדוק את הידע שלכם.

עונים על השאלות הבאות

שאלה 1

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

• כשיוצרים קטע, מנפחים את הפריסה בשיטה onCreateView(). כשיוצרים פעילות, מנפחים את הפריסה ב-onCreate().
• לפעילות יש פריסה משלה, אבל לפראגמנט לא יכולה להיות פריסה משלה.
• לפעילות יש מחזור חיים משלה, אבל ל-Fragment אין.
• כשמנפחים את הפריסה של פרגמנט או פעילות, אפשר להפנות לפריסה כ-R.layout.layoutname.

שאלה 2

אילו מההצהרות הבאות לגבי פרגמנטים נכונות? יש לבחור בכל האפשרויות הרלוונטיות.

• אפשר להשתמש ב-Fragment ביותר מפעילות אחת.
• פעילות אחת יכולה לכלול כמה פרגמנטים.
• אחרי שמגדירים פרגמנט במחלקת Kotlin, הפרגמנט מתווסף אוטומטית לקובץ הפריסה activity_main.xml.
• משתמשים בתג <fragment> כדי להגדיר את המקום בקובץ פריסה שבו צריך להוסיף את הפרגמנט.

למעבר לשיעור הבא: 3.2 הגדרת נתיבי ניווט

קישורים ל-codelabs אחרים בקורס הזה מופיעים בדף הנחיתה של ה-codelabs בנושא יסודות Android Kotlin.