ایجاد نمادهای برنامه (Views)

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

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

ایجاد نماد برگه یا نوار اقدام

از استودیو دارایی تصویر برای ایجاد نمادهای برگه و نوار اقدام برای چیدمان‌های مبتنی بر View استفاده کنید.

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

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

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

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

به‌عنوان جایگزینی برای «استودیو دارایی تصویر»، می‌توانید از استودیو دارایی بُرداری برای ایجاد کردن نمادهای نوار اقدام و برگه استفاده کنید. ترسیمی‌های بُرداری برای نمادهای ساده مناسب هستند و می‌توانند اندازه برنامه‌تان را کاهش دهند.

پس‌از باز کردن Image Asset Studio، می‌توانید با دنبال کردن این مراحل، نوار اقدام یا نماد برگه اضافه کنید:

  1. در فیلد نوع نماد، نمادهای زبانه و نوار اقدام را انتخاب کنید.
  2. نوع دارایی را انتخاب کنید، سپس دارایی را در فیلد زیر مشخص کنید:

    • در فیلد قطعه هنری، روی دکمه کلیک کنید.

      در کادر گفتگوی انتخاب نماد، یک نماد مواد را انتخاب کنید و سپس روی تأیید کلیک کنید.

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

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

    نماد در قسمت دارایی منبع در سمت راست و در قسمت پیش‌نمایش در پایین جادوگر ظاهر می‌شود.

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

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

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

    • حاشیه - اگر می‌خواهید حاشیه دارایی منبع را در هر چهار طرف تنظیم کنید، لغزنده را حرکت دهید. مقداری بین ‎-٪۱۰ و ٪۵۰ انتخاب کنید. اگر برش را هم انتخاب کنید، ابتدا برش انجام می‌شود.

    • زمینه - HOLO_LIGHT یا HOLO_DARK را انتخاب کنید. یا برای مشخص کردن رنگ در کادر گفتگوی انتخاب رنگ، سفارشی را انتخاب کنید و سپس روی فیلد رنگ سفارشی کلیک کنید.

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

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

  5. درصورت تمایل، فهرست راهنمای منبع را تغییر دهید:

    • Res Directory - مجموعه منبع منبعی را که می‌خواهید دارایی تصویر به آن اضافه شود انتخاب کنید: src/main/res،‏ src/debug/res،‏ src/release/res، یا مجموعه منبع تعریف‌شده توسط کاربر. مجموعه منبع اصلی برای همه تنوع‌های ساخت، ازجمله اشکال‌زدایی و انتشار، اعمال می‌شود. مجموعه‌های منبع اشکال‌زدایی و انتشار، مجموعه منبع اصلی را لغو می‌کنند و بر یک نسخه از ساخت اعمال می‌شوند. مجموعه منبع اشکال‌زدایی فقط برای اشکال‌زدایی است. برای تعریف کردن مجموعه منبع جدید، فایل > ساختار پروژه > برنامه > انواع ساخت را انتخاب کنید. برای مثال، می‌توانید یک مجموعه منبع بتا تعریف کنید و نسخه‌ای از نماد ایجاد کنید که شامل نوشتار «BETA» در گوشه پایین سمت راست باشد. برای اطلاعات بیشتر، پیکربندی تنوع‌های ساخت را ببینید.

    بخش دایرکتوری‌های خروجی تصاویر و پوشه‌ها را در جایی که در نمای فایل‌های پروژه در پنجره پروژه ظاهر می‌شوند نمایش می‌دهد.

  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 بازیابی می‌کند:

    کاتلین

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

    جاوا

    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 تنظیم می‌کند:

کاتلین

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

جاوا

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

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