תנאים בקוטלין – חלק 2

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

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

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

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

• השלמת את תהליך יצירת הקוד של יצירת קוביות קוביות ב-Android עם לחצן.
• הרשאה לכתיבה של הצהרות על תהליך בקרה (if / else, when הצהרות).
• אפשרות לעדכן את ממשק המשתמש של האפליקציה על סמך קלט משתמש (שינוי הקובץ MainActivity.kt).
• הרשאה להוסיף האזנה לקליק אל Button.
• יכולים להוסיף משאבי תמונות לאפליקציה ל-Android.

מה תלמדו

• איך לעדכן ImageView בזמן שהאפליקציה פועלת.
• איך להתאים אישית את ההתנהגות של האפליקציה לפי תנאים שונים (באמצעות הצהרת when).

מה תפתחו

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

מה צריך?

• מחשב עם Android Studio מותקן.
• חיבור לאינטרנט כדי להוריד את תמונות הקוביות.

במשימה הזו, אתם מחליפים את TextView בפריסה ב-ImageView שמציגה תמונה של תוצאת הטלת קוביות.

פתיחת האפליקציה 'קוביות קוביות'

1. יש לפתוח את אפליקציית קוביות קוביות ולהפעיל אותה מאפליקציית Android Dice רולר עם לחצן ב-Android Studio.
   האפליקציה אמורה להיראות כך.

2. פותחים את activity_main.xml (app > res > הפריסה > activity_main.xml).
   פעולה זו פותחת את עורך הפריסה.

מחיקת תצוגת הטקסט

1. בעורך הפריסה, בוחרים את TextView בעץ הרכיבים.
   

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

2. לוחצים לחיצה ימנית ובוחרים באפשרות מחיקה או מקישים על המקש Delete.
3. בשלב זה, אפשר להתעלם מהאזהרה ב-Button. פותרים את הבעיה בשלב הבא.

הוספת ViewView לפריסה

1. יש לגרור ImageView מה-Palette אל תצוגת Designe ולמקם אותו מעל Button.

2. בתיבת הדו-שיח Select Resource, בוחרים באפשרות דמויות בקטע נתונים לדוגמה. זוהי התמונה הזמנית שבה תשתמשו עד להוספת התמונות של הקוביות במשימה הבאה.

3. לוחצים על OK (אישור). תצוגת העיצוב של האפליקציה אמורה להיראות כך.

4. בעץ הרכיבים, תבחינו בשתי שגיאות. לButton אין הגבלה אנכית ולImageView אין מגבלה אנכית או אנכית.

הButton לא מוגבלת אנכית כי הסרת את TextView שמתחתיו הוא מוקם במקור. עכשיו עליך למקם את ImageView ואת ה-Button שמתחתיו.

הצבת התמונה ולחצן התמונה

יש להציב את ImageView במרכז המסך, ללא קשר למיקום ה-Button.

1. הוספת אילוצים אופקיים ל-ImageView. יש לחבר את הצד השמאלי של ImageView לקצה השמאלי של ההורה ConstraintLayout.
2. יש לחבר את הקצה הימני של ImageView לקצה השמאלי של ההורה.
   הפעולה הזו תמרכז את ImageView לרוחב ההורה.

3. הוספת מגבלה אנכית למכשיר ImageView שמקשרת את החלק העליון של ImageView לראש ההורה.
   ImageView תזיז את החלק העליון אל ConstraintLayout.
   
4. יש להוסיף מסגרת אנכית אל ה-Button כדי לחבר את החלק העליון של ה-Button לתחתית ה-ImageView.
   ה-Button יופיע למעלה מתחת ל-ImageView.
   
5. בוחרים שוב את ה-ImageView ומוסיפים אילוץ אנכי שמחברים את החלק התחתון של ה-ImageView לתחתית ההורה.
   הפעולה הזו מרכזת את ImageView באופן אנכי ב-ConstraintLayout.

כל האזהרות לגבי אילוצים אמורים להימחק עכשיו.

לאחר מכן, התצוגה Dedesign אמורה להיראות כך, כאשר ImageView במרכז ו-Button מתחתיה.

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

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

הורדת תמונות של קוביות

1. צריך לפתוח את כתובת ה-URL הזו כדי להוריד קובץ zip של תמונות קוביות למחשב. יש להמתין שההורדה תושלם.
2. מאתרים את הקובץ במחשב (כנראה בתיקייה הורדות).
3. לוחצים לחיצה כפולה על קובץ ה-ZIP כדי לפתוח אותו. הפעולה הזו יוצרת תיקייה חדשה ב-DiceImages שמכילה 6 קובצי קוביות, שבהם מוצגים ערכי הקוביות מ-1 עד 6.

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

1. ב-Android Studio, לוחצים על הצגה > כלי של Windows > מנהל משאבים בתפריטים או לוחצים על הכרטיסייה מנהל המשאבים מימין לחלון פרויקט.
2. לוחצים על + מתחת למנהל המשאבים, ובוחרים באפשרות ייבוא של שרטוטים. פעולה זו תפתח דפדפן של קבצים.

3. מאתרים את 6 קובצי הקוביות ובוחרים אותם. ניתן לבחור את הקובץ הראשון, אך בלחיצה ארוכה על המקש Shift, יש לבחור את הקבצים האחרים.
4. לוחצים על פתיחה.

5. לוחצים על הבא ואז על ייבוא כדי לאשר שרוצים לייבא את 6 המשאבים.

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

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

חשוב! - תהיה לך אפשרות לראות את התמונות האלה בקוד Kotlin באמצעות מזהי המשאבים שלהן:

• R.drawable.dice_1
• R.drawable.dice_2
• R.drawable.dice_3
• R.drawable.dice_4
• R.drawable.dice_5
• R.drawable.dice_6

החלפה של תמונת הדמות לדוגמה

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

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

3. לוחצים על התצוגה המקדימה הקטנטנה של הדמות. תיפתח תיבת דו-שיח לבחירת משאב חדש בשביל ImageView.

4. בוחרים את האפשרות dice_1 של קו ביטול הנעילה ולוחצים על אישור.

וואו! ה-ImageView מופיע בכל המסך.

לאחר מכן, עליך להתאים את הרוחב והגובה של ImageView, כך שלא יוסתרו Button.

5. בחלון מאפיינים שמתחת לווידג'ט של אילוץ, מאתרים את המאפיינים layout_width ו-layout_height. הכתובת הנוכחית מוגדרת כרגע כ-wrap_content, כלומר ה-ImageView יהיה גבוה ורחב כמו התוכן (תמונת המקור) שנמצא בו.
6. במקום זאת, יש להגדיר רוחב קבוע של 160dp וגובה קבוע של 200dp ב-ImageView. מקישים על Enter.
   
   ImageView קטן הרבה יותר עכשיו.
   

ייתכן שהButton קרוב מדי לתמונה.

7. מוסיפים שוליים עליונה ללחצן 16dp על ידי הגדרתו בווידג'ט להגבלת.
   

לאחר שתצוגת העיצוב תתעדכן, האפליקציה תיראה טוב יותר!

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

שינוי תמונת הקוביות כשלוחצים על הלחצן

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

קיימת כרגע שגיאה באפליקציה בקובץ MainActivity.kt. אם תנסו להפעיל את האפליקציה, תופיע שגיאת build זו:

הסיבה לכך היא שהקוד עדיין מתייחס ל-TextView שמחקת מהפריסה.

1. פותחים את MainActivity.kt (app > javascript > com.example.diceroller > MainActivity.kt)

הקוד מתייחס ל-R.id.textView, אבל ל-Android Studio אין אפשרות לזהות אותו.

2. בתוך השיטה rollDice(), יש לבחור כל קוד שמתייחס ל-TextView ולמחוק אותו.

// Update the TextView with the dice roll
val resultTextView: TextView = findViewByID(R.id.textView)
resultTextView.text = dice.roll().toString()

3. עדיין בתוך rollRice(), יוצרים משתנה חדש בשם diceImage מסוג ImageView. יש להגדיר אותו שווה ל-ImageView מהפריסה. צריך להשתמש בשיטה findViewById() ולהעביר את מזהה המשאב של ImageView, R.id.imageView כארגומנט הקלט.

val diceImage: ImageView = findViewById(R.id.imageView)

אם לא ברור לך איך למצוא את מזהה המשאב המדויק של ImageView, אפשר לבדוק את ה-id [מזהה] בחלק העליון של החלון מאפיינים.

כשמציינים את מזהה המשאב הזה בקוד Kotlin, חשוב להקליד אותו בדיוק כמו (אות i קטנה, גדולה V, ללא רווחים). אחרת, תוצג ב-Android Studio שגיאה.

4. יש להוסיף את שורת הקוד הזו כדי לבדוק אם אפשר לעדכן את ImageView כראוי בלחיצה על הלחצן. הטלת קובייה לא תמיד תהיה &מירכאות;2&quot, אבל יש להשתמש בתמונה dice_2 למטרות בדיקה בלבד.

diceImage.setImageResource(R.drawable.dice_2)

הקוד הזה קורא לשיטה setImageResource() ב-ImageView, ומעביר את מזהה המשאב של התמונה dice_2. פעולה זו תעדכן את ה-ImageView במסך כדי להציג את התמונה dice_2.

השיטה rollDice() אמורה להיראות כך:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}

5. מפעילים את האפליקציה כדי לאמת שהיא פועלת ללא שגיאות.

האפליקציה צריכה להתחיל עם מסך ריק פרט ללחצן גלי.

אחרי שתקישו על הלחצן, תופיע תמונה של קוביות שבה מופיע הערך 2. כן!

הצלחת לשנות את התמונה על סמך הקשה על הלחצן! אתה מתקרב!

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

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

אם המשתמש מגלח 1, יש להציג את התמונה dice_1.

אם המשתמש מגלגל 2, מוצגת התמונה dice_2.

וכו'...

הערה: פסאודו-קוד הוא תיאור עממי של האופן שבו קוד מסוים עשוי לפעול. לשם כך יש להשתמש ברכיבים מסוימים של שפת המחשב, כמו if / else, אבל הם כוללים תיאורים גלויים לכול. המידע הזה יכול לעזור לתכנן את הגישה הנכונה לפני שבוחרים בכל הפרטים.

אפשר לכתוב את פסאודוקוד שלמעלה עם הצהרות if / else בקוטלין, על סמך הערך של הטלת קוביות.

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

עם זאת, הכתיבה של if / else לכל פנייה היא די חוזרת. אפשר לבטא את אותה לוגיקה בצורה פשוטה יותר באמצעות הצהרת when. תמציתי יותר (פחות קוד)! אפשר להשתמש בגישה הזו באפליקציה.

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

עדכון שיטת rollDice()

1. בשיטה rollDice(), יש למחוק את שורת הקוד שמגדירה את מזהה משאב התמונה לתמונה dice_2 בכל פעם.

diceImage.setImageResource(R.drawable.dice_2)

2. יש להחליף אותו בהצהרת when שמעדכנת את ImageView בהתאם לערך diceRoll.

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

שיטת rollDice() אמורה להיראות כך בסיום השינויים.

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}

3. מריצים את האפליקציה. לחיצה על לחצן היצירה משנה את תמונת הקוביות לערכים אחרים מלבד 2. זה עובד!

אופטימיזציה של הקוד

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

אולי שמת לב שהשיחה diceImage.setImageResource()מופיעה 6 פעמים בדוח התנועות בחשבון.

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

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

1. יש להחליף את הקוד שלמעלה בקוד הבא.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

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

2. לידיעתך, when מסומן בקו תחתון אדום. אם תעבירו את הסמן מעל העכבר, תוצג לכם הודעת שגיאה: ' when'כדי להוסיף את הביטוי המלא, עליכם להוסיף 'merchants' סניף.

הסיבה לכך היא שהערך של הביטוי when מוקצה לערך drawableResource, כך ש-when חייב להיות מקיף — הוא חייב לכלול את כל המקרים האפשריים, כך שערך תמיד יוחזר, גם אם משנים את המספר לקוביות עם 12 פאות. ב-Android Studio מומלץ להוסיף סניף של else. כדי לפתור את הבעיה, יש לשנות את הנרתיק של 6 ל-else. המקרים של 1 עד 5 זהים, אבל כל השאר, כולל 6, מנוהלים על ידי else.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   else -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

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

הגדרת תיאור מתאים של תוכן ב-ImageView

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

diceImage.contentDescription = diceRoll.toString()

קוראי המסך יכולים להקריא בקול את תיאור התוכן הזה, כך שאם הקוביות של התמונה מופיעות במסך, תיאור התוכן יוקרא בקול בתור "6".

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

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

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

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

   // Do a dice roll when the app starts
   rollDice()
}

הוספת קוד

אפשר להוסיף לקוד כמה תגובות שמתארות את מה שקורה בקוד שכתבת.

לאחר ביצוע כל השינויים האלה, כך עשויה להיראות השיטה שלך ב-rollDice().

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
   // Create new Dice object with 6 sides and roll the dice
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Find the ImageView in the layout
   val diceImage: ImageView = findViewById(R.id.imageView)

   // Determine which drawable resource ID to use based on the dice roll
   val drawableResource = when (diceRoll) {
       1 -> R.drawable.dice_1
       2 -> R.drawable.dice_2
       3 -> R.drawable.dice_3
       4 -> R.drawable.dice_4
       5 -> R.drawable.dice_5
       else -> R.drawable.dice_6
   }

   // Update the ImageView with the correct drawable resource ID
   diceImage.setImageResource(drawableResource)

   // Update the content description
   diceImage.contentDescription = diceRoll.toString()
}

לקובץ MainActivity.kt המלא, יש לראות את קוד הפתרון ב-GitHub המקושר למטה.

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

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

כתובת ה-URL של קוד הפתרון: https://github.com/google-developer-training/android-basics-kotlin-dice-roller-with-images-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 (הרצה) כדי ליצור את הקוד ולהריץ אותו.

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

• יש להשתמש ב-setImageResource() כדי לשנות את התמונה המוצגת ב-ImageView
• השתמשו בהצהרות של תהליך בקרה כמו if / else ביטויים או ביטויים מסוג when כדי לטפל במקרים שונים באפליקציה, לדוגמה, הצגת תמונות שונות בנסיבות שונות.

• ביטוי מסוג if בקוטלין
• ביטוי מסוג when בקוטלין
• ImageView.setImageResource()
• נגישות

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

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

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

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

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