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

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

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

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

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

يتيح لك 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 استخراج الملفات الستة التالية لملفات تعريف الألوان:

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

تُعرِض كل طريقة من طرق get<Profile>Color() في Palette اللون في لوحة الألوان المرتبطة بملف الضبط المعنيّ، حيث يتم استبدال <Profile> باسم أحد ملفات الضبط الستة للألوان. على سبيل المثال، طريقة الحصول على ملف ألوان Dark Vibrant هي getDarkVibrantColor(). بما أنّ بعض الصور لا تحتوي على جميع الملفات الشخصية للألوان، قدِّم لونًا تلقائيًا لمحاولة إظهاره.

يعرض الشكل 1 صورة وملفات ألوانها المقابلة من get<Profile>Color().

استخدام عيّنات الألوان لإنشاء تنسيقات ألوان

تنشئ فئة Palette أيضًا Palette.Swatch عناصر لكل ملف ألوان. تحتوي عناصر Palette.Swatch على اللون المرتبط بهذا الملفّ الشخصي بالإضافة إلى عدد مثيلات اللون في البكسلات.

تتضمّن عيّنات الألوان طُرقًا إضافية للوصول إلى مزيد من المعلومات عن ملف ألوان، مثل قيم HSL وعدد وحدات البكسل. يمكنك استخدام عيّنات الألوان للمساعدة في إنشاء أنظمة ألوان ومظاهر تطبيقات أكثر شمولاً باستخدام الطريقتَين getBodyTextColor() و getTitleTextColor(). تعرض هذه الطرق ألوانًا مناسبة للاستخدام على لون عيّنة اللون.

تُعرِض كل طريقة من طرق get<Profile>Swatch() من Palette عيّنة اللون المرتبطة بهذا الملف الشخصي المحدّد، حيث يتم استبدال <Profile> باسم أحد ملفات ألوان الستة. على الرغم من أنّ طُرق get<Profile>Swatch() للوحة الألوان لا تتطلّب مَعلمات قيمة تلقائية، فإنّها تعرض null إذا لم يكن هذا الملف الشخصي متوفّرًا في الصورة. لذلك، تأكَّد من أنّ عيّنة اللون ليست فارغة قبل استخدامها. على سبيل المثال، يحصل الرمز التالي على لون نص العنوان من palettma إذا لم تكن عيّنة الألوان الحيوية فارغة:

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