انتخاب رنگ با Palette API

طراحی بصری خوب برای موفقیت برنامه ضروری است و آرایش رنگ‌ها مؤلفه اصلی طراحی است. کتابخانه پالت یک کتابخانه Jetpack است که رنگ‌های برجسته را از تصاویر استخراج می‌کند تا برنامه‌هایی جذاب ازنظر بصری ایجاد کند.

می‌توانید از کتابخانه Palette برای طراحی زمینه‌های چیدمان و اعمال رنگ‌های سفارشی به عناصر بصری در برنامه‌تان استفاده کنید. برای مثال، می‌توانید از پالت برای ایجاد یک کارت عنوان هماهنگ با رنگ برای یک آهنگ براساس جلد آلبوم آن یا برای تنظیم رنگ نوار ابزار برنامه هنگام تغییر تصویر پس‌زمینه آن استفاده کنید. شیء Palette به شما امکان می‌دهد به رنگ‌های موجود در تصویر Bitmap دسترسی داشته باشید و درعین‌حال شش نمایه رنگ اصلی از نقشه بیتی ارائه می‌دهد تا به انتخاب‌های طراحی شما کمک کند.

راه‌اندازی کتابخانه

برای استفاده از کتابخانه Palette، موارد زیر را به build.gradle اضافه کنید:

android {
    compileSdkVersion(36)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

android {
    compileSdkVersion 36
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

ایجاد پالت

شیء Palette به شما امکان می‌دهد به رنگ‌های اصلی در تصویر و همچنین رنگ‌های متناظر برای نوشتار هم‌پوشانی‌شده دسترسی داشته باشید. از پالت‌ها برای طراحی سبک برنامه‌تان و تغییر پویای آرایش رنگ‌های برنامه‌تان براساس تصویر منبع داده‌شده استفاده کنید.

برای ایجاد پالت، ابتدا یک Palette.Builder را از یک Bitmap نمونه‌سازی کنید. سپس می‌توانید از Palette.Builder برای سفارشی‌سازی پالت قبل‌از تولید آن استفاده کنید. این بخش تولید و سفارشی‌سازی پالت از تصویر بیت‌مپ را شرح می‌دهد.

تولید نمونه پالت

نمونه Palette را بااستفاده از روش from(Bitmap bitmap) آن تولید کنید تا ابتدا Palette.Builder را از Bitmap ایجاد کنید.

سازنده می‌تواند پالت را به‌صورت هم‌زمان یا ناهم‌زمان تولید کند. اگر می‌خواهید پالت را در همان رشته‌ای که روش فراخوانی می‌شود ایجاد کنید، از تولید پالت همگام استفاده کنید. اگر پالت را به‌صورت ناهمگام در رشته‌ای متفاوت تولید می‌کنید، از روش onGenerated() برای دسترسی به پالت بلافاصله پس‌از ایجاد آن استفاده کنید.

تکه‌کد زیر روش‌های نمونه را برای هر دو نوع تولید پالت ارائه می‌دهد:

// Generate palette synchronously and return it.
fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate()

// Generate palette asynchronously and use it on a different thread using onGenerated().
fun createPaletteAsync(bitmap: Bitmap) {
    Palette.from(bitmap).generate { palette ->
        // Use generated instance.
    }
}

// Generate palette synchronously and return it.
public Palette createPaletteSync(Bitmap bitmap) {
  Palette p = Palette.from(bitmap).generate();
  return p;
}

// Generate palette asynchronously and use it on a different thread using onGenerated().
public void createPaletteAsync(Bitmap bitmap) {
  Palette.from(bitmap).generate(new PaletteAsyncListener() {
    public void onGenerated(Palette p) {
      // Use generated instance.
    }
  });
}

اگر لازم است به‌طور مداوم برای فهرست مرتب‌شده‌ای از تصاویر یا اشیاء پالت تولید کنید، برای جلوگیری از کند شدن عملکرد میانای کاربر، ذخیره کردن نمونه‌های Palette را در حافظه نهان درنظر بگیرید. پالت‌ها را در رشته اصلی ایجاد نکنید.

سفارشی‌سازی پالت

Palette.Builder به شما امکان می‌دهد پالت خود را با انتخاب تعداد رنگ‌های موجود در پالت حاصل، ناحیه‌ای از تصویر که سازنده برای تولید پالت استفاده می‌کند، و رنگ‌هایی که در پالت گنجانده شده‌اند، سفارشی‌سازی کنید. برای مثال، می‌توانید رنگ سیاه را فیلتر کنید یا مطمئن شوید که سازنده فقط از نیمه بالایی تصویر برای تولید پالت شما استفاده می‌کند.

اندازه و رنگ‌های پالت را با روش‌های زیر از کلاس Palette.Builder تنظیم کنید:

addFilter()

این روش فیلتری اضافه می‌کند که نشان می‌دهد چه رنگ‌هایی در پالت حاصل مجاز است. Palette.Filter خودتان را ارسال کنید و روش isAllowed() آن را اصلاح کنید تا مشخص شود کدام رنگ‌ها از پالت فیلتر می‌شوند.

maximumColorCount()

این روش حداکثر تعداد رنگ‌ها را در پالت شما تنظیم می‌کند. مقدار پیش‌فرض ۱۶ است و مقدار بهینه به تصویر منبع بستگی دارد. برای مناظر، مقادیر بهینه از ۸ تا ۱۶ است، درحالی‌که تصاویر دارای چهره معمولاً مقادیری از ۲۴ تا ۳۲ دارند. Palette.Builder برای تولید پالت‌هایی با رنگ‌های بیشتر به زمان بیشتری نیاز دارد.

setRegion()

این روش نشان می‌دهد که سازنده هنگام ایجاد پالت از کدام ناحیه نقشه بیتی استفاده می‌کند. فقط هنگام تولید پالت از نقشه بیتی می‌توانید از این روش استفاده کنید، و این روش بر تصویر اصلی تأثیر نمی‌گذارد.

addTarget()

این روش به شما امکان می‌دهد با افزودن نمایه رنگ به سازنده، Target تطبیق رنگ خودتان را انجام دهید. اگر Target پیش‌فرض کافی نباشد، توسعه‌دهندگان پیشرفته می‌توانند Target خودشان را بااستفاده از Target.Builder ایجاد کنند.

استخراج نمایه‌های رنگ

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

به‌طور پیش‌فرض، شیء Palette حاوی ۱۶ رنگ اصلی از تصویر داده‌شده است. هنگام تولید پالت، می‌توانید تعداد رنگ‌های آن را بااستفاده از Palette.Builder سفارشی‌سازی کنید. استخراج رنگ‌های بیشتر باعث می‌شود تطابق‌های بالقوه بیشتری برای هر نمایه رنگی ارائه شود، اما باعث می‌شود Palette.Builder زمان بیشتری برای تولید پالت صرف کند.

کتابخانه Palette تلاش می‌کند شش نمایه رنگ زیر را استخراج کند:

• زنده روشن
• زنده
• زنده تیره
• بی‌صدا کردن چراغ
• بی‌صدا
• تیره ملایم

هرکدام از روش‌های get<Profile>Color() در Palette رنگ را در پالت مرتبط با آن نمایه خاص برمی‌گرداند، که در آن <Profile> با نام یکی از شش نمایه رنگ جایگزین می‌شود. برای مثال، روش دریافت نمایه رنگی «تیره زنده» getDarkVibrantColor() است. ازآنجایی‌که همه تصاویر حاوی همه نمایه‌های رنگی نیستند، رنگ پیش‌فرضی برای برگرداندن ارائه دهید.

شکل ۱ عکسی را نشان می‌دهد که نمایه‌های رنگی مربوط به آن از روش‌های get<Profile>Color() گرفته شده است.

استفاده از نمونه‌های رنگ برای ایجاد آرایش رنگ‌ها

کلاس Palette همچنین Palette.Swatch شیء برای هر نمایه رنگ تولید می‌کند. اشیاء Palette.Swatch حاوی رنگ مرتبط با آن نمایه و همچنین جمعیت رنگ در پیکسل‌ها هستند.

نمونه‌ها روش‌های دیگری برای دسترسی به اطلاعات بیشتر درباره نمایه رنگ دارند، مانند مقادیر HSL و جمعیت پیکسل. می‌توانید از نمونه‌های رنگی برای کمک به ایجاد طرح‌های رنگی جامع‌تر و زمینه‌های برنامه بااستفاده از روش‌های getBodyTextColor() و getTitleTextColor() استفاده کنید. این روش‌ها رنگ‌های مناسبی را برای استفاده روی رنگ نمونه برمی‌گردانند.

هر روش get<Profile>Swatch() از Palette نمونه رنگ مرتبط با آن نمایه خاص را برمی‌گرداند، که در آن <Profile> با نام یکی از شش نمایه رنگ جایگزین می‌شود. اگرچه روش‌های get<Profile>Swatch() پالت به پارامترهای مقدار پیش‌فرض نیاز ندارند، اگر آن نمایه خاص در تصویر وجود نداشته باشد، null را برمی‌گردانند. بنابراین، قبل‌از استفاده از نمونه رنگ، بررسی کنید که مقدار آن تهی نباشد. برای مثال، کد زیر رنگ نوشتار عنوان را از پالت دریافت می‌کند، اگر نمونه Vibrant پوچ نباشد:

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

برای دسترسی به همه رنگ‌های موجود در پالت، روش getSwatches() فهرستی از همه نمونه‌های تولیدشده از تصویر را برمی‌گرداند، ازجمله شش نمایه رنگ استاندارد.

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

// Set the background and text colors of a toolbar given a bitmap image to
// match.
fun setToolbarColor(bitmap: Bitmap) {
    // Generate the palette and get the vibrant swatch.
    val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch

    // Set the toolbar background and text colors.
    // Fall back to default colors if the vibrant swatch isn't available.
    with(findViewById<Toolbar>(R.id.toolbar)) {
        setBackgroundColor(vibrantSwatch?.rgb ?:
                ContextCompat.getColor(context, R.color.default_title_background))
        setTitleTextColor(vibrantSwatch?.titleTextColor ?:
                ContextCompat.getColor(context, R.color.default_title_color))
    }
}

// Set the background and text colors of a toolbar given a bitmap image to
// match.
public void setToolbarColor(Bitmap bitmap) {
    // Generate the palette and get the vibrant swatch.
    // See the createPaletteSync() method from the preceding code snippet.
    Palette p = createPaletteSync(bitmap);
    Palette.Swatch vibrantSwatch = p.getVibrantSwatch();

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Load default colors.
    int backgroundColor = ContextCompat.getColor(getContext(),
        R.color.default_title_background);
    int textColor = ContextCompat.getColor(getContext(),
        R.color.default_title_color);

    // Check that the Vibrant swatch is available.
    if(vibrantSwatch != null){
        backgroundColor = vibrantSwatch.getRgb();
        textColor = vibrantSwatch.getTitleTextColor();
    }

    // Set the toolbar background and text colors.
    toolbar.setBackgroundColor(backgroundColor);
        toolbar.setTitleTextColor(textColor);
}