افزودن گرافیک‌های برداری چندچگالی (نماها)

مفاهیم و پیاده‌سازی Jetpack Compose

Android Studio شامل ابزاری به‌نام Vector Asset Studio است که به شما کمک می‌کند نمادهای Material را اضافه کنید و فایل‌های «نگاره‌سازی برداری مقیاس‌پذیر» (SVG) و Adobe Photoshop Document (PSD) را به‌عنوان منابع ترسیم‌شدنی برداری به پروژه‌تان وارد کنید. استفاده از ترسیمی‌های برداری به‌جای نقشه‌های بیتی اندازه APK شما را کاهش می‌دهد زیرا می‌توان اندازه همان فایل را برای تراکم‌های مختلف صفحه‌نمایش بدون ازدست رفتن کیفیت تصویر تغییر داد. برای نسخه‌های قدیمی‌تر Android که از ترسیمی‌های بُرداری پشتیبانی نمی‌کنند، «استودیوی دارایی بُرداری» می‌تواند در زمان ساخت، ترسیمی‌های بُرداری شما را به اندازه‌های مختلف نقشه بیتی برای هر تراکم صفحه تبدیل کند.

درباره «استودیو دارایی بُرداری»

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

Android 4.4 (سطح API‏ ۲۰) و نسخه‌های پایین‌تر از ترسیمی‌های برداری پشتیبانی نمی‌کنند. اگر حداقل سطح API شما روی یکی از این سطوح API تنظیم شده باشد، هنگام استفاده از «استودیوِ دارایی بُرداری» دو گزینه دارید: تولید فایل‌های Portable Network Graphic (PNG) (پیش‌فرض) یا استفاده از تکنیک سازگاری با نسخه قدیمی در AndroidX.

برای سازگاری با نسخه قدیمی، «استودیوی دارایی بُرداری» تصاویر شطرنجی از ترسیمی بُرداری تولید می‌کند. ترسیم‌پذیرهای برداری و شطرنجی باهم در APK بسته‌بندی می‌شوند. می‌توانید به ترسیمی‌های بُرداری به‌عنوان Drawable در کد جاوا یا @drawable در کد XML ارجاع دهید؛ وقتی برنامه‌تان اجرا می‌شود، تصویر بُرداری یا شطرنجی مربوطه به‌طور خودکار بسته به سطح API نمایش داده می‌شود.

سازگاری با نسخه قدیمی در AndroidX

این تکنیک به AndroidX نسخه ۱.۰ یا بالاتر و افزایه Android ویژه Gradle نسخه ۳.۲ یا بالاتر نیاز دارد و فقط از ترسیمی‌های برداری استفاده می‌کند. کلاس VectorDrawableCompat در AndroidX به شما امکان می‌دهد از VectorDrawable در Android نسخه ۲.۱ (سطح میانای برنامه‌سازی کاربردی ۷) و بالاتر پشتیبانی کنید.

قبل‌از استفاده از «استودیوی دارایی بُرداری»، باید عبارتی را به فایل build.gradle خود اضافه کنید:

شیک

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

کاتلین

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

همچنین باید از تکنیک‌های کدنویسی AndroidX برای سازگاری با نسخه‌های قدیمی استفاده کنید، مثلاً استفاده از مشخصه app:srcCompat به‌جای مشخصه android:src برای ترسیمی‌های برداری. برای اطلاعات بیشتر، AndroidX را ببینید.

افزودن ترسیمی بُرداری به چیدمان

در فایل چیدمان، می‌توانید هر ابزاره مرتبط با نماد، مثل ImageButton، ImageView، و غیره را طوری تنظیم کنید که به ترسیمی بُرداری اشاره کند. برای مثال، چیدمان زیر یک ترسیمی بُرداری را نشان می‌دهد که روی دکمه‌ای نمایش داده شده است:

شکل ۱. ترسیمی بُرداری که روی دکمه‌ای در چیدمان نمایش داده می‌شود.

برای نمایش ترسیمی بُرداری در ابزاره، همان‌طور که در شکل نشان داده شده است:

1. پروژه‌ای را باز کنید و یک ترسیمی بُرداری وارد کنید.

   این مثال از پروژه «تلفن/رایانه لوحی» استفاده می‌کند که با «دستیار پروژه جدید» تولید شده است.

2. در نمای Android پنجره پروژه، روی فایل XML چیدمان، مثل content_main.xml، دوکلیک کنید.

3. روی برگه طراحی کلیک کنید تا ویرایشگر چیدمان نمایش داده شود.

4. ابزاره ImageButton را از پنجره پالت به «ویرایشگر چیدمان» بکشید.

5. در کادر گفتگوی منابع، ترسیمی را در قاب سمت راست انتخاب کنید، و سپس ترسیمی بُرداری را که وارد کرده‌اید انتخاب کنید. روی بسیارخوب کلیک کنید.

   ترسیمی برداری در ImageButton در چیدمان نشان داده می‌شود.

6. برای تغییر رنگ تصویر به رنگ ثانویه تعریف‌شده در زمینه، در پنجره ویژگی‌ها، ویژگی سایه‌رنگ را پیدا کنید و روی … کلیک کنید .

7. در کادر گفتگوی منابع، رنگ را در قاب سمت راست انتخاب کنید، و سپس colorAccent را انتخاب کنید. روی بسیارخوب کلیک کنید.

   رنگ تصویر به رنگ تأکیدی در چیدمان تغییر می‌کند.

اگر پروژه از AndroidX استفاده می‌کند، کد ImageButton باید شبیه به کد زیر باشد:

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

اگر پروژه از AndroidX استفاده نمی‌کند، کد ترسیمی بُرداری به‌جای آن android:src="@drawable/ic_build_black_24dp" خواهد بود.

توجه: اگرچه ترسیمی‌های برداری از یک یا چند رنگ پشتیبانی می‌کنند، در بسیاری از موارد منطقی است که نمادها را سیاه رنگ کنید (android:fillColor="#FF000000"). بااستفاده از این رویکرد، می‌توانید یک سایه رنگ به ترسیمی برداری که در یک چیدمان قرار داده‌اید اضافه کنید و رنگ نماد به رنگ سایه رنگ تغییر می‌کند. اگر رنگ نماد سیاه نباشد، ممکن است رنگ نماد با رنگ سایه ترکیب شود.

ارجاع به ترسیمی بُرداری در کد

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

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

  برای مثال، کد XML طرح‌بندی زیر تصویر را روی یک نما اعمال می‌کند:

  <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 قرار دارد که برای اشیاء واسط کاربر، مانند فعالیت‌ها، قطعه‌ها، چیدمان‌ها، نماها، و غیره اعمال می‌شود.

• اگر برنامه‌تان اصلاً از AndroidX استفاده می‌کند (حتی اگر عبارت vectorDrawables.useSupportLibrary = true را در فایل build.gradle خود ندارید)، می‌توانید با عبارت app:srcCompat به ترسیمی بُرداری نیز ارجاع دهید. برای مثال:

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

• گاهی اوقات ممکن است لازم باشد منبع ترسیم‌شدنی را به کلاس دقیق آن تبدیل کنید، مثلاً وقتی که باید از ویژگی‌های خاص کلاس VectorDrawable استفاده کنید. برای انجام این کار، می‌توانید از کدی مانند کد زیر استفاده کنید:

  کاتلین

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val vectorDrawable = drawable as VectorDrawable
  } else {
    val bitmapDrawable = drawable as BitmapDrawable
  }

  جاوا

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    VectorDrawable vectorDrawable = (VectorDrawable) drawable;
  } else {
    BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
  }

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

برای Android نسخه ۵.۰ (سطح میانای برنامه‌سازی کاربردی ۲۱) و بالاتر، می‌توانید از کلاس AnimatedVectorDrawable برای پویانمایی ویژگی‌های کلاس VectorDrawable استفاده کنید. با AndroidX، می‌توانید از کلاس AnimatedVectorDrawableCompat برای پویانمایی کلاس VectorDrawable برای Android 3.0 (سطح میانای برنامه‌سازی کاربردی ۱۱) و بالاتر استفاده کنید. برای اطلاعات بیشتر، به پویانمایی گرافیک‌های قابل‌ترسیم مراجعه کنید.