اختيار الألوان باستخدام Palette API

إنّ التصميم المرئي الجيد هو أمر أساسي لنجاح التطبيق، وأنظمة الألوان هي أحد المكونات الأساسية للتصميم. مكتبة Palette هي مكتبة في Jetpack تستخرج الألوان البارزة من الصور لإنشاء تطبيقات جذابة من الناحية المرئية.

يمكنك استخدام مكتبة لوحة الألوان لتصميم مظاهر تنسيق وتطبيق ألوان مخصّصة على العناصر المرئية في تطبيقك. على سبيل المثال، يمكنك استخدام لوحة ألوان لإنشاء بطاقة عنوان منسقة بالألوان لأغنية استنادًا إلى غلاف ألبومها أو لضبط لون شريط أدوات أحد التطبيقات عند تغيير صورة الخلفية. يتيح لك الكائن Palette الوصول إلى الألوان في صورة Bitmap مع توفير ستة ملفات شخصية رئيسية للألوان من الصورة النقطية لمساعدتك في خيارات التصميم.

إعداد المكتبة

لاستخدام مكتبة Palette، أضِف ما يلي إلى build.gradle:

Kotlin

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

يمكنك إنشاء مثيل Palette باستخدام الطريقة from(Bitmap bitmap) لإنشاء Palette.Builder أولاً من Bitmap.

يمكن لأداة الإنشاء إنشاء لوحة الألوان بشكل متزامن أو غير متزامن. استخدِم إنشاء لوحة الألوان المتزامنة إذا كنت تريد إنشاء لوحة الألوان في السلسلة المتزامنة نفسها التي يتم استدعاء الطريقة فيها. إذا أنشأت لوحة الألوان بشكل غير متزامن، في سلسلة محادثات مختلفة، استخدِم الأسلوب onGenerated() للوصول إلى لوحة الألوان مباشرةً بعد إنشائها.

يقدم مقتطف الرمز التالي أمثلة على الطرق لكلا النوعين من إنشاء لوحة الألوان:

Kotlin

// 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.
    }
}

Java

// 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 لمنع بطء أداء واجهة المستخدم. لا تنشئ paletts في سلسلة المحادثات الرئيسية.

تخصيص لوحة الألوان

يتيح لك Palette.Builder تخصيص لوحة الألوان من خلال اختيار عدد الألوان في لوحة الألوان الناتجة ومنطقة الصورة التي يستخدمها أداة الإنشاء لإنشاء لوحة الألوان والألوان المضمّنة في لوحة الألوان. على سبيل المثال، يمكنك تصفية اللون الأسود أو التأكد من أن أداة الإنشاء تستخدم فقط النصف العلوي من الصورة لإنشاء لوحتك.

يمكنك ضبط حجم لوحة الألوان وألوانها باستخدام الطرق التالية من فئة Palette.Builder:

addFilter()

تضيف هذه الطريقة فلترًا يشير إلى الألوان المسموح بها في اللوحة الناتجة. أدخِل Palette.Filter الخاص بك وعدِّل طريقة isAllowed() لتحديد الألوان التي يتم فلترتها من لوحة الألوان.

maximumColorCount()

تحدّد هذه الطريقة الحد الأقصى لعدد الألوان في لوحة الألوان. القيمة التلقائية هي 16، وتعتمد القيمة المثلى على الصورة المصدر. وتتراوح القيم المثلى بين 8 و16 درجة في المناظر الطبيعية، في حين تتراوح عادةً الصور التي تحتوي على أوجه بين 24 و32. يستغرق Palette.Builder وقتًا أطول ل إنشاء لوحات ألوان تحتوي على المزيد من الألوان.

setRegion()

تشير هذه الطريقة إلى منطقة الصورة النقطية التي يستخدمها أداة الإنشاء عند إنشاء لوحة الألوان. لا يمكنك استخدام هذه الطريقة إلا عند إنشاء لوحة الألوان من صورة نقطية، ولا تؤثّر هذه الطريقة في الصورة الأصلية.

addTarget()

تسمح لك هذه الطريقة بمطابقة الألوان بنفسك من خلال إضافة ملف شخصي للألوان Target إلى أداة التصميم. إذا لم تكن قيمة Target التلقائية كافية، يمكن للمطوّرين المتقدمين إنشاء Target الخاصة بهم باستخدام Target.Builder.

استخراج ملفات تعريف الألوان

استنادًا إلى معايير التصميم المتعدد الأبعاد، تستخرج مكتبة "باليت" ملفات الألوان الشخصية الشائعة الاستخدام من الصورة. يتم تعريف كل ملف تعريف من خلال Target، ويتم احتساب الدرجات للألوان المستخرَجة من صورة الصورة النقطية استنادًا إلى التشبّع والسطوع وعدد القيم (عدد وحدات البكسل في الصورة النقطية التي يمثّلها اللون). بالنسبة إلى كل ملف شخصي، يحدّد اللون الذي يحصل على أفضل نتيجة ملف ملف شخصي للّون المعنيّ للصورة المحدّدة.

يحتوي عنصر Palette تلقائيًا على 16 لونًا أساسيًا من صورة معيّنة. عند إنشاء لوحة الألوان، يمكنك تخصيص عدد الألوان باستخدام Palette.Builder. تؤدي عملية استخراج المزيد من الألوان إلى توفير المزيد من المطابقات المحتملة لكل ملف ألوان، ولكنّها تؤدي أيضًا إلى أن يستغرق Palette.Builder وقتًا أطول عند إنشاء لوحة الألوان.

تحاول مكتبة Palette استخراج الملفات الستة التالية لملفات تعريف الألوان:

• ألوان ساطعة
• نابض
• نابض بالحياة
• ضوء خافت
• كتم الصوت
• داكن مكتوم

تؤدي كل طريقة من طرق 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 إذا لم يكن هذا الملف الشخصي متوفّرًا في الصورة. لذلك، تحقق من أن العينة ليست فارغة قبل استخدامها. على سبيل المثال، يحصل الرمز التالي على لون نص العنوان من palettma إذا لم تكن عيّنة الألوان الحيوية فارغة:

Kotlin

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

Java

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

للوصول إلى جميع الألوان في لوحة ألوان، تعرض الطريقة getSwatches() قائمة بجميع عيّنات الألوان التي تم إنشاؤها من صورة، بما في ذلك ملفّات ألوان الستة النموذجية.

تستخدِم المقتطف التالي من الرمز البرمجي طُرقًا من مقتطفات الرمز البرمجي السابقة لإنشاء لوحة ألوان بشكل متزامن، والحصول على عيّنة ألوانها الحيوية، وتغيير ألوان شريط الأدوات لمطابقة صورة البِتّات. يعرض الشكل 2 الصورة الناتجة وشريط الأدوات.

Kotlin

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

Java

// 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. مثال صورة بشريط الأدوات الملوّن بألوان زاهية ولون نص العنوان المقابل