גרפיקה אלמנטרית עם XML

בפרק זה נצייר צורות על המסך. הפרויקט יזדקק לשורת ג'אווה אחת או שתיים, כשהטיפול בתצוגה (UI - User Interface) נעשה ע"י קבצי xml מספריית res: - קובץ layout וקבצי draw. את קבצי ה-res הצגנו כבר בפרק Hello World.

תוצאת התרגיל לאחר הרצתו על האמולטור מוצגת בתמונה הבאה.

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

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

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

•  FrameLayout: הבנים שלו כולם מונחים אחד על גבי השני בתוך המלבן המגדיר את המסגרת, כשהם מוצמדים לפינה השמאלית העליונה של התצוגה.
• LinearLayout: הבנים מסודרים בטור או בשורה.
• RelativeLayout: הבנים מסודרים במיקום יחסי לבנים אחרים שבאותו layout.
• TableLayout: מגדיר טבלה עם שורות ועמודות. האובייקטים הבנים המגדירים שורה מסומנים כ TableRow. 
• ScrollView - סידור אנכי של האלמנטים, המאפשר גלילה של התצוגה במקרה שגודל התצוגה חורג מגודל הצג הפיזי.
  

 כעת חזרה לקובץ הlayout- שלנו.

1. <?xml version="1.0" encoding="utf-8"?>
2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="fill_parent"
4.     android:layout_height="wrap_content">
5.      <LinearLayout
6.         android:orientation="vertical"
7.         android:layout_width="fill_parent"
8.         android:layout_height="wrap_content">
9.     <ImageView android:layout_width="fill_parent"
10.          android:layout_height="50dip"
11.          android:src="@drawable/shape_1" />
12.     <ImageView android:layout_width="fill_parent"
13.             android:layout_height="wrap_content"
14.             android:src="@drawable/line" />
15.     <ImageView
16.             android:layout_width="fill_parent"
17.             android:layout_height="150dip"
18.             android:src="@drawable/shape_2" />
19.         <ImageView
20.             android:layout_width="fill_parent"
21.         android:layout_height="50dip"
22.             android:src="@drawable/shape_3" />
23.     <ImageView
24.         android:layout_width="fill_parent"
25.             android:layout_height="wrap_content"
26.             android:src="@drawable/line" />
27.     <ImageView
28.             android:layout_width="fill_parent"
29.             android:layout_height="50dip"
30.             android:src="@drawable/shape_4" />
31.     <ImageView
32.             android:layout_width="fill_parent"
33.             android:layout_height="50dip"
34.             android:src="@drawable/shape_5" />
35.     </LinearLayout>
36. </ScrollView>

הסבר:

שורה 2, מגדירה את כל התצוגה כ ScrollView, כך שתתאפשר גלילה של המסך.

שורה 5 מגדירה את סידור המסך כ LinearLayout
 כששורה 6 מגדירה את הסידור כאנכי - Vertical, כלומר כל האובייקטים הבנים של ה-Layout החיצוני יסודרו אחד אחרי השני על גבי הציר האנכי.
שורה 7 ו 8 כפי שכבר הוסבר בעבר מגדירות את הסידור של כל אחד מהבנים בתוך המבנה. fill_parent ברוחב משמעותו הקצאה של כל רוחב התצוגה לכל אחד מהאובייקטים. wrap_content באורך משמעותו הקצאה של האורך הדרוש בהתאם לגודל האוביקט.
שורה 9 מגדירה אובייקט מסוג ImageView. האובייקטים מהסוג הזה כוללים הגדרה של רוחב (שורה 9), גובה (שורה 10), והקובץ המכיל את הגדרת הצורה (שורה 11), שם הקובץ shape_1.xml.


נבחן כעת את הקובץ shape_1.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. type="oval" >
4.         <solid android:color="#00000000"/>
5.         <padding android:left="10sp" android:top="4sp" android:right="10sp" 
6. android:bottom="4sp" />
7.         <stroke android:width="10dp" android:color="#FFFFFFFF"/>
8. </shape>

שורה 3: הגדרת הצורה.

שורה 4: הגדרת הצבע. פורמט ARGB. ראה הרחבה על הפורמט כאן למטה.

שורה -6,5: הגדרת padding בכל ארבעת הכיוונים- ביחידות מדידה ( sp - (scale-independent pixels, שהיא יחידה אבסטרקטית שגודלה תלוי בצפיפות הפיקסלים במסך ובגודל ה- fonts.

שורה 7: מגדירה מסגרת ברוחב 10dp, כאשר

(dp -(density-independent pixels relative to a 160-dpi screen, יחדה שגודלה כגודל פיקסל עבור תצוגה שרוחבה 160 נקודות לאינץ.

בנוגע ליצוג צבעים בפורמט ARGB
יצוג הצבעים בפורמט זה, הידוע גם בכינויו 8888 נעשה ע"י 4 בתים (Bytes):
ה- Byte  הראשון: מקדם Alpha קובע את השקיפות, כאשר 0 יתן צבע שקוף בעוד ff יתן צבע אטום.
שלושת ה-Bytes הנותרים קובעים את חלקם של 3 צבעי היסוד (Red, Green, Blue) בגוון.
הנה מספר ערכים עבור צבעים נבחרים:
אדום - 0xffff0000
ירוק - 0xff00ff00
כחול - 0xff0000ff 
שחור - 0xff000000
לבן - 0xffffffff
שקוף - 0x00000000
אפור - 0xff888888
אפור כהה - 0xff444444 
צהוב - 0xffffff00