رنگ ها را با Palette API انتخاب کنید

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

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

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

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

کاتلین

android {
    compileSdkVersion(33)
    ...
}

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

شیار

android {
    compileSdkVersion 33
    ...
}

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()

این روش حداکثر تعداد رنگ ها را در پالت شما تنظیم می کند. مقدار پیش فرض 16 است و مقدار بهینه به تصویر منبع بستگی دارد. برای مناظر، مقادیر بهینه از 8 تا 16 متغیر است، در حالی که تصاویر با چهره معمولاً مقادیری از 24 تا 32 دارند. Palette.Builder برای تولید پالت هایی با رنگ های بیشتر زمان بیشتری می برد.

setRegion()

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

addTarget()

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

استخراج پروفایل های رنگی

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

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

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

• پر جنب و جوش نور
• پر جنب و جوش
• تیره پر جنب و جوش
• نور خاموش شد
• بی صدا شد
• Dark Muted

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

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

شکل 1. یک تصویر نمونه و نمایه های رنگ استخراج شده آن با توجه به حداکثر تعداد رنگ پیش فرض (16) برای پالت.

از نمونه ها برای ایجاد طرح های رنگی استفاده کنید

کلاس 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() فهرستی از تمام نمونه‌های تولید شده از یک تصویر، از جمله پروفایل‌های شش رنگ استاندارد را برمی‌گرداند.

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

کاتلین

// 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);
}

شکل 2. یک تصویر نمونه با نوار ابزار رنگارنگ و رنگ متن مربوط به عنوان.