Android Kotlin Fundamentals 03.1: יצירת מקטע

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

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

דברים שחשוב לדעת

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

מה תלמדו

• איך להוסיף שבר של נתונים סטטיים לאפליקציה

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

• ליצור שבר של פעילות.

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

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

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

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

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

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

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

אפשר לחשוב על מקטע כקטע מודולרי של פעילות מסוימת, כמו "sub activity" שאפשר להשתמש בו גם בפעילויות אחרות:

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

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

שלב 1: הוספת מחלקת מקטעים

בשלב זה עליך ליצור כיתה TitleFragment ריקה. כדי להתחיל, יש ליצור מחלקה של Kotlin עבור קטע חדש:

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

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

יצירת אובייקט מחייב

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

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

• 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 > הפריסה > activity_main.xml ולוחצים על הכרטיסייה טקסט כדי להציג את קוד ה-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

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

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

קורס אוניברסיטה:

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

התיעוד של מפתח Android:

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

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

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

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

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

מענה על השאלות הבאות

שאלה 1

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

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

שאלה 2

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

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

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

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