PracticU

Android Button Maker

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Android Button Maker
מילון מושגים:
Android - מערכת הפעלה מבוססת Linux לטלפונים ולמכשירים ניידים, שפותחה על ידי גוגל.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
XML - שפת סימון לייצוג נתונים מובְנים בעזרת תגיות, המשמשת להחלפת מידע בין מערכות ולקובצי הגדרות.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.

Android Button Maker
בניית קבצי shape ביד, עם גרדיאנטים וצבעים, יכולה להיות מייגעת, וזה בעצם תחום של מעצבים. ההרצאה מציגה אתר שמייצר את קבצי העיצוב בצורה ויזואלית, ומראה איך להעביר את התוצאה ל-Android Studio.
השלבים העיקריים
1. האתר: angrytools.com מציע כלי עיצוב לאינטרנט ולפיתוח אנדרואיד, כמו עיצוב CSS, תמונות עם גרדיאנט וממיר יחידות (למשל כמה DP, SP או מילימטרים הם אינץ' אחד, ועם DPI נבחר).
2. Android Button Maker: הכלי מציג לחצן ומספק שני קודים: קוד הלחצן עצמו וקובץ button_shape.xml עם הגרדיאנט וההגדרות. אפשר להשתמש בעיצוב גם לרכיבים אחרים.
3. משנים את העיצוב: בדוגמה שונו הטקסט ל-"click me", צבע טקסט ירוק כהה, גודל טקסט 25, צל שחור (הזזה 5 ו-5, רדיוס 2), גודל 280 על 100, רדיוס פינות שונה לכל פינה (30 ו-5), צבע גרדיאנט כחול (או צבע אחיד), ו-stroke בעובי 5 בשחור. כל שינוי נראה מיד.
4. מעתיקים את ה-shape: האתר מציין לאן כל קובץ הולך (בתיקיית drawable ואיפה בלייאאוט). יוצרים ב-drawable קובץ button_shape ומדביקים את התוכן.
5. מעתיקים את הלחצן: מדביקים את קוד הלחצן בקובץ ה-layout, מגדירים gravity למרכז ומריצים.
כשצריך עיצוב לרכיבים, עדיף להתחיל מכלי עיצוב מוכן מאשר לכתוב אותו מאפס, ואחרי ההרצאה אפשר לייצר לחצנים מעוצבים ולהכניס אותם לפרויקט בשני העתקות.
השיעור הבא בקורס: Qualifying Resources

פרקי ההרצאה: Android Button Maker

  1. 00:00

    הקושי בעיצוב Resources ידנית

  2. 00:40

    סקירת כלי העיצוב באתר

  3. 02:16

    עיצוב לחצן ב-Button Maker

  4. 02:54

    שינוי הטקסט והצל של הלחצן

תמלול ההרצאה: Android Button Maker

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

  1. 00:02

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

  2. 00:35

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

  3. 00:48

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

  4. 01:09

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

  5. 01:29

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

  6. 01:48

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

  7. 02:05

    ובואו נחזור, נראה שיש פה כל מיני כלים שקשורים לעולם העיצוב, אבל מה שאני רוצה להראות לכם זה את הגלי הזה, Android Button Maker.

  8. 02:17

    Android Button Maker מאפשר לנו לבנות עיצוב ללחצן, אבל אנחנו כמובן יכולים להשתמש בעיצוב הזה לא רק ללחצנים. אז הדבר הראשון שאנחנו רואים פה זה עיצוב ראשוני שנותנים לנו עבור לחצן עם איזשהו גרדיאנט עם כמה פינות מעוגלות, ונותנים לנו כאן שני קודים, הקוד של הלחצן עצמו ו-bottom-shape.xml שזה

  9. 02:41

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

  10. 02:53

    בואו נעשה את זה, בואו נניח שבמקום שיהיה כתוב "bottom" יהיה כתוב "click me". שימו לב שכל פעם שאנחנו משנים אנחנו מיד רואים את זה כאן.

  11. 02:53

    טקסט קולור נגדיר אותו כסוג של רוק כזה יותר כהה נגדיר לו טקסט סייז בואו נגדיר 25 יש לנו כאן את

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

ההרצאה הקודמת: Vector Drawable - SVG

ההרצאה הבאה: Qualifying Resources

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

  • UITextField - UITextFieldDelegate Intro And Return Button
  • יצירת קבצי התקנה ל-Android ו-iPhone
  • דיבאג של קובץ APK בתוך Android Studio ללא קוד מקור

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

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