פיתוח לאנדרואיד - מבוא/מתחילים/בניית ממשק משתמש פשוט

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

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

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

תרשים סכמטי המתאר את ההיררכיה בין המחלקות השונות

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

יצירת סידור ליניארי (Linear Layout)

פתח את קובץ activity_main.xml בתוך תקיית /res/layout.

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

תבנית ה-BlankActivity אשר בה השתמשנו על מנת ליצוא את הפרוייקט בראשונה יוצרת קובץ activity_main.xml עם מופע תצוגה בשם "סידור יחסי" (RelativeLayout) אובייקט התצוגה שבשורש וכן מופע-ילד של תצוגה בשם "TextView". מחק את תגית <TextView> ושנה את <RelativeLayout> לתגית <LinearLayout>, לאחר מכן הוסף את התכונה android:orientation וקבע אותה כ-"horizontal". התוצאה צריכה להראות כך:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal" >
</LinearLayout>

סידור-ליניארי היא מחלקת משנה של קבוצת-תצוגה המאפשרת לסדר את ילדיה בצורה אופקית או אנכית, כמתואר בתכונה "android:orientation". כל ילד של סידור-ליניארי יופיע על המסך על פי הסדר בו הוא מופיע בקובץ ה-XML. שתי התכונות האחרות - android:layout_width ו-android:layout_height דרושות לכל מופעי תצוגה על מנת לקבוע את גודלם.

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

[{{fullurl:מדריך סידור תצוגה|redirect=no}} מדריך סידור תצוגה]

הוספת שדה קלט

על מנת ליצור שדה קלט אשר המשתמש יוכל להזין בו מלל לקליטה יש צורך בתגית <EditText> בתוך ה-LinearLayout.

כמו כל אובייקט תצוגה, עליך לקבוע תכונות XML על מנת להגדיר לאובייקט EditText את תכונותיו, הזן את הקוד הבא בתוך אלמנט <LinearLayout>:

<EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

אובייקט משאב הינו מספר ייחודי המקושר למשאב אפליקציה, כגון מפת סיביות, קובץ סידור או מחרוזת. לכל משאב יש אובייקט משאב מקושר אשר מוגדר בקובץ gen/R.java של הפרוייקט וניתן למצוא את שמות האובייקטים במחלקת R על מנת לייחס אותם אל משאביך, לדוגמה כאשר ברצונך להגדיר מחרוזת בעזרת תכונת android:hint. כמו כן, תוכל ליצור מזהי משאבים שרירותיים המקושרים לתצוגה באמצעות תכונת android:id, אשר מאפשרת גישה לתצוגה מקוד אחר. כלי ה-SDK מייצרים קובץ R.java בכל פעם שפרוייקט מהודר ויש לשנות קובץ זה ידנית. [{{fullurl:הקצאת משאבים|redirect=no}} הקצאת משאבים]

תכונות האלמנט:

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

התו כרוכית (@) דרוש בכל פעם שהינך פונה לכל משאב ב-XML, לאחריו סוג המשאב (id במקרה דנן) ולאחר מכן קו נטוי (/) וכן שמו של המשאב (edit_message).

סימן הפלוס (+) לפני סוג המשאב דרוש רק כאשר הינך מגדיר מזהה בפעם הראשונה. כאשר תהדר את האפליקציה, ה-SDK ישתמש בשם המשאב על מנת ליצור משאב חדש בשם זהה בקובץ gen/R.java אשר מתייחס לאלמנט ה-EditText. ברגע שנוצר מזהה בפעם הראשונה, ייחוסים אחרים למזהה אינם דורשים את סימן הפלוס, והשימוש בו חיוני רק כאשר יוגדר מזהה משאב חדש וכן אינו דרוש בעבור משאבים מוחשיים כגון מחרוזות או סידורי תצוגה.

• android:layout_width ו-android:layout_height: במקום לקבוע אורך וגובה מדוייקים בעבור האובייקט, הערך "wrap_content" משמש כהוראה לאובייקט התצוגה להתרחב רק על פי צורכו, כך שאם היית משתמש בערך "match_parent" האלמנט היה מתרחב על פני כל המסך, שכן הוא היה מתאים את עצמו לגודל אובייקט האם שלו - במקרה הזה לתצוגה-ליניארית.
• android:hint: זהו שדה עם מחרוזת ברירת מחדל המוצגת כאשר שדה המלל ריק. הערך "@string/edit_message" מתייחס למחרוזת אשר נמצאת בקובץ אחר, וכיוון שמדובר באלמנט מוחשי (ולא רק מזהה), אין צורך בהוספת סימן הפלוס. אולם, כיוון שטרם אתחלת את משאב המחרוזת, תראה שגיאת הידור בתחילה, השגיאה תיעלם בחלק הבא של התרגול בעזרת אתחול המחרוזת.

כדאי לדעת: למשאב המחרוזת הזה יש מזהה דומה לאלמנט ID: ‏edit_message, אך ההתייחסות למשאבים הינה על פי סוג המשאב - כגון מחרוזת או ID - ועל כן אם ישנו שימוש בשם דומה בעבור שני סוגי משאבים לא תהיה התנגשות

הוספת משאבי מחרוזות

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

ברירת המחדל של אנדרואיד הינה יצירת קובץ משאב למחרוזות אשר ממוקם ב-res/values/strings.xml הוסף מחרוזת חדשה בשם "edit_message" וקבע את תוכנה במחרוזת "Enter a message." (את המחרוזת "hello_world" ניתן למחוק).

קובץ ה-strings.xml צריך להראות כך:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

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

הוספת כפתור

הוסף כפתור (<Button>) בתוך ה-layout מייד לאחר אלמנט ה-<EditText>

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />

גובהו ורוחבו של הכפתור נקבעו ל-"wrap_content" כך שגודלו של הכפתור הוא בדיוק כמה שנזקק על מנת להציג את המלל שבתוכו. אין צורך בתכונה android:id שכן לא נפנה אליו מתוך הקוד של ה-activity.

שינוי שדה הקלט כך שימלא את מלא המסך

תמונה 2.

ה-layout מאותחל כך שגם ה-EditText וגם הכפתור יהיו גדולים דיים על מנת שיוצג המלל בתוכם כפי שמוצג בתמונה 2.

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

בניית ממשק משתמש פשוט

הפרק הבא: התחלת פעילות נוספת