ایجاد آیکون‌های برنامه (Views)

پیاده‌سازی Jetpack Compose

این صفحه شامل اطلاعاتی در مورد ایجاد و استفاده از آیکون‌های برنامه است که مختص طرح‌بندی‌های مبتنی بر View است. برای اطلاعات جامع‌تر در مورد ایجاد آیکون‌های برنامه، به بخش «ایجاد آیکون‌های برنامه» مراجعه کنید که چارچوب رابط کاربری پیشنهادی ما را پوشش می‌دهد.

یک نوار اکشن یا آیکون تب ایجاد کنید

از Image Asset Studio برای ایجاد آیکون‌های اکشن بار و تب برای طرح‌بندی‌های مبتنی بر نما استفاده کنید.

آیکون‌های نوار اکشن، عناصر گرافیکی هستند که در نوار اکشن قرار می‌گیرند و نشان‌دهنده‌ی آیتم‌های اکشن مجزا هستند. برای اطلاعات بیشتر به افزودن و مدیریت اکشن‌ها ، نوار اپلیکیشن - طراحی متریال {:.external} و طراحی نوار اکشن مراجعه کنید.

آیکون‌های تب، عناصر گرافیکی هستند که برای نمایش تب‌های مجزا در یک رابط کاربری چند تبی استفاده می‌شوند. هر آیکون تب دو حالت دارد: انتخاب نشده و انتخاب شده. برای اطلاعات بیشتر به بخش ایجاد نماهای Swipe با تب‌ها و تب‌ها - طراحی متریال مراجعه کنید.

Image Asset Studio آیکون‌ها را در مکان‌های مناسب در دایرکتوری‌های res/drawable-<density>/ قرار می‌دهد.

توصیه می‌کنیم حتی اگر از نسخه‌های قدیمی‌تر اندروید پشتیبانی می‌کنید، از سبک طراحی متریال برای آیکون‌های نوار اکشن و تب استفاده کنید. از appcompat و سایر کتابخانه‌های پشتیبانی برای ارائه رابط کاربری متریال دیزاین خود به نسخه‌های قدیمی‌تر پلتفرم استفاده کنید.

به عنوان جایگزینی برای Image Asset Studio، می‌توانید از Vector Asset Studio برای ایجاد آیکون‌های action bar و tab استفاده کنید. vector drawables برای آیکون‌های ساده مناسب هستند و می‌توانند اندازه برنامه شما را کاهش دهند.

بعد از باز کردن Image Asset Studio ، می‌توانید با دنبال کردن مراحل زیر یک نوار اکشن یا آیکون تب اضافه کنید:

  1. در قسمت Icon Type ، گزینه Action Bar and Tab Icons را انتخاب کنید.
  2. یک نوع دارایی انتخاب کنید و سپس دارایی را در فیلد زیر مشخص کنید:

    • در قسمت Clip Art ، روی دکمه کلیک کنید.

      در پنجره‌ی «انتخاب آیکون» ، یک آیکون متریال انتخاب کنید و سپس روی «تأیید» کلیک کنید.

    • در فیلد مسیر ، مسیر و نام فایل تصویر را مشخص کنید. برای استفاده از کادر محاوره‌ای، روی ... کلیک کنید.

    • در قسمت متن ، یک رشته متن تایپ کنید و یک فونت انتخاب کنید.

    این آیکون در قسمت Source Asset در سمت راست و در قسمت پیش‌نمایش در پایین ویزارد ظاهر می‌شود.

  3. در صورت تمایل، نام و گزینه‌های نمایش را تغییر دهید:

    • نام - اگر نمی‌خواهید از نام پیش‌فرض استفاده کنید، یک نام جدید تایپ کنید. اگر آن نام منبع از قبل در پروژه وجود داشته باشد، همانطور که با خطایی در پایین ویزارد نشان داده شده است، بازنویسی می‌شود. این نام فقط می‌تواند شامل حروف کوچک، زیرخط و اعداد باشد.

    • برش - برای تنظیم حاشیه بین تصویر گرافیکی آیکون و حاشیه در تصویر اصلی، گزینه بله را انتخاب کنید. این عملیات فضای شفاف را حذف می‌کند، در حالی که نسبت ابعاد حفظ می‌شود. برای اینکه تصویر اصلی بدون تغییر باقی بماند، گزینه خیر را انتخاب کنید.

    • Padding - اگر می‌خواهید padding منبع را در هر چهار طرف تنظیم کنید، نوار لغزنده را حرکت دهید. مقداری بین -10% و 50% انتخاب کنید. اگر Trim را نیز انتخاب کنید، ابتدا trimming انجام می‌شود.

    • تم - HOLO_LIGHT یا HOLO_DARK را انتخاب کنید. یا برای تعیین رنگ در کادر محاوره‌ای Select Color ، گزینه CUSTOM را انتخاب کنید و سپس روی فیلد Custom color کلیک کنید.

    Image Asset Studio آیکون را درون یک مربع شفاف ایجاد می‌کند، بنابراین مقداری فاصله بین لبه‌ها وجود دارد. این فاصله فضای کافی برای افکت سایه استاندارد آیکون فراهم می‌کند.

  4. روی بعدی کلیک کنید.

  5. به صورت اختیاری دایرکتوری منابع را تغییر دهید:

    • دایرکتوری Res - مجموعه منبع منبعی را که می‌خواهید دارایی تصویر را به آن اضافه کنید، انتخاب کنید: src/main/res ، src/debug/res ، src/release/res یا یک مجموعه منبع تعریف‌شده توسط کاربر. مجموعه منبع اصلی برای همه انواع ساخت، از جمله اشکال‌زدایی و انتشار، اعمال می‌شود. مجموعه‌های منبع اشکال‌زدایی و انتشار، مجموعه منبع اصلی را نادیده می‌گیرند و برای یک نسخه از ساخت اعمال می‌شوند. مجموعه منبع اشکال‌زدایی فقط برای اشکال‌زدایی است. برای تعریف یک مجموعه منبع جدید، File > Project Structure > app > Build Types را انتخاب کنید. به عنوان مثال، می‌توانید یک مجموعه منبع بتا تعریف کنید و نسخه‌ای از یک آیکون ایجاد کنید که شامل متن "BETA" در گوشه پایین سمت راست باشد. برای اطلاعات بیشتر، به پیکربندی انواع ساخت مراجعه کنید.

    ناحیه‌ی «راهنمای خروجی‌ها» تصاویر و پوشه‌هایی را که قرار است در نمای «فایل‌های پروژه » از پنجره‌ی پروژه نمایش داده شوند، نمایش می‌دهد.

  6. روی پایان کلیک کنید.

    Image Asset Studio تصاویر را در پوشه‌های drawable برای تراکم‌های مختلف اضافه می‌کند.

به یک منبع تصویر در کد ارجاع دهید

شما معمولاً می‌توانید به یک منبع تصویر به صورت عمومی در کد خود ارجاع دهید، و هنگامی که برنامه شما اجرا می‌شود، تصویر مربوطه بسته به دستگاه به طور خودکار نمایش داده می‌شود:

  • در بیشتر موارد، می‌توانید به منابع تصویر به صورت @drawable در کد XML یا Drawable در کد جاوا اشاره کنید.

    برای مثال، کد XML طرح‌بندی زیر، فایل ترسیم‌پذیر (drawable) را در یک ImageView نمایش می‌دهد:

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

    کد جاوای زیر تصویر را به عنوان یک Drawable بازیابی می‌کند:

    کاتلین

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

    جاوا

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

    متد getResources() در کلاس Context قرار دارد که به اشیاء رابط کاربری مانند activityها، fragmentها، layoutها، viewها و غیره اعمال می‌شود.

  • اگر برنامه شما از کتابخانه پشتیبانی استفاده می‌کند، می‌توانید با استفاده از دستور app:srcCompat به یک منبع تصویر در کد XML ارجاع دهید. برای مثال:

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

شما فقط می‌توانید از طریق thread اصلی به منابع تصویری دسترسی داشته باشید.

بعد از اینکه یک منبع تصویر در دایرکتوری res/ پروژه خود داشتید، می‌توانید با استفاده از شناسه منبع آن، از طریق کد جاوا یا طرح‌بندی XML خود به آن ارجاع دهید. کد جاوای زیر یک ImageView را برای استفاده از منبع drawable/myimage.png تنظیم می‌کند:

کاتلین

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

جاوا

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

برای اطلاعات بیشتر به بخش «دسترسی به منابع برنامه» مراجعه کنید.