Android Kotlin Fundamentals 02.1: פריסה לינארית באמצעות עורך הפריסה

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

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

• יצירת אפליקציה בסיסית ל-Android ב-Kotlin.
• הפעלת אפליקציה ל-Android באמולטור או במכשיר.
• העקרונות הבסיסיים של LinearLayout.
• יצירת אפליקציה פשוטה שמשתמשת בLinearLayout ובTextView.

מה תלמדו

• איך לעבוד עם View ועם ViewGroup.
• איך לארגן את הצפיות במסמך Activity באמצעות LinearLayout.
• איך להשתמש ב-ScrollView להצגת תוכן שניתן לגלילה.
• איך משנים את הרשאות הגישה של View.
• איך ליצור משאבי מחרוזת ומאפיינים ולהשתמש בהם
• איך יוצרים פריסה לינארית באמצעות Android Studio Editor?

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

• יוצרים את האפליקציה 'מידע כללי עליי'.
• יש להוסיף TextView לפריסה כדי להציג את שמך.
• הוספת ImageView.
• יש להוסיף ScrollView כדי להציג טקסט שניתן לגלילה.

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

במשימה הזו תיצרו את הפרויקט aboutMe Android Studio.

1. פותחים את Android Studio, אם הוא עדיין לא פתוח.
2. אם פרויקט מסוים כבר פתוח ב-Android Studio, בוחרים באפשרות קובץ > חדש > פרויקט חדש.
   
   
   
3. אם הפרויקט עדיין לא פתוח, בוחרים באפשרות + התחלת פרויקט חדש ב-Android Studio בתיבת הדו-שיח Welcome to Android Studio.
   
   
   
4. בתיבת הדו-שיח Create New Project, בכרטיסייה Phone and Table, בוחרים בתבנית פעילות ריקה. לוחצים על הבא.
   
   
   
5. בתיבת הדו-שיח Create New Project, מגדירים את הפרמטרים הבאים ולוחצים על Finish (סיום).
   

מאפיין	ערך
שם אפליקציה	מידע כללי
שם החברה ב-Android	com.android.example.AboutMe (או הדומיין שלך)
שמירת מיקום	משאירים את מיקום ברירת המחדל או משנים אותו לספרייה המועדפת עליכם.
שפה	Kotlin
רמת API מינימלית	API 19: Android 4.4 (KitKat)
הפרויקט הזה יתמוך באפליקציות ללא התקנה	משאירים את תיבת הסימון הזו ריקה.
שימוש בחפצים מ-AndroidX	סימון התיבה הזו.

מערכת Android Studio תקדיש רגע כדי ליצור את קובצי הפרויקט.

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

התבנית 'פעילות ריקה' יוצרת פעילות ריקה אחת, Mainactivity.kt. התבנית יוצרת גם קובץ פריסה בשם activity_main.xml. הקובץ של קובץ הפריסה הוא ConstraintLayout, כשורשו ViewGroup, ובתוכן שלו יש TextView יחיד.

במשימה הזו, משנים את השורש שנוצר ViewGroup ל-LinearLayout. אתם גם מארגנים את רכיבי הממשק לאורך.

הצגת קבוצות

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

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

אפשר לשנות את הפריסה הבסיסית כך שהיא תשתמש בקבוצת תצוגות של LinearLayout:

1. בחר בחלונית Project > Android. בתיקייה app/res/layout , פותחים את הקובץ activity_main.xml.
2. בוחרים בכרטיסייה טקסט ומשנים את קבוצת הבסיס של התצוגה המפורטת מ-ConstraintLayout ל-LinearLayout.
3. יש להסיר את TextView. ברכיב LinearLayout, מוסיפים את המאפיין android:orientation ומגדירים אותו ל-vertical.

לפני:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

אחרי:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

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

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

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

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

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

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

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

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

שלב 1: הוספת תצוגת טקסט

1. פותחים את הקובץ res/layout/activity_main.xml אם הוא עדיין לא פתוח.
2. עוברים לכרטיסייה טקסט ובודקים את הקוד. הקוד כולל LinearLayout בתור קבוצת הבסיס של התצוגה המפורטת. (קבוצות צפיות הן תצוגות שכוללות תצוגות מפורטות אחרות.)
   
   LinearLayout מכיל את המאפיינים הנדרשים layout_height, layout_width ו-orientation, שהם vertical כברירת מחדל.
3. יש לעבור לכרטיסייה עיצוב כדי לפתוח את עורך הפריסה.

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

4. גוררים תצוגת טקסט מהחלונית לוח צבעים לעורך העיצוב.
   
   
   
5. שימו לב לחלונית עץ הרכיבים. תצוגת הטקסט החדשה ממוקמת כרכיב צאצא של קבוצת תצוגות ההורה, שהיא LinearLayout.
   
   
6. פותחים את החלונית Attributes, אם היא עדיין לא פתוחה. (כדי לפתוח את החלונית, לוחצים לחיצה כפולה על TextView החדש שנוסף בעורך העיצוב).
7. מגדירים את המאפיינים הבאים בחלונית מאפיינים:

מאפיין	ערך
אינדונזיה	name_text
text	יש להגדיר אותו לשם שלך. (אחד מהשדות טקסט מציג סמל מפתח ברגים כדי לציין שהוא עבור מרחב השמות tools. השדה ללא מפתח הברגים הוא עבור מרחב השמות android — זהו שדה ה-text הרצוי.)
&looks >textSize	20sp
&לרסי טקסט; textcolor	@android:color/black
&למראה, יישור טקסט	מרכז

שלב 2: יוצרים משאב מחרוזת

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

כדי לטפל באזהרה, יש ליצור משאב מחרוזת:

1. בחלונית מאפיינים, לוחצים על תפריט שלוש הנקודות לצד מאפיין הטקסט שמגדירים את השם שלכם. עורך המשאבים נפתח.
   
   
   
2. בתיבת הדו-שיח Resources, בוחרים באפשרות Add newResource > New מחרוזת Value.
3. בתיבת הדו-שיח חדש משאב של ערך מחרוזת, מגדירים את השדה שם המשאב כ-name. מזינים שם בשדה ערך המשאב. לוחצים על אישור. חשוב לשים לב שהאזהרה נעלמה.
   
   
   
4. פותחים את הקובץ res/values/strings.xml ומחפשים את משאב המחרוזת החדש שנקרא name.

<string name="name">Aleks Haecky</string>

שלב 3: יצירה של משאב מאפיין

הוספתם משאב באמצעות עורך המשאבים. אפשר גם לחלץ משאבים בעורך קוד ה-XML כדי ליצור משאבים חדשים:

1. בקובץ activity_main.xml, עוברים לכרטיסייה טקסט.
2. בשורה textSize, לוחצים על המספר (20sp) ומקלידים Alt+Enter (Option+Enter ב-Mac). בוחרים באפשרות חילוץ משאב מאפיין מהתפריט הקופץ.
3. בתיבת הדו-שיח חילוץ משאב, מזינים text_size בשדה שם המשאב. לוחצים על אישור.
   
   
   
4. צריך לפתוח את הקובץ res/values/dimens.xml כדי לראות את הקוד הבא שנוצר:

<dimen name="text_size">20sp</dimen>

הערה: אם הקובץ dimens.xml לא נמצא כבר בתיקייה res/values, מערכת Android Studio יוצרת אותו.

5. פותחים את הקובץ MainActivity.kt ומחפשים את הקוד הבא בסוף הפונקציה onCreate():

setContentView(R.layout.activity_main)

הפונקציה setContentView() מחברת את קובץ הפריסה למכשיר Activity. קובץ משאב הפריסה שצוין הוא R.layout.activity_main:

• R הוא הפניה למשאב. זוהי כיתה שנוצרת באופן אוטומטי עם הגדרות של כל המשאבים באפליקציה שלך.
• layout.activity_main מציין שהמשאב הוא פריסה בשם activity_main.

6. צריך להפעיל את האפליקציה. מוצג TextView עם השם שלך.
   
   

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

מרווח פנימי לעומת שוליים

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

גודל התצוגה כולל מרווח פנימי. המאפיינים הבאים הם מאפייני מרווח פנימי נפוצים:

• android:padding מציין מרווח פנימי לכל ארבע הקצוות של התצוגה.
• android:paddingTop מציין מרווח פנימי לקצה העליון.
• android:paddingBottom מציין מרווח פנימי לקצה התחתון.
• android:paddingStart מציין מרווח פנימי לקצה &התצוגה המפורטת;" של התצוגה.
• android:paddingEnd מציין מרווח פנימי לקצה &התצוגה המפורטת;" של התצוגה.
• android:paddingLeft מציין מרווח פנימי לקצה השמאלי.
• android:paddingRight מציין מרווח פנימי לקצה השמאלי.

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

• הפרמטר android:layout_margin מציין שוליים לכל ארבעת צידי התצוגה.
• הסמל android:layout_marginBottom מציין את החלל שמחוץ לחלק התחתון של התצוגה המפורטת.
• android:layout_marginStart מציין רווח מחוץ &לתצוגה.
• הפקודה android:layout_marginEnd מציינת רווח בצד של התצוגה המפורטת הזו.
• הסמל android:layout_marginLeft מציין את הרווח בצד ימין של התצוגה המפורטת.
• הפקודה android:layout_marginRight מציינת רווח בצד שמאל של התצוגה המפורטת הזו.

ימינה/שמאלה לעומת התחלה/סיום

"right" "left" יש להתייחס תמיד לצד ימין ומצד שמאל של המסך, בין אם האפליקציה משתמשת בזרימה משמאל לימין (LTR) או בזרימה מימין לשמאל (RTL). "Start" & "end" תמיד מתייחסים להתחלה ולסיום של הזרימה:

• עבור זרימת LTR, יש להתחיל = שמאלה ו-end=right.
• אם מדובר בתהליך של RTL, מתחילים=right ו-end=left.

אם האפליקציה מטרגטת לרמת API 17 (Android 4.2) ומעלה:

• "start" &"end" במקום "left" & "right".
• לדוגמה: android:layout_marginLeft צריכה להיות android:layout_marginStart כדי לתמוך בשפות הנכתבות מימין לשמאל.

אם ברצונך שהאפליקציה תפעל עם גרסאות מוקדמות יותר מ-Android 4.2, כלומר אם targetSdkVersion או minSdkVersion של האפליקציה הם מגרסה 16 ומטה:

• "start" ו-end" בנוסף ל-"left" &"right"
• לדוגמה, יש להשתמש גם ב-android:paddingLeft וגם ב-android:paddingStart.

שלב 1: הוספת מרווח פנימי

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

1. פותחים את הקובץ activity_main.xml בכרטיסייה עיצוב.
2. בעץ הרכיבים או בעורך העיצוב, לוחצים על תצוגת הטקסט כדי לפתוח את החלונית מאפיינים.
3. בחלק העליון של החלונית מאפיינים, לוחצים על סמל החץ הכפול כדי לראות את כל המאפיינים הזמינים.
4. מחפשים את האפשרות מרווח פנימי, מרחיבים אותה ולוחצים על סמל שלוש הנקודות ... לצד המאפיין top. תיבת הדו-שיח משאבים תופיע.
5. בתיבת הדו-שיח Resources, בוחרים באפשרות Add newResource > New Dide Value (הוספת משאב חדש & עמעום חדש).
6. בתיבת הדו-שיח חדש משאב של ערך מאפיין, יוצרים משאב חדש בשם dimen שנקרא small_padding עם ערך של 8dp.
   
   הקיצור של dp פירושו לא תלוי בדחיסות. אם רוצים שרכיב של ממשק המשתמש ייראה באותו גודל במסכים עם דחיסות שונים, אפשר להשתמש ב-dp כמו ביחידת המדידה. עם זאת, כשמציינים את גודל הטקסט, יש להשתמש תמיד ב-sp (פיקסלים שניתן להתאים).
7. לוחצים על אישור.

שלב 2: הוספת שוליים

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

1. בחלונית מאפיינים, מחפשים את המירכאות Layout_Margin .
2. מרחיבים את האפשרות Layout_Margin ולוחצים על סמל שלוש הנקודות ... לצד המאפיין top.
3. אפשר ליצור משאב חדש בשם dimen בשם layout_margin ולהפוך אותו ל-16dp. לוחצים על אישור.

שלב 3: הוספת גופן

כדי לשפר את תצוגת הטקסט name, יש להשתמש בגופן Android Roboto. הגופן הזה הוא חלק מספריית התמיכה, ואתם מוסיפים את הגופן כמשאב.

1. בחלונית מאפיינים, מחפשים את "fontFamily".
2. בשדה fontFamily, לוחצים על החץ לתפריט הנפתח, גוללים לתחתית הרשימה ובוחרים באפשרות Fonts נוספים.
3. בתיבת הדו-שיח Resources, מחפשים את rob ובוחרים באפשרות Roboto. ברשימה תצוגה מקדימה, בוחרים באפשרות רגיל.
4. לוחצים על לחצן הבחירה הוספת גופן לפרויקט.
5. לוחצים על אישור.
   
   

בתיקייה res יש עכשיו תיקייה font שמכילה קובץ גופן roboto.ttf. המאפיין @font/roboto יתווסף אל TextView.

שלב 4: חילוץ הסגנון

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

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

1. לוחצים לחיצה ימנית על ה-TextView ב-עץ הרכיבים ובוחרים באפשרות Refetch > חילוץ סגנון.
2. בתיבת הדו-שיח חילוץ סגנון Android, מנקים את תיבת הסימון layout_width, תיבת הסימון layout_height ותיבת הסימון textAlignment. המאפיינים האלה בדרך כלל שונים בכל תצוגה, כך שאתם לא רוצים שהם יהיו חלק מהסגנון.
3. בשדה שם הסגנון מזינים NameStyle.
4. לוחצים על אישור.
   
   
   
5. גם סגנון הוא משאב, ולכן הסגנון נשמר בתיקייה res/values/ בקובץ styles.xml. יש לפתוח את styles.xml ולבדוק את הקוד שנוצר בסגנון NameStyle, שנראה דומה לזה:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. פותחים את activity_main.xml ועוברים לכרטיסייה טקסט. שימו לב שהסגנון שנוצר נמצא בתצוגת הטקסט בתור style="@style/NameStyle".
7. יש להפעיל את האפליקציה ולראות את השינויים בגופן ובמרווח הפנימי שמסביב לTextView.

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

התצוגה ImageView היא תצוגה של משאבי תמונות. לדוגמה, ImageView יכול להציג משאבים Bitmap כמו קובצי PNG , JPG , GIF או WebP, או להציג משאב Drawable כמו ציור וקטור.

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

1. מציגים את קובץ הפריסה בכרטיסייה עיצוב ולאחר מכן גוררים ImageView מהחלונית לוח הצבעים אל name_text מתחת לעץ הרכיבים. תיבת הדו-שיח Resources נפתחת.
2. בחר באפשרות ציור אם הוא עדיין לא נבחר.
3. מרחיבים את הקטע android, גוללים ובוחרים באפשרות devguide_star_big_on. זהו הכוכב הצהוב .
4. לוחצים על אישור.
   
   
   
   תמונת הכוכב תתווסף לפריסה שמתחת לשם שלך. מאחר שיש לך LinearLayout בפורמט אנכי, מספר הצפיות שהוספת מיישרות לאורך.
   
   
5. עוברים לכרטיסייה טקסט ומעיינים בקוד ImageView שנוצר. הרוחב מוגדר ל-match_parent, כך שהתצוגה תהיה רחבה כמו רכיב ההורה שלה. הגובה מוגדר ל-wrap_content, כך שהגובה של התצוגה הוא רק התוכן שלו. הImageView מפנה אל ה-btn_star_big_on שניתן לשרטוט.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. כדי לשנות את השם של id מתוך ImageView, לוחצים לחיצה ימנית על "@+id/imageView" ובוחרים באפשרות Reגורמי > שינוי שם.
7. בתיבת הדו-שיח שינוי השם, מגדירים את id בתור @+id/star_image. לוחצים על מחדש.
   
   
   

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

8. בכרטיסייה עיצוב, בעץ הרכיבים, לוחצים על סמל האזהרה לצד star_image. האזהרה מתייחסת לפריט contentDescription חסר, שקוראי מסך משתמשים בו כדי לתאר את התמונות למשתמש.
9. בחלונית מאפיינים, לוחצים על תפריט שלוש הנקודות ... לצד המאפיין contentDescription. תיבת הדו-שיח משאבים תיפתח.
10. בתיבת הדו-שיח Resources, בוחרים באפשרות Add newResource > New מחרוזת Value. מגדירים את השדה שם המשאב כ-yellow_star, ומגדירים את השדה ערך המשאב כ-Yellow star. לוחצים על אישור.
11. בחלונית מאפיינים אפשר להוסיף מרווח עליון של 16dp (שהוא @dimen/layout_margin) ל-yellow_star, וכדי להפריד בין תמונת הכוכב לשם.
12. מריצים את האפליקציה. השם ותמונת הכוכב שלך מוצגים בממשק המשתמש של האפליקציה.
    
    

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

התמונה הבאה מציגה דוגמה של ScrollView שמכיל LinearLayout שמכיל כמה תצוגות אחרות.

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

שלב 1: הוספת ViewView שמכיל טקסטViewView

1. פותחים את הקובץ activity_main.xml בכרטיסייה עיצוב.
2. גוררים תצוגת גלילה אל הפריסה באמצעות גרירתה אל עורך העיצוב או אל עץ הרכיבים. מציבים את תצוגת הגלילה מתחת לתמונת הכוכב.
3. עוברים לכרטיסייה טקסט כדי לבדוק את הקוד שנוצר.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

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

4. יש להוסיף id אל ScrollView ולקרוא לו bio_scroll. הוספה של id ל-ScrollView נותנת למערכת Android ידית לתצוגה, כך שכאשר המשתמש מסובב את המכשיר, המערכת שומרת על מיקום הגלילה.
5. בתוך הScrollView, יש להסיר את הקוד LinearLayout, מפני שבאפליקציה שלך תופיע רק תצוגה אחת שניתן לגלול אותה — TextView.
6. גוררים TextView מלוח הצבעים אל עץ הרכיבים. יש להציב את ה-TextView מתחת ל-bio_scroll כרכיב צאצא של bio_scroll.
   
   
7. מגדירים את ה-id [מזהה] של תצוגת הטקסט החדשה לערך bio_text.
8. לאחר מכן מוסיפים סגנון לתצוגת הטקסט החדשה. בחלונית מאפיינים, לוחצים על שלוש הנקודות ... לצד המאפיין style כדי לפתוח את תיבת הדו-שיח Resources.
9. בתיבת הדו-שיח Resources, מחפשים את NameStyle. בוחרים באפשרות NameStyle מהרשימה ולוחצים על אישור. תצוגת הטקסט משתמשת עכשיו בסגנון NameStyle שיצרת במשימה קודמת.
   
   

שלב 2: מוסיפים את הביוגרפיה ל-TextView החדש

1. פותחים את strings.xml, יוצרים משאב מחרוזת שנקרא bio וכותבים טקסט ארוך על עצמכם, או על כל נושא אחר שרוצים.
   

הערה:

• יש להשתמש ב-\n כדי לציין מעבר שורה.
• אם משתמשים בגרש, יש לסמן אותם בתו בריחה (escape) בקו נטוי. לדוגמה:
  "You mustn\'t forget the backslash."
• לטקסט מודגש יש להשתמש ב-<b>...</b>, ולטקסט נטוי יש להשתמש במאפיין <i>...</i>. למשל:
  "This text is <b>bold</b> and this text is <i>italics</i>."

הנה ביוגרפיה לדוגמה:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. בתצוגת הטקסט bio_text, מגדירים את הערך של המאפיין text למשאב המחרוזת bio שמכיל את הביוגרפיה.
3. כדי שיהיה קל יותר לקרוא את הטקסט bio_text, יש להוסיף רווח בין השורות. יש להשתמש במאפיין lineSpacingMultiplier ולתת לו את הערך 1.2.
   
   
   
   לתשומת ליבך: בכלי העיצוב, הטקסט bio מופיע עד לקצה המסך. כדי לפתור את הבעיה הזו, אפשר להוסיף לשורש LinearLayout את המאפיינים של מרווח פנימי, שמאל, התחלה וסיום. אין צורך להוסיף מרווח פנימי תחתון, כי הטקסט שעובר עד האותות התחתון בפני המשתמש מאפשר לגלול את הטקסט.
4. הוספה של מרווח פנימי להתחלה ולסיום של 16dp לרמה הבסיסית (LinearLayout).
5. עוברים לכרטיסייה טקסט, מחלצים את משאב המאפיינים וקוראים לו layout_padding.
   
   

הערה: החל מרמת API 17, יש להשתמש ב-"start" וב-"end&PLURAL; במקום ב-"left" וב-"right" עבור מרווח פנימי ושוליים כדי להתאים את האפליקציה לשפות של RTL כמו ערבית.

6. מפעילים את האפליקציה וגוללים בטקסט.
   
   

מעולה!

יצרת אפליקציה מלאה מאפס, והיא נראית מצוין!

פרויקט Android Studio: מידע כללי עליי

הערה: כל האתגרים לכתיבת קוד הם אופציונליים.

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

רמז: לתצוגת הגלילה יכולה להיות תצוגת צאצא אחת בלבד. צריך לכווץ את שתי התצוגות שניתן לגלול בהן, ImageView וTextView, אל LinearLayout.

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

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

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

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

• פריסות
• ViewGroup
• View
• פריסה לינארית
• ScrollView
• תמיכה בדחיסות שונות של פיקסלים (dp)
• בניית ממשק משתמש באמצעות עורך הפריסה
• תיעוד ל-Android Studio
• סגנונות ועיצובים

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

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

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

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

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

שאלה 1

איזו מהאפשרויות הבאות היא קבוצת תצוגה?

▬ EditText

▬ LinearLayout

▬ TextView

▬ Button

שאלה 2

אילו מהיררכיות התצוגה המפורטות הבאות אינן חוקיות?

▬ LinearLayout > TextView, TextView, ImageView

▬ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▬ TextView > TextView, ImageView, ScrollView

שאלה 3

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

הוספה אמיתי

הוספה שקרי

שאלה 4

ScrollView היא קבוצת תצוגות שיכולה לכלול כל מספר של צפיות או קבוצות צאצאים. נכון או לא נכון?

הוספה אמיתי

הוספה שקרי

שאלה 5

באיזה רכיב של ממשק המשתמש ניתן להשתמש כדי להציג תמונות באפליקציה?

▬ TextView

▬ ImageView

▬ Button

▬ ScrollView

מעבר לשיעור הבא: 2.2: הוספת אינטראקטיביות של משתמשים

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