יצירת סמלי אפליקציות (תצוגות)

הטמעה של Jetpack פיתוח נייטיב

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

יצירת סמל של סרגל פעולות או כרטיסייה

אפשר להשתמש ב-Image Asset Studio כדי ליצור סמלים של סרגל פעולות וכרטיסיות לפריסות מבוססות-תצוגה.

סמלים בסרגל הפעולות הם רכיבים גרפיים שמוצבים בסרגל הפעולות ומייצגים פריטי פעולה בודדים. מידע נוסף זמין במאמרים הוספה וטיפול בפעולות, סרגל האפליקציות – Material Design{:.external} ועיצוב סרגל הפעולות.

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

‫Image Asset Studio ממקם את הסמלים במיקומים המתאימים בספריות res/drawable-<density>/.

מומלץ להשתמש בסגנון עיצוב חומרי עבור סמלי סרגל הפעולות והכרטיסיות, גם אם אתם תומכים בגרסאות ישנות יותר של Android. אפשר להשתמש ב-appcompat ובספריות תמיכה אחרות כדי להציג את ממשק המשתמש של Material Design בגרסאות ישנות יותר של הפלטפורמה.

כחלופה ל-Image Asset Studio, אפשר להשתמש ב-Vector Asset Studio כדי ליצור סמלים של סרגל פעולות וכרטיסיות. נכסי drawable וקטוריים מתאימים לסמלים פשוטים ויכולים להקטין את גודל האפליקציה.

אחרי שפותחים את Image Asset Studio, אפשר להוסיף סרגל פעולות או סמל של כרטיסייה באופן הבא:

  1. בשדה סוג הסמל, בוחרים באפשרות סמלים של סרגל פעולות וכרטיסיות.

  2. בוחרים סוג נכס ומציינים את הנכס בשדה שמתחת:

    • בשדה Clip Art (אוסף תמונות קליפ), לוחצים על הלחצן.

      בתיבת הדו-שיח Select Icon, בוחרים material icon ולוחצים על OK.

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

    • בשדה Text, מקלידים מחרוזת טקסט ובוחרים גופן.

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

  3. אם רוצים, משנים את השם ואת אפשרויות התצוגה:

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

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

    • שוליים פנימיים – אם רוצים לשנות את השוליים הפנימיים של נכס המקור בכל ארבעת הצדדים, מזיזים את פס ההזזה. בוחרים ערך בין ‎-10% ל-50%. אם בוחרים גם באפשרות חיתוך, החיתוך מתבצע קודם.

    • עיצוב – בוחרים באפשרות HOLO_LIGHT או HOLO_DARK. לחלופין, כדי לציין צבע בתיבת הדו-שיח בחירת צבע, בוחרים באפשרות בהתאמה אישית ואז לוחצים על השדה צבע בהתאמה אישית.

    ‫Image Asset Studio יוצר את הסמל בתוך ריבוע שקוף, כך שיש ריווח מסוים בשוליים. הריווח מספק מספיק מקום לאפקט הרגיל של סמל עם צל.

  4. לוחצים על הבא.

  5. אפשר לשנות את ספריית המשאבים:

    • Res Directory (ספריית משאבים) – בוחרים את קבוצת המקורות של המשאבים שרוצים להוסיף לה את נכס התמונה: src/main/res,‏ src/debug/res,‏ src/release/res או קבוצת מקורות שהוגדרה על ידי המשתמש. קבוצת המקורות הראשית חלה על כל וריאציות הבנייה, כולל ניפוי באגים וגרסת הפצה. קבוצות המקורות של ניפוי הבאגים והגרסה מחליפות את קבוצת המקורות הראשית ומוחלות על גרסה אחת של build. קבוצת המקורות לניפוי באגים מיועדת לניפוי באגים בלבד. כדי להגדיר קבוצת מקורות חדשה, בוחרים באפשרות File > Project Structure > app > Build Types. לדוגמה, אפשר להגדיר קבוצת מקורות בטא וליצור גרסה של סמל שכוללת את הטקסט BETA בפינה השמאלית התחתונה. מידע נוסף זמין במאמר הגדרת וריאציות של Build.

    באזור Output Directories מוצגות התמונות והתיקיות שבהן הן יופיעו בProject Files view בחלון Project.

  6. לוחצים על סיום.

    Image Asset Studio מוסיף את התמונות לתיקיות drawable עבור הצפיפויות השונות.

הפניה למשאב תמונה בקוד

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

  • ברוב המקרים, אפשר להתייחס למשאבי תמונות כאל @drawable בקוד XML או כאל Drawable בקוד Java.

    לדוגמה, קוד ה-XML של הפריסה הבא מציג את ה-drawable ב-ImageView:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

    קוד ה-Java הבא מאחזר את התמונה כ-Drawable:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    השיטה getResources() נמצאת במחלקה Context, שחלה על אובייקטים של ממשק משתמש, כמו פעילויות, קטעים, פריסות, תצוגות וכן הלאה.

  • אם האפליקציה שלכם משתמשת בספריית התמיכה, אתם יכולים להפנות למשאב תמונה בקוד XML באמצעות הצהרת app:srcCompat. לדוגמה:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

אפשר לגשת למשאבי תמונות רק מהשרשור הראשי.

אחרי שיש לכם משאב תמונה בספרייה res/ של הפרויקט, אתם יכולים להפנות אליו מקוד Java או מפריסת ה-XML באמצעות מזהה המשאב שלו. קוד ה-Java הבא מגדיר ImageView לשימוש במשאב drawable/myimage.png:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

מידע נוסף מופיע במאמר גישה למשאבי האפליקציה.