הצגת תמונות באפליקציה

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

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

כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

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

הצגת תמונות באפליקציה

הוספת תמונה לאפליקציה מתחילה בהעתקת הקובץ לתיקיית drawable והצבתו על רכיב ויזואלי. ההרצאה משווה בין ImageView ל-ImageButton, בין src ל-background, ומראה גם הצבה דינמית מהקוד ותמונת רקע לכל המסך.

השלבים העיקריים

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

2. מציבים על ImageView: בדוגמה קבעו background מתוך drawable, וגם מידות משלהם (200dp על 100dp), margin ו-layout_gravity למרכז. התמונה נמתחת למידות שנקבעו.

3. עדיף src: כשהתמונה מוצבת ב-src היא חוזרת למידות המקוריות שלה. src מתאים לתמונות ומכיל יכולות נוספות, כמו scaleType (למשל center או centerCrop, שחותך קצוות כדי להתאים). background קיים ברוב הרכיבים ומקבל צבע, תמונה, צורה או וקטור, אבל scaleType לא משפיע עליו.

4. ImageButton: מציג תמונה אבל גם נראה כלחצן, וההדגשה בשוליים מראה למשתמש שאפשר ללחוץ. אפשר להגדיר onClick, בדוגמה מוצג טקסט "you click me". גם ImageView רגיל יכול לקבל אירוע לחיצה, אך קשה לראות שלחצו עליו. Button רגיל מיועד לטקסט.

5. הצבה דינמית: לחצן "Show dynamic image" מציב תמונה ב-ImageView שאין לו src. setBackgroundResource(R.drawable...) מציב ב-background, ו-setImageResource מציב ב-src, ולכן רק איתו מתקבל ה-scaleType שהוגדר.

6. תמונת רקע למסך: מעתיקים לתיקיית drawable תמונה נוספת (בדוגמה background.jpeg) ומציבים אותה כ-background של ה-LinearLayout.

כעת אפשר להציג תמונות על ImageView, ImageButton או על כל ה-layout, בהצבה ב-XML או מהקוד.

השיעור הבא בקורס: Gradient to Image Maker

פרקי ההרצאה: הצגת תמונות באפליקציה

תמלול ההרצאה: הצגת תמונות באפליקציה

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

00:02
במסענו ברחבי ה-resources אנחנו סוף סוף מגיעים לתמונות. אנחנו רוצים לשים תמונה על האפליקציה שלנו, דבר שהוא מאוד חשוב ומאוד נפוץ באפליקציות.
00:16
אז איך עושים את זה? את התמונה אנחנו שמים בתיקיית ה-Drawable פשוט על ידי copy-paste. בואו ניקח תמונה, נשים אותה ב-Drawable ואז נציב אותה על המסך.
00:29
אז בואו ניגש ל-Desktop והכנתי פה שתי תמונות. אקח את התמונה הזאת של החתול ושימו לב שוב שהשם של הקובץ זה אך ורק אותיות קטנות וכמובן מותר גם קו תחתון אסור אותיות גדולות מותר ספרות ופשוט מאוד אני מבצע קופי לתמונה אני חוזר לאנדרואיד סטודיו מכה שימני על תיקיית הדרואובל ופשוט מאוד טייסט
01:02
הוא שואל אותי האם זה השם שאני רוצה וזה המקום שאני רוצה אני אומר לו כן והנה התמונה נמצאת בתוך תיקיית הדרויבל. כל מה שנשאר לנו לעשות ופשוט להציב אותה על הרכיב ויזואלי.
01:16
קיים לנו הרכיב הוויזואלי image view, בואו נגדיר לו match parent ו-wrap content וניגש ל-background שלו ומתיקיית הדרויבל נחפש את פיוט קיטן שזה השם של התמונה והנה אנחנו רואים שיש לנו את התמונה על האפליקציה.
01:39
בואו נריץ אותה ואנחנו בהחלט רואים את התמונה על גבי האפליקציה. אנחנו יכולים כמובן לגשת ולהגדיר מימדים אחרים לתמונה, בואו נגדיר 200 dp כרוחב ו-100 dp כגובה, נגדיר איזשהו מרג'ין לתמונה הזאת 10 dp, נגדיר לה Layout Gravity של Center Horizontal
02:10
שתהיה באמצע ואנחנו רואים שאנחנו יכולים להגדיר מימדים משלנו בלי קשר למימדים הקודמים של התמונה ולמימדים המקוריים של התמונה ליתר דיוק.
02:24
עכשיו, לתמונה יש מאפיין שאפשר להשתמש איתו במקום המאפיין background, והוא האמת יותר מומלץ לשימוש עבור תמונות. והמאפיין הזה הוא פשוט src, קיצור של source.
02:40
כאן אנחנו רואים שמשהו קרה לתמונה והיא אוטומטית חוזרת לממדים הרגילים שלה. אז למעשה אם אנחנו שמים תמונה בתוך המאפיין src, ההבדל בינו לבין ה-Background הוא ש-src מותאם יותר לתמונות ומכיל יותר יכולות עבור תמונות.
02:59
Background זה משהו שקיים לרוב הרכיבים הוויזואליים והוא מאוד פשוט ומאפשר לשים צבע עליו או גם תמונה או צורה או וקטור או כל הדברים הקודמים שראינו שאפשר לשים בתוך הדרור.
03:15
אבל src מכיל כל מיני יכולות נוספות. לדוגמה אנחנו יכולים להשתמש במשהו שנקרא scale type ולהגדיר לדוגמה שהתמונה הולכת להיות ב-center שלה. אם היינו משתמשים במאפיין background אז אנחנו רואים שאין בעצם השפעה של scale type על המאפיין background.
03:39
נחזיר את זה ל src ונראה שהוא מושפע מיידית מה-center ויש עוד כל מיני scale types נוספים שאנחנו יכולים לבחור, לדוגמה סנטר קרופ, שהוא מאפשר לנו גזירת קצוות בשביל להתאים בדיוק למרכז וכדומה.
03:57
בואו נריץ את זה, ואנחנו יכולים לראות שהתמונה הסתדרה בדיוק כמו שהגדרנו בעיצוב. הדבר הבא שמאפשר להציג עליו תמונות ומיועד להיות תווה שמחזיק תמונות זה ה-Image Button.
04:15
ה-Image Button מאפשר להציב תמונה עליו. בואו ניקח את אותו הדבר dp-100dp אבל אימג' בטון מאפשר לראות בעצם שזה לחצן והמשתמש יכול לדעת שזה לחצן שפשוט מציג תמונה וככה הוא יכול ללחוץ עליו ולבצע בעצם קליק על הרכיב עצמו כאשר תמונה קצת קשה לדעת שהיא לחיצה.
04:46
בואו ניקח גרוויטי סנטר אוריזונטל נשים אותו באמצע מרג'ין נגדיר את ה src נגדיר scale type הפעם בוא ניקח xy ואז אנחנו רואים שהוא ממש הולך להיות בדיוק באמצע כזה ואנחנו יכולים להגדיר on click נגדיר פה image clicked ובכדי שנראה שמשהו מתבצע אז נגדיר פה text view תן לו id נגדיר לו text size נגדיר
05:50
לו גם gravity גש ונבנה את האירוע פה text view וכעת אנחנו יכולים להגיע ולשים טקסט U-click באונריץ נלחץ על התמונה ואנחנו רואים שיש בעצם איזשהו אינדיקציה קלה כזאת אפשר לראות את זה בשוליים שאנחנו בעצם נמצאים באיזשהו רכיב לחיץ כזה כאשר אם אני לוחץ על התמונה הרגילה אני לא רואה שום דבר אבל חשוב לציין שגם תמונה רגילה יכולה
07:01
לקבל אירוע קליפ זאת אומרת שאם אנחנו ניקח את האירוע הזה מכאן ונדביק אותו כאן ברכיב ה-Image View ונריץ, אנחנו בעצם הולכים לראות שגם רכיב התמונה הוא קליקאבל.
07:18
אני לוחץ עליה, וכבר אני רואה You clicked me. אבל שימו לב כמובן שקשה לראות כשלוחצים על תמונה, ויותר קל לראות כשלוחצים על אימג' באטן.
07:31
אז למעשה תמונה, התפקיד שלה זה פשוט להחזיק תמונה סטטית, אימג' באטן, התפקיד שלו להחזיק תמונה אבל להיות גם לחצן,