PracticU

Gradient to Image Maker

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Gradient to Image Maker
מילון מושגים:
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
אמולטור - תוכנה שמחקה מכשיר או סביבה אחרת, למשל כדי להריץ ולבדוק אפליקציית מובייל על המחשב.
Base64 - שיטת קידוד שממירה נתונים בינאריים לטקסט מתווים מודפסים, כדי להעבירם בבטחה בערוצים טקסטואליים.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
Activity - ב-Android, רכיב שמייצג מסך יחיד של האפליקציה שאיתו המשתמש מתקשר.

Gradient to Image Maker
הכלי Gradient to Image Maker באתר angrytools.com יוצר תמונת גרדיאנט שאפשר להשתמש בה כרקע ללחצן, למסך או לכל רכיב אחר. ההרצאה מראה איך מייצרים כמה תמונות כאלה ומכניסים אותן לפרויקט.
השלבים העיקריים
1. בוחרים בסיס: בכלי יש גלריה של תמונות גרדיאנט, ובוחרים אחת מהן.
2. קובעים מידות: בדוגמה 360 על 640 פיקסלים, שהם מידות סטנדרטיות לפחות עבור האמולטור.
3. מייצרים: לוחצים Generate image. התוצאה מוצגת בשלושה ייצוגים: base64 (ייצוג טקסטואלי של התמונה, לשמירה בקובץ טקסט או לשליחה באינטרנט), css (לאתרי אינטרנט) ותמונה עצמה.
4. מורידים ומוסיפים: שומרים את התמונה (בדוגמה background1), מעתיקים ומדביקים ב-drawable של הפרויקט, ומציבים כ-background של ה-activity.
5. משנים את הרמות: בתמונה השנייה הוזזו רמת השחור והכחול, ונוצר גרדיאנט כחול (background2).
6. גרדיאנט רדיאלי: גרדיאנט עגול שמתחיל במרכז ומתפשט בצורה מעגלית לפינות. בדוגמה נבחר צבע אחר והוגדר רדיאלי (background3).
אחרי ההרצאה אפשר לייצר תמונות גרדיאנט בצבעים ובצורות שונות, ולהשתמש בהן כרקע באפליקציה.
השיעור הבא בקורס: Patch Resizer

פרקי ההרצאה: Gradient to Image Maker

  1. 00:00

    כלי יצירת גרדיאנט ב-angrytools

  2. 00:42

    הגדרת הגרדיאנט ומימדי התמונה

  3. 01:21

    פורמטי Base64, CSS ותמונה

  4. 02:19

    הוספת התמונה כרקע ל-Activity

  5. 02:56

    יצירת גרדיאנט נוסף

תמלול ההרצאה: Gradient to Image Maker

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

  1. 00:02

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

  2. 00:29

    הזה וליצור לעצמנו תמונת גרדיאנט אז אנחנו ניגשים לאתר angrytools.com והכלי זה הכלי הזה gradient to image maker בואו ניכנס אליו ונראה שיש לנו פה אפשרות לייצר תמונה שבנויה כ-gradient דבר ראשון יש לנו פה איזושהי גלריה שאנחנו יכולים לבחור ממנה איזה שהם תמונות בואו ניקח את התמונה

  3. 00:58

    הזאת הירוקה הזאת ובואו נניח שזה בדיוק מה שאנחנו רוצים מה שאנחנו צריכים לעשות זה זה רק להגדיר את המימדים שלה, כמה וויד אנחנו רוצים, בואו נניח שאנחנו רוצים 360 פיקסלים ו-height 640 פיקסלים, זה רוחב וגובה

  4. 01:18

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

  5. 01:30

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

  6. 01:44

    CSS זה בעצם ייצוג התמונה בקובץ CSS שמתאים לבניית אתרי אינטרנט ו-Gradient Image זאת התמונה עצמה. אז כל מה שאנחנו צריכים לעשות זה פשוט ללחוץ על Generate Image ואנחנו הולכים לראות שהוא פשוט מייצר לנו את התמונה, מייצר לנו את קוד ה-CSS שלה אם אנחנו רוצים להשתמש עם זה באתר אינטרנט

  7. 02:06

    וכאן אנחנו רואים את הייצוג של התמונה כמידע טקסטואלי. אז אנחנו רוצים לגשת לכאן, לתמונה עצמה, ו-to download it. בואו ניגש ופשוט ניצור קובץ, נקרא לו background1, נבצע save, והקובץ הזה נשמר על הדסטופ.

  8. 02:28

    בואו נעתיק אותו, ctrl+c, נחזור לאנדרואיד סטודיו, drawable, ctrl+v, אוקיי, ופשוט נשתמש עם התמונה ב-background, של האקטיביטי.

  9. 02:42

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

  10. 02:56

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

  11. 03:11

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

לקורס המלא: קורס פיתוח אפליקציות לאנדרואיד

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

ההרצאה הבאה: Patch Resizer

הרצאות קשורות מקורסים אחרים

  • Publish Image
  • Glance image service
  • הוספת דרייברים ל-IMAGE
  • Hiding UIImages in a UIStackView and image Alpha for toggling On Off

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון