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

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

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

تتيح لك 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 عند إنشاء لوحة الألوان.

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

• نابض بالحياة
• نابض
• نابض بالحياة
• تم كتم الصوت
• كتم الصوت
• تم كتم الصوت

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

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

استخدم العينات لإنشاء أنظمة ألوان

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

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

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

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