איך יוצרים אפליקציית כרטיס יום הולדת?

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

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

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

מה תלמדו

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

מה תפתחו

  • אפליקציה ל-Android שמציגה פתיח ליום הולדת בפורמט טקסט.

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

מה צריך?

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

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

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

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

  1. מריצים את האפליקציה. האפליקציה אמורה להיראות כמו צילום המסך הבא.

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

מידע על ממשקי משתמשים

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

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

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

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

סוג אחד של ViewGroup הוא ConstraintLayout, שעוזר לך לארגן את Views בתוכו באופן גמיש.

מידע על עורך הפריסה

יצירת ממשק משתמש על ידי ארגון Views ו-ViewGroups היא חלק חשוב ביצירת אפליקציה ל-Android. Android Studio מספק כלי שעוזר לכם לעשות זאת, שנקרא עורך הפריסה. תשתמשו בעורך הפריסה כדי לשנות את ה&מירכאות;שלום עולם!" טקסט ל&ציטוט;יום הולדת!!" ומאוחר יותר כדי לסגנן את הטקסט.

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

  • בצד ימין (1) מופיע החלון Project (פרויקט), שראית קודם. רשימה של כל הקבצים המרכיבים את הפרויקט שלכם.
  • במרכז יוצגו שני שרטוטים (4) ו-(5) שמייצגים את פריסת המסך של האפליקציה. הייצוג מצד שמאל (4) הוא הערכה של מראה המסך כשהאפליקציה תפעל. היא נקראת תצוגת עיצוב.
  • הייצוג מצד ימין (5) הוא התצוגה של כחולה, שיכול להיות שימושי לפעולות ספציפיות.
  • הלוח (2) מכיל רשימות של סוגים שונים של Views שניתן להוסיף לאפליקציה.
  • עץ הרכיבים (3) הוא ייצוג שונה של הצפיות במסך. פירוט של כל הצפיות במסך.
  • בקצה השמאלי (6) מופיעים מאפיינים. היא מציגה את המאפיינים של View ומאפשרת לך לשנות אותם.

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

צילום מסך עם הערות בכל עורך הפריסה:

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

שינוי הודעת Hello World

  1. ב-Android Studio מוצאים את החלון פרויקט מימין.
  2. חשוב לשים לב לתיקיות ולקבצים האלה: תיקיית app כוללת את רוב הקבצים של האפליקציה שרוצים לשנות. תיקיית res מיועדת למשאבים, כמו תמונות או פריסות מסך. התיקייה פריסה מיועדת לפריסות מסך. הקובץ activity_main.xml מכיל תיאור של פריסת המסך.
  3. מרחיבים את התיקייה אפליקציה, ולאחר מכן את התיקייה res, ואז את התיקייה פריסה.
  4. לוחצים לחיצה כפולה על activity_main.xml.
    הפעולה הזו פותחת את activity_main.xml בכלי הפריסה ומציגה את הפריסה שהיא מתארת בתצוגה עיצוב.
  1. מעיינים ברשימת התצוגות שבעץ הרכיבים. לתשומת ליבך, יש ConstraintLayout, ומתחתיו TextView.
    התווים האלה מייצגים את ממשק המשתמש של האפליקציה שלך. כניסת TextView תופיע כי היא בתוך ConstraintLayout. עם הוספת Views ל-ConstraintLayout, הם יתווספו לרשימה הזו.
  2. שימו לב שלTextView יש "שלום עולם!" לצד הטקסט, זה הטקסט שמוצג לכם כשאתם מפעילים את האפליקציה.
  3. בעץ הרכיבים, לוחצים על TextView.
  4. מוצאים את האפשרות מאפיינים בצד שמאל.
  5. מוצאים את הקטע מאפיינים נמסרים.
  6. שימו לב שהמאפיין text שבקטע מאפיינים מנוסחים מכיל את שלום עולם!.

המאפיין text מציג את הטקסט שמודפס בתוך TextView.

  1. לוחצים על המאפיין text שבו מופיע הטקסט שלום עולם!.
  2. משנים את ההגדרה ל-יום הולדת שמח! ומקישים על Enter. אם מופיעה אזהרה לגבי מחרוזת הכתובה בתוך הקוד, אין צורך לדאוג לגביה כרגע. במעבדה הבאה תלמדו איך להסיר את האזהרה הזו.
  3. שימו לב שהטקסט השתנה בתצוגת העיצוב......(זה מגניב, תוכלו לראות את השינויים שלכם באופן מיידי!)
  4. מפעילים את האפליקציה ולוחצים על יום הולדת שמח!

נהדר, ביצעת את השינויים הראשונים באפליקציה ל-Android.

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

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

  1. בעורך הפריסה, לוחצים כדי לבחור את TextView במרכז הפריסה.
  2. לוחצים על מקש Delete.
    Android Studio מוחק את ה-TextView, ובאפליקציה מוצג עכשיו רק ConstraintLayout בעורך הפריסה ובעץ הרכיבים.

הוספה של תצוגת טקסט

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

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

  1. חיפוש TextView. הוא מופיע גם בקטגוריה Common וגם בקטגוריה Text.
  2. אפשר לגרור TextView מעל הלוח שבפינה הימנית העליונה של משטח העיצוב בעורך הפריסה ולשחרר אותו.
    לא צריך לדייק – פשוט משחררים אותו בפינה הימנית העליונה.
  3. לתשומת ליבכם, נוסף TextViewסימן קריאה אדום בעץ העץ.
  4. מעבירים את הסמן מעל סימן הקריאה, ומציגה הודעת אזהרה שהצפייה אינה מוגבלת, והיא תקפוץ למיקום אחר בזמן הפעלת האפליקציה. צריך לתקן זאת בשלב הבא.

הצבת TextView

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

אילוצים שמוסיפים לראש הדף ולשמאליו יהיו שולי רווח. השוליים מציינים את המרחק של View מקצה הגורם המכיל.

  1. בקטע מאפיינים שמשמאל, מאתרים את הווידג'ט של ההגבלה בקטע פריסה. הריבוע מייצג את התצוגה.
  2. לוחצים על + בחלק העליון של הריבוע. השדה הזה מייצג את האילוץ בין החלק העליון של תצוגת הטקסט לבין הקצה העליון של פריסת האילוץ.
  3. שדה עם מספר יופיע להגדרת השוליים העליונים. השוליים הם המרחק בין TextView לבין קצה המיכל, ConstraintLayout. המספר שיוצג יהיה שונה מהמקום שבו עזבת את TextView. כשמגדירים את השוליים העליונים, Android Studio מוסיף באופן אוטומטי גם אילוץ מהחלק העליון של תצוגת הטקסט לחלק העליון של ConstrainLayout.
  4. שינוי השוליים העליונים ל-16.
  1. חוזרים על הפעולה בשוליים השמאליים.
  2. מגדירים את הטקסט כדי לאחל לחבר יום הולדת שמח, לדוגמה "יום הולדת, סאם!" ומקישים על Enter.
  3. שימו לב שהתצוגה עיצוב תתעדכן כדי להראות איך האפליקציה תיראה.

הוספה ומיקום של טקסט נוסף בתצוגת טקסט

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

  1. יש לגרור TextView חדש מהלוח ולשחרר אותו בפינה השמאלית התחתונה של תצוגת האפליקציה בעורך הפריסה.
  2. הגדרת שוליים ימניים של 16.
  3. הגדרה של שוליים תחתונים של 16.
  4. במאפיינים, מגדירים את המאפיין text כדי לחתום על הכרטיס, לדוגמה "מאת Emma."
  5. מפעילים את האפליקציה. בפינה השמאלית העליונה אמורה להופיע המרצ'נדייז ליום ההולדת שלך.

מעולה! הוספת אלמנטים מסוימים בממשק המשתמש והצבת אותם באפליקציה.

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

  1. לוחצים על TextView הראשון בעץ הרכיבים ומחפשים את הקטע מאפיינים נפוצים בחלון מאפיינים. ייתכן שתצטרכו לגלול מטה כדי למצוא אותו.
  2. שימו לב למאפיינים השונים, כולל fontFamily, textSize ו-textcolor.
  3. מחפשים את textlook.
  4. אם textlook לא מורחב, לוחצים על המשולש כלפי מטה.
  5. מגדירים את ה-textSize ל-36sp.
  1. שימו לב לשינוי בעורך הפריסה.
  2. משנים את fontFamily למקרי.
  3. כדאי לנסות גופנים שונים כדי לראות איך הם נראים. אפשרויות נוספות לגופנים יופיעו בתחתית הרשימה, בקטע גופנים נוספים...
  4. בסיום ההתנסות עם גופנים שונים, מגדירים את fontFamily כ-sans-ser-light.
  5. לוחצים על מאפיין העריכה textcolor ומתחילים להקליד שחור.
    מתחילים להקליד במהלך ההקלדה ב-Android Studio רשימה של צבעים שמכילים את הטקסט שהזנתם.
  6. בוחרים באפשרות @android:color/black מרשימת הצבעים ומקישים על Enter.
  7. ב-TextView עם החתימה, משנים את textSize, את ה-textcolor ואת ה-fontFamily כדי להתאים.
  8. מפעילים את האפליקציה ובודקים את התוצאה.

מזל טוב, ביצעת את השלבים הראשונים ליצירת אפליקציה לכרטיס יום הולדת!
  • בעזרת עורך הפריסה תוכלו ליצור את ממשק המשתמש של האפליקציה ל-Android.
  • כמעט כל מה שמוצג במסך האפליקציה הוא View.
  • TextView הוא רכיב בממשק המשתמש להצגת טקסט באפליקציה.
  • ConstraintLayout הוא מאגר של רכיבי ממשק משתמש אחרים.
  • יש להגביל את Views לרוחב ולרוחב בתוך ConstraintLayout.
  • אחת מהדרכים למקם View היא באמצעות שוליים.
  • שולי הרווח מציינים את המרחק של View מקצה הגורם המכיל.
  • ניתן להגדיר מאפיינים ב-TextView כמו הגופן, גודל הטקסט והצבע.