יצירת אפליקציה בסיסית אינטראקטיבית של רולר קוביות

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

עליכם להשתמש בעורך הפריסה ב-Android Studio כדי לבנות את פריסת האפליקציה, ולאחר מכן לכתוב את קוד Kotlin מה קורה כשלוחצים על Button.

דרישות מוקדמות

• איך ליצור ולהפעיל אפליקציה "שלום, עולם!" ב-Android Studio.
• מכיר את TextViews ואת ImageViews באפליקציה.
• כיצד לשנות את המאפיינים של TextView בעורך הפריסה.
• לחלץ טקסט למשאב מחרוזת כדי להקל על תרגום האפליקציה ועל שימוש חוזר במחרוזות.
• יסודות התכנות של Kotlin כפי שנלמד ב-Codelabs הקודמים.

מה תלמדו

• איך להוסיף Button לאפליקציה ל-Android.
• איך להוסיף את ההתנהגות כשמקישים על Button באפליקציה.
• איך לפתוח ולשנות את הקוד של אפליקציה (Activity).
• איך להציג הודעה של Toast.
• איך לעדכן את התוכן של TextView בזמן שהאפליקציה פועלת.

מה תפתחו

• אפליקציית Android לקוביות קוביות עם Button שמטילה קוביות ומעדכנת את הטקסט שעל המסך ומציגה את התוצאה בסוף.

מה צריך?

• מחשב עם Android Studio מותקן.

כך ייראה האפליקציה לאחר השלמת שיעור ה-Lab הזה.

יצירת פרויקט 'פעילות ריקה'

1. אם כבר יש לכם פרויקט פתוח ב-Android Studio, עוברים אל קובץ > חדש > פרויקט חדש... כדי לפתוח את המסך יצירת פרויקט חדש.
2. בקטע יצירת פרויקט חדש, יוצרים פרויקט Kotlin חדש באמצעות התבנית פעילות ריקה.
3. קוראים לאפליקציה "Dice Roller" עם רמת API מינימלית של 19 (KitKat).

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

4. הפעלת האפליקציה החדשה אמורה להיראות כך.
   

פתיחת עורך הפריסה

1. בחלון Project (פרויקט), לוחצים לחיצה כפולה על activity_main.xml (app > res > layout > activity_main.xml) כדי לפתוח אותו. אתם אמורים לראות את עורך הפריסה, רק &"שלום עולמי" TextView במרכז האפליקציה.
   

בשלב הבא, מוסיפים Button לאפליקציה. Button הוא רכיב בממשק המשתמש (UI) ב-Android, שהמשתמש יכול להקיש עליו כדי לבצע פעולה.

במשימה הזו, מוסיפים Button מתחת ל-"שלום עולם" TextView. ה-TextView וה-Button ימוקמו בתוך ConstraintLayout, שהם סוג של ViewGroup.

כאשר יש Views בתוך ViewGroup, Views נחשבים כילדים של ההורה ViewGroup. במקרה של האפליקציה שלך, TextView ו-Button ייחשבו כילדים של ההורה ConstraintLayout.

עכשיו צריך להוסיף Button כצאצא של ConstraintLayout הקיים באפליקציה.

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

הוספת לחצן לפריסה

1. יש לגרור Button מה-Palette אל תצוגת Design, ולמקם אותו מתחת ל-"שלום World" TextView.
   
2. מתחת ללוח בעץ הרכיבים, מוודאים שה-Button וה-TextView מופיעים מתחת ל-ConstraintLayout (כצאצא של ה-ConstraintLayout).
3. חשוב לשים לב לשגיאה על כך שהButton לא מוגבלת. מאחר שButton נמצא בConstraintLayout, עליך להגדיר אילוצים אנכיים ואופקיים כדי למקם אותו.

הצבת הלחצן

בשלב זה עליך להוסיף מגבלה אנכית מהחלק העליון של Button לחלק התחתון של TextView. פעולה זו תמקם את Button מתחת ל-TextView.

1. בתצוגה עיצוב, בקצה העליון של Button, לוחצים לחיצה ארוכה על העיגול הלבן עם הגבול הכחול. גוררים את הסמן והחץ יעקוב אחר הסמן. משחררים כשמגיעים לקצה התחתון של "שלום עולם" TextView. פעולה זו מגדירה אילוץ פריסה, והButton מחליק ישירות מתחת ל-TextView.
   
2. מעיינים במאפיינים שבצד שמאל של עורך הפריסה.
3. בווידג'ט של המגבלה אפשר להבחין במגבלת פריסה חדשה שמופיעה בחלק התחתון של TextView, Top → BottomOf textView (0dp) . (0dp) פירושו שיש שוליים של 0. יש לך גם שגיאה לגבי אילוצים אופקיים.
   
4. הוספת מגבלה אופקית מצד ימין של Button לצד השמאלי של הורה ConstraintLayout.
5. חוזרים על הצד הימני של Buttonאל הקצה הימני של ConstraintLayout. התוצאה אמורה להיראות כך:

6. כאשר השדה Button עדיין נבחר, הווידג'ט של המגבלה אמור להיראות כך. שימו לב לשני אילוצים נוספים שנוספו: Start ← StartOf parent (0dp) ו-EndOf → EndOf כולם (0dp). כלומר, Button ממורכז אופקית בהורה, ConstraintLayout.
   

7. מריצים את האפליקציה. היא אמורה להיראות כמו צילום המסך שבהמשך. ניתן ללחוץ על Button, אבל הוא עדיין לא עושה דבר. בואו נמשיך!

שינוי הטקסט של הלחצן

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

במקום שהתווית Button תוצג כ-"לחצן" צריך לשנות אותה למשמעות של הלחצן: מה הלחצן יעשה: "Roll"

1. בעורך הפריסה, לאחר בחירת Button, עוברים אל מאפיינים, משנים את הטקסט לגליל ומקישים על המקש Enter (Return ב-Mac).

2. בעץ הרכיבים, מופיע משולש אזהרה כתום לצד Button. אם מעבירים את העכבר מעל למשולש, מופיעה הודעה. מערכת Android Studio זיהתה מחרוזת בתוך הקוד ("Roll") בקוד האפליקציה ומציעה שימוש במשאב מחרוזת במקום זאת.

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

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

הודעת האזהרה המלאה תיפתח.

4. בחלק התחתון של ההודעה, בקטע הצעות לתיקון לוחצים על הלחצן תיקון. (ייתכן שתצטרכו לגלול למטה).
5. תיבת הדו-שיח חילוץ משאב תיפתח. כדי לחלץ מחרוזת, צריך להעתיק את הטקסט "Roll" וליצור משאב מחרוזת בשם roll ב-strings.xml (app > res > value >string.xml). ערכי ברירת המחדל נכונים, ולכן יש ללחוץ על אישור.

6. שימו לב: במאפיינים, במאפיין הטקסט של Button כתוב עכשיו @string/roll, ומתייחס למשאב שיצרתם עכשיו.
   

בתצוגה עיצוב, הButton צריך עדיין לכתוב Roll עליו.

עיצוב תצוגת טקסט

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

1. בכלי העיצוב, בוחרים את ה-TextView כך שהמאפיינים שלו יופיעו בחלון מאפיינים.
2. משנים את הערך של textSize של TextView ל-36sp כך שיהיה גדול וקריא. ייתכן שתצטרכו לגלול כדי למצוא את האפשרות textSize.

3. יש לנקות את מאפיין הטקסט של TextView. אין צורך להציג דבר בTextView עד שהמשתמש יבצע קוביות.

עם זאת, מומלץ מאוד לראות טקסט כלשהו ב-TextView בזמן עריכת הפריסה והקוד של האפליקציה. לשם כך אפשר להוסיף טקסט ל-TextView שיוצג רק בתצוגה המקדימה של הפריסה, אבל לא כשהאפליקציה פועלת.

.

4. בוחרים את TextView בעץ הרכיבים.
5. בקטע מאפיינים נפוצים, מאתרים את המאפיין text ומתחתיו מאפיין נוסף של text עם סמל של כלי. המאפיין text הוא מה שיוצג למשתמש כשהאפליקציה פועלת. המאפיין text עם סמל מפתח הברגים הוא המאפיין "tools Text" , שמתאים רק לכם כמפתח.
6. מגדירים את הטקסט של הכלים כ-"1" ב-TextView (למשל, כדי להטיל על קוביות של 1 קוביות). הפרמטר "1" יופיע רק ב-Design Editor שב-Android Studio, אבל לא יופיע כשאתם מפעילים את האפליקציה במכשיר או באמולטור בפועל.

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

7. מעיינים באפליקציה בתצוגה המקדימה. הפרמטר "1" מוצג.

8. יש להפעיל את האפליקציה. כך האפליקציה נראית כשהיא פועלת באמולטור. הסימן & "1&; לא מוצג. זו ההתנהגות הנכונה.

מצוין, סיימת עם השינויים בפריסה!

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

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

Activity מספק את החלון שבו האפליקציה מושכת את ממשק המשתמש. בדרך כלל, Activity מציג את כל המסך של האפליקציה שפועלת. בכל אפליקציה יש פעילות אחת או יותר. הפעילות ברמה העליונה או הראשונה נקראת בדרך כלל MainActivity, ומסופקת על ידי תבנית הפרויקט. לדוגמה, כשמשתמש גולל ברשימת האפליקציות במכשיר שלו ומקישים על סמל האפליקציה &מירכאות; רולר קוביות; מערכת Android תפעיל את MainActivity באפליקציה.

בקוד MainActivity, עליך לספק פרטים על הפריסה של Activity' ועל האופן שבו המשתמש צריך לקיים איתם אינטראקציה.

• באפליקציית 'כרטיס יום הולדת', יש Activity אחד שמציג את ההודעה והתמונה של יום ההולדת.
• באפליקציה 'קוביות קוביות' יש Activity אחד שמציג את הפריסה TextView והButton שיצרת עכשיו.

באפליקציות מורכבות יותר, ייתכן שיהיו כמה מסכים ביותר מActivity. לכל Activity יש מטרה ספציפית.

לדוגמה, באפליקציית גלריית תמונות אפשר להוסיף Activity כדי להציג רשת של תמונות, Activity תמונות נוספות כדי להציג תמונה בודדת וActivity נוספות על עריכת תמונות.

פותחים את קובץ.PrimaryActivity.kt

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

1. עוברים לקובץ MainActivity.kt (app > Java > com.example.diceroller > MainActivity.kt ופותחים אותו). זה מה שצריך לראות. אם מופיע import..., לוחצים על ... כדי להרחיב את הייבוא.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

לא צריך להבין כל מילה בקוד שלמעלה, אבל צריך להיות לכם מושג כללי לגבי מה שהיא עושה. ככל שתעבוד יותר עם קוד Android, כך הוא יכיר אותך יותר.

2. יש לבדוק את קוד קוטלין לכיתה MainActivity, המזוהה על ידי מילת המפתח class ולאחר מכן את השם.

class MainActivity : AppCompatActivity() {
    ...
}

3. לתשומת ליבך, אין פונקציה main() ב-MainActivity.
   
   מוקדם יותר, למדת שכל תוכנית Kotlin חייבת לכלול פונקציה main(). אפליקציות ל-Android פועלות בצורה שונה. במקום להתקשר לפונקציה main(), מערכת Android מתקשרת לשיטת onCreate() של MainActivity כשהאפליקציה נפתחת בפעם הראשונה.
   
4. עליך למצוא את השיטה onCreate(), שנראית כמו הקוד הבא.

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

תלמדו על override במעבדה מאוחרת יותר של קוד Lab (אז אל דאגה! שאר השיטה של onCreate() מגדירה את MainActivity באמצעות קוד הייבוא והפריסה הראשונית של setContentView().

5. שימו לב לקווים שמתחילים ב-import.
   

Android מספק מסגרת של כיתות רבות כדי להקל על הכתיבה של אפליקציות ל-Android, אבל צריך לדעת בדיוק לאיזו כיתה אתם מתכוונים. ניתן לציין באיזו מחלקה יש להשתמש בקוד באמצעות הצהרת import. לדוגמה, הכיתה Button מוגדרת בandroid.widget.Button.

ייבוא אוטומטי מתבצע

אם משתמשים בכיתות נוספות, יכול להיות שיהיה הרבה עבודה להוסיף הצהרות import. למזלנו, Android Studio עוזר לכם לבחור את הייבוא הנכון כשאתם משתמשים בכיתות שניתנו על ידי אחרים. בשלב הזה צריך להגדיר ש-Android Studio יוסיף באופן אוטומטי ייבוא כשאפשר, ולהסיר באופן אוטומטי מהייבוא את הייבוא שאינו בשימוש.

1. ב-Android Studio, פותחים את ההגדרות דרך קובץ > הגדרות אחרות > העדפות לפרויקטים חדשים.
2. מרחיבים את האפשרות הגדרות אחרות > ייבוא אוטומטי. בקטעים Java ו-Kotlin, מוודאים שהאפשרויות הוספת ייבוא חד-פעמי בזמן אמת ואופטימיזציה של ייבוא נתונים מיידיים (עבור הפרויקט הנוכחי) מסומנת. חשוב לשים לב שיש שתי תיבות סימון בכל קטע.
   
   ההגדרות של ייבוא חד-משמעי מציינות ל-Android Studio להוסיף הצהרת ייבוא באופן אוטומטי, כל עוד היא יכולה לקבוע באיזו תצוגה להשתמש. ההגדרות של ייבוא ייבוא מורה ל-Android Studio להסיר כל ייבוא שאינו בשימוש על ידי הקוד שלך.
   
3. שומרים את השינויים וסוגרים את ההגדרות בלחיצה על אישור.

עכשיו, אחרי שיידעת קצת יותר על MainActivity, אפשר לשנות את האפליקציה כך שלחיצה על Button תבצע פעולה כלשהי במסך.

הצגת הודעה כשלוחצים על הלחצן

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

1. יש להוסיף את הקוד הבא לשיטה onCreate() אחרי הקריאה ל-setContentView(). השיטה findViewById() מוצאת את Button בפריסה. R.id.button הוא מזהה המשאב של Button, שהוא מזהה ייחודי עבורו. הקוד שומר הפניה לאובייקט Button במשתנה שנקרא rollButton, ולא לאובייקט Button עצמו.

val rollButton: Button = findViewById(R.id.button)

הערה: Android מקצה באופן אוטומטי מספרי מזהה למשאבים של האפליקציה. לדוגמה, ללחצן זיכרון יש מזהה משאב, ולמחרוזת של טקסט הלחצן יש גם מזהה משאב. מזהי משאבים הם בפורמט R.<type>.<name>; לדוגמה, R.string.roll. עבור מזהי View, ה-<type> הוא id, לדוגמה, R.id.button.

הקוד שומר את ההפניה לאובייקט Button במשתנה שנקרא rollButton, ולא לאובייקט Button עצמו.

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

עכשיו השיטה onCreate() אמורה להיראות כך.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

2. עליך לוודא שמערכת Android Studio הוסיפה באופן אוטומטי הצהרת import עבור ה-Button.
   לידיעתך, יש עכשיו 3 הצהרות ייבוא – ההצהרה השלישית נוספה באופן אוטומטי.
   

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

הערה:אם הפעלת הייבוא האוטומטי לא הצליחה, Button יודגש באדום. כדי להוסיף באופן ידני את הייבוא הנכון, אפשר למקם את סמן הטקסט בתוך המילה Button, ולאחר מכן ללחוץ על Alt+Enter (Option+Enter ב-Mac).

בשלב הבא, צריך לשייך את הקוד אל Button כדי שניתן יהיה להפעיל את הקוד כשמקישים על ה-Button. האזנה לקליק היא קוד לביצוע פעולות במקרה של הקשה או קליק. אפשר לחשוב על זה כקוד שישב, &מירכאות;listing" כדי שהמשתמש ילחץ על Button.

3. יש להשתמש באובייקט rollButton ולהגדיר בכלי האזנה לקליקים באמצעות קריאה לשיטה setOnClickListener().

rollButton.setOnClickListener {
}

בזמן ההקלדה, עשויות להופיע מספר הצעות ב-Android Studio. במקרה הזה, בוחרים באפשרות setOnClickListener {...}.

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

4. יש ליצור Toast עם הטקסט "Dice Rolled!" על ידי התקשרות ל-Toast.makeText().

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. לאחר מכן, אומרים ל-Toast להציג את עצמם על ידי קריאה לשיטה show().

toast.show()

כך נראה הכיתה המעודכנת של MainActivity. ההצהרות package ו-import עדיין מופיעות בחלק העליון של הקובץ:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

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

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

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

מעולה! לחיצה על הלחצן הפכה את ההודעה לקופצת! זו הפעם הראשונה שכתבת קוד קוטלין ל-Android!

עדכון תצוגת הטקסט כאשר לוחצים על הלחצן

במקום להציג הודעת Toast זמנית, תוכלו לכתוב קוד לעדכון ה-TextView במסך בלחיצה על הלחצן גלי.

1. חוזרים אל activity_main.xml (app > res > הפריסה >activity_main.xml)
2. לוחצים על TextView.
3. חשוב לזכור שה-id [מזהה] הוא textView.
   
4. פותחים את MainActivity.kt (app > javascript > com.example.diceroller > MainActivity.kt)
5. מחיקת שורות הקוד שמניבות את Toast ומציגות אותו.

rollButton.setOnClickListener {
  
}

6. במקום זאת, יש ליצור משתנה חדש בשם resultTextView כדי לאחסן את TextView.
7. אפשר להשתמש ב-findViewById() כדי למצוא את textView בפריסה באמצעות המזהה שלו, ולעיין בקובץ עזר.

val resultTextView: TextView = findViewById(R.id.textView)

8. יש להגדיר את הטקסט ב-resultTextView ל-"6" במירכאות.
   

resultTextView.text = "6"

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

כך הכיתה אמורה להיראות: MainActivity

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. מריצים את האפליקציה. לוחצים על הלחצן. עליו לעדכן את ה-TextView ל-"6".

הדבר היחיד שחסרים בו הוא הקוביות. אפשר להשתמש שוב בכיתה Dice מה-codelab הקודם, שמטפל בלוגיקה של הטלת קוביות.

הוספה של רמת הקוביות

1. אחרי הסוגריים המסולסלים האחרונים בכיתה MainActivity, יוצרים את הכיתה Dice בשיטת roll().

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. לתשומת ליבכם: Android Studio מדגיש את numSides באמצעות קו אפור גלי. (ייתכן שיחלפו כמה רגעים עד שתוצג ההודעה).
3. מעבירים את הסמן מעל ל-numSidesומופיע חלון קופץ עם הכיתוב Property 'numSides' יכול להיות פרטי.
   

סימון numSides בתור private ינגיש אותו רק בתוך הכיתה Dice. מאחר שהקוד היחיד שישתמש ב-numSides הוא בתוך Dice, אז אפשר להגיש את הארגומנט הזה private לכיתה Dice. ביחידה הבאה אפשר לקבל מידע נוסף על המשתנים של private לעומת public.

4. כדי לתקן את הבעיה ב-Android Studio, לוחצים על Make 'numSides' 'private'.

יצירת שיטת rollDice()

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

1. יש להחליף את הקוד ב event listener שמגדיר את הטקסט ל-"6" בקריאה ל-rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. מכיוון ש-rollDice() עדיין לא הוגדר, מערכת Android Studio מסמנת שגיאה ומציגה את rollDice() באדום.
3. אם מעבירים את העכבר מעל לפריט rollDice(), מערכת Android Studio מציגה את הבעיה וכמה פתרונות אפשריים.

4. לוחצים על פעולות נוספות... כדי להציג תפריט. מערכת Android Studio מציעה לך יותר עבודה!

טיפ: אם קשה להציג את הסמן ואז לוחצים על פעולות נוספות... אפשר ללחוץ על rollDice() ולהקיש על Alt+Enter (Option+Enter ב-Mac) כדי להציג את התפריט.

5. בוחרים באפשרות Create function 'rollDice' . מערכת Android Studio יוצרת הגדרה ריקה לפונקציה בתוך MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

יצירת מופע חדש של אובייקט קוביות

בשלב זה צריך להגדיר את השיטה rollDice() ליצור קובייה, ואז להציג את התוצאה בTextView.

1. בתוך rollDice(), מוחקים את השיחה עם TODO().
2. יש להוסיף קוד כדי ליצור קוביות עם 6 צדדים.

val dice = Dice(6)

3. הטלת קובייה על ידי קריאה לשיטה roll() ושומרת את התוצאה במשתנה שנקרא diceRoll.

val diceRoll = dice.roll()

4. כדי למצוא את TextView, אפשר להתקשר ל-findViewById().

val resultTextView: TextView = findViewById(R.id.textView)

המשתנה diceRoll הוא מספר, אבל TextView משתמש בטקסט. אפשר להשתמש בשיטת toString() ב-diceRoll כדי להמיר אותה למחרוזת.

5. יש להמיר את diceRoll למחרוזת ולהשתמש בה כדי לעדכן את הטקסט של resultTextView.

resultTextView.text = diceRoll.toString()

כך נראית השיטה rollDice():

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

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

מעולה, לך!

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

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

מדריך לסגנון Android

כחלק מתהליך העבודה שלך על צוותים, מומלץ לחברי הצוות לכתוב קוד באופן דומה, כדי לשמור על עקביות בקוד. לכן, יש ב-Android מדריך בנושא סגנון – כתיבת קוד Android – מוסכמות, פורמט ושיטות מומלצות נוספות. יש לפעול בהתאם להנחיות הבאות כשכותבים קוד Android: מדריך סגנון Kotlin למפתחי Android.

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

איפוס הקוד

תמצית הקוד

אפשר לקצר את הקוד ולרכז את הקוד במספר שורות קצר יותר. לדוגמה, זהו הקוד שמגדיר את ה-click listener ב-Button.

rollButton.setOnClickListener {
    rollDice()
}

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

rollButton.setOnClickListener { rollDice() }

עיצוב מחדש של הקוד

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

1. בכיתה MainActivity.kt, בוחרים את כל הטקסט שבקובץ עם מקש הקיצור Control+A ב-Windows (או Command+A ב-Mac). לחלופין, אפשר להיכנס לתפריט ב-Android Studio עריכה > בחירת הכול.
2. אחרי שבוחרים את כל הטקסט שבקובץ, עוברים לתפריט Code > עיצוב מחדש של קוד ב-Android Studio, או משתמשים במקש הקיצור Ctrl+Alt+L (או Command+Option+L ב-Mac).

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

הוספת תגובה לקוד

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

מקובל להוסיף תגובה לכל כיתה (MainActivity וDice הן הכיתות היחידות באפליקציה שלך) ולכל שיטה שכותבים. יש להשתמש בסמלים /** ו-**/ בתחילת התגובה ובסופה כדי לציין למערכת שזהו אינו הקוד. המערכת תתעלם מהשורות האלה כאשר המערכת תפעיל את הקוד.

דוגמה לתגובה בכיתה:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

דוגמה לתגובה על שיטה:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

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

דוגמה ל-2 תגובות בתוך שיטה:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

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

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

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

כתובת ה-URL של קוד הפתרון: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

כדי לקבל את הקוד עבור מעבדת הקוד הזו מ-GitHub ולפתוח אותו ב-Android Studio, יש לבצע את הפעולות הבאות.

1. מפעילים את Android Studio.
2. בחלון Welcome to Android Studio, לוחצים על Check a project from control version.
3. לוחצים על Git.

4. בתיבת הדו-שיח שכפול מאגר, מדביקים את כתובת ה-URL של הקוד שסופק בתיבה כתובת URL.
5. לוחצים על Test, בודקים ומוודאים שמופיעה בועה קופצת בצבע ירוק שאומרת החיבור הצליח.
6. אם רוצים, אפשר לשנות את הספרייה למשהו אחר שמוגדר כברירת המחדל.

7. לוחצים על שכפול. Android Studio מתחיל לאחזר את הקוד.
8. בחלון הקופץ תשלום מבקרת הגרסה, לוחצים על כן.

9. ממתינים פותחים את Android Studio.
10. יש לבחור את המודול הנכון של קוד הקוד למתחילים או לקוד הפתרון שלכם.

11. לוחצים על הלחצן Run (הרצה) כדי ליצור את הקוד ולהריץ אותו.

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

• הוספת Button באפליקציה ל-Android באמצעות עורך הפריסה.
• יש לשנות את המחלקה MainActivity.kt כדי להוסיף התנהגות אינטראקטיבית לאפליקציה.
• יש לך אפשרות להציג הודעה של Toast כפתרון זמני כדי לאמת את המסלול שלך.
• הגדרת האזנה בלחיצה עבור Button באמצעות setOnClickListener() כדי להוסיף התנהגות כאשר לוחצים על Button.
• כשהאפליקציה פועלת, אפשר לעדכן את המסך באמצעות שיטות התקשרות ברכיבים הבאים: TextView, Button, או רכיבי ממשק משתמש אחרים בפריסה.
• מוסיפים תגובה לקוד כדי לעזור לאנשים אחרים שקוראים את הקוד להבין מה הייתה הגישה שלכם.
• מזינים את הקוד מחדש ומנקים את הקוד.

• Button כיתה
• Toast כיתה
• TextView כיתה
• מדריך הסגנון Kotlin למפתחי Android

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

מבצעים את הפעולות הבאות:

1. מוסיפים קוביות נוספות לאפליקציה. לחיצה על הלחצן פונקציה צריכה להעביר 2 קוביות. התוצאות צריכות להופיע בשני TextViews שונים במסך.

בודקים את העבודות:

האפליקציה הסופית צריכה לפעול ללא שגיאות ולהציג שתי קוביות באפליקציה.