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

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

מה שכדאי לדעת

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

מה תלמדו

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

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

• יוצרים את אפליקציית AboutMe.
• מוסיפים TextView לפריסה כדי להציג את השם.
• הוספת ImageView.
• מוסיפים ScrollView כדי להציג טקסט שאפשר לגלול בו.

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

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

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

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

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

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

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

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

צפייה בקבוצות

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

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

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

1. בוחרים בחלונית Project > Android. בתיקייה app/res/layout , פותחים את הקובץ activity_main.xml.
2. בוחרים בכרטיסייה Text ומשנים את קבוצת תצוגת הבסיס מ-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 באופן ידני כדי ליצור את פריסת האפליקציה, אפשר להשתמש בכלי לעריכת פריסות כדי לגרור רכיבי ממשק משתמש אל כלי העיצוב.

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

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

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

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

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

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

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

שלב 1: מוסיפים TextView

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

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

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

מאפיין	ערך
מזהה	name_text
text	מגדירים את השם שלכם. (אחד משדות הטקסט מציג סמל של מפתח ברגים כדי לציין שהוא מיועד למרחב השמות tools. האפשרות בלי המפתח היא למרחב השמות android – זהו שדה הטקסט שרוצים.)
מאפיין textAppearance > מאפיין textSize	20sp
‪textAppearance > textColor	@android:color/black
textAppearance > textAlignment	מרכז

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

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

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

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

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

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

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

1. בקובץ activity_main.xml, עוברים לכרטיסייה Text (טקסט).
2. בשורה textSize, לוחצים על המספר (20sp) ומקלידים Alt+Enter (Option+Enter ב-Mac). בתפריט הקופץ, בוחרים באפשרות שליפת משאב מאפיין.
3. בתיבת הדו-שיח Extract Resource, מזינים text_size בשדה Resource name. לוחצים על OK (אישור).
   
   
   
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 מציין רווח בצד ימין של התצוגה.

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

המונחים 'ימין' ו'שמאל' תמיד מתייחסים לצד ימין ולצד שמאל של המסך, בין אם האפליקציה משתמשת בזרימה משמאל לימין (LTR) או בזרימה מימין לשמאל (RTL). המונחים 'התחלה' ו'סיום' תמיד מתייחסים להתחלה ולסיום של התהליך:

• בזרימה משמאל לימין, ההתחלה היא בצד ימין והסוף הוא בצד שמאל.
• בזרימה מימין לשמאל, start=right ו-end=left.

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

• צריך להשתמש ב-'start' (התחלה) וב-'end' (סיום) במקום ב-'left' (ימין) וב-'right' (שמאל).
• לדוגמה, android:layout_marginLeft צריך להפוך ל-android:layout_marginStart כדי לתמוך בשפות שנקראות מימין לשמאל.

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

• הוספה של 'התחלה' ו'סיום' בנוסף ל'ימין' ו'שמאל'.
• לדוגמה, אפשר להשתמש גם ב-android:paddingLeft וגם ב-android:paddingStart.

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

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

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

שלב 2: מוסיפים שוליים

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

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

שלב 3: מוסיפים גופן

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

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

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

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

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

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

1. לוחצים לחיצה ימנית על TextView בComponent Tree ובוחרים באפשרות Refactor > Extract Style.
2. בתיבת הדו-שיח Extract Android Style, מבטלים את הסימון של תיבת הסימון layout_width, תיבת הסימון layout_height ותיבת הסימון textAlignment. המאפיינים האלה בדרך כלל שונים בכל תצוגה, ולכן לא כדאי שהם יהיו חלק מהסגנון.
3. בשדה שם הסגנון, מזינים NameStyle.
4. לוחצים על OK (אישור).
   
   
   
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 מהחלונית Palette אל מתחת ל-name_text בComponent Tree. תיפתח תיבת הדו-שיח Resources (משאבים).
2. בוחרים באפשרות Drawable (ניתן לציור) אם היא לא מסומנת.
3. מרחיבים את android, גוללים ובוחרים באפשרות btn_star_big_on. זה הכוכב הצהוב .
4. לוחצים על אישור.
   
   
   
   תמונת הכוכב נוספת לפריסה מתחת לשם שלכם. כי יש לך פריסה אנכית LinearLayout, והתצוגות שאתה מוסיף מיושרות אנכית.
   
   
5. עוברים לכרטיסייה Text (טקסט) ומסתכלים על קוד ImageView שנוצר. הרוחב מוגדר ל-match_parent, כך שהתצוגה תהיה רחבה כמו רכיב האב שלה. הגובה מוגדר ל-wrap_content, כך שהתצוגה תהיה בגובה התוכן שלה. הערך ImageView מפנה ל-drawable‏ 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" ובוחרים באפשרות Refactor > Rename (רפקטורינג > שינוי שם).
7. בתיבת הדו-שיח שינוי שם, מגדירים את id ל-@+id/star_image. לוחצים על Refactor (שינוי מבנה הקוד).
   
   
   

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

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

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

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

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

שלב 1: מוסיפים ScrollView שמכיל TextView

1. פותחים את הקובץ activity_main.xml בכרטיסייה Design.
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. לאחר מכן מוסיפים סגנון לתצוגת הטקסט החדשה. בחלונית מאפיינים, לוחצים על סמל שלוש הנקודות ... לצד מאפיין הסגנון כדי לפתוח את תיבת הדו-שיח משאבים.
9. בתיבת הדו-שיח משאבים, מחפשים את NameStyle. בוחרים באפשרות NameStyle מהרשימה ולוחצים על אישור. תצוגת הטקסט משתמשת עכשיו בסגנון NameStyle שיצרתם במשימה קודמת.
   
   

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

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

הערה:

• משתמשים ב-\n כדי לציין מעבר שורה.
• אם משתמשים בגרש, צריך להוסיף לפניו קו נטוי הפוך. לדוגמה:
  "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. עוברים לכרטיסייה Text (טקסט), מחלצים את משאב המאפיין ונותנים לו את השם layout_padding.
   
   

הערה: החל מרמת API‏ 17, כדי להתאים את האפליקציה לשפות שכותבים מימין לשמאל כמו ערבית, צריך להשתמש ב-start וב-end במקום ב-left וב-right לריווח פנימי ושוליים.

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

מעולה!

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

פרויקט Android Studio: ‏ AboutMe

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

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

הערה: לתצוגת הגלילה יכולה להיות רק תצוגת צאצא אחת. צריך להוסיף את שתי התצוגות שאפשר לגלול בהן, ImageView ו-TextView, לתג LinearLayout.

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

קורס ב-Udacity:

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

מסמכי תיעוד למפתחי Android:

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

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

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

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

אם אתם עובדים על ה-codelab הזה לבד, אתם יכולים להשתמש במשימות האלה כדי לבדוק את הידע שלכם.

עונים על השאלות הבאות

שאלה 1

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

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

שאלה 2

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

‫▢ LinearLayout > TextView, TextView, ImageView

‫▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

‫▢ TextView > TextView, ‏ ImageView, ‏ ScrollView

שאלה 3

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

‫▢ True

‫▢ False

שאלה 4

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

‫▢ True

‫▢ False

שאלה 5

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

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

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

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