בחירת צבעים באמצעות Palette API

עיצוב חזותי טוב הוא חיוני לאפליקציה מוצלחת, וערכות צבעים הן רכיב מרכזי בעיצוב. ספריית Palette היא ספריית Jetpack שמנתחת צבעים בולטים מתמונות כדי ליצור אפליקציות מרתקות מבחינה ויזואלית.

תוכלו להשתמש בספריית הצבעים כדי לעצב עיצובי פריסה ולהחיל צבעים מותאמים אישית לרכיבים חזותיים באפליקציה. לדוגמה, תוכלו להשתמש בלוח צבעים כדי ליצור כרטיס כותרת תואם צבעים לשיר על סמך עטיפת האלבום, או כדי לשנות את הצבע בסרגל הכלים של אפליקציה כשתמונת הרקע שלו משתנה. האובייקט Palette מספק גישה לצבעים בתמונה Bitmap, וגם שישה פרופילי צבעים ראשיים מהביטמפט שיעזרו לכם לבצע בחירות עיצוב.

הגדרת הספרייה

כדי להשתמש בספריית הצבעים, צריך להוסיף את הקוד הבא ל-build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

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

Groovy

android {
    compileSdkVersion 33
    ...
}

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

יצירת לוח צבעים

אובייקט Palette מעניק גישה לצבעים הראשיים בתמונה, וגם לצבעים התואמים של הטקסט שמופיע שכבה-על. אפשר להשתמש בלוחות צבעים כדי לעצב את הסגנון של האפליקציה ולשנות באופן דינמי את ערכת הצבעים של האפליקציה על סמך תמונת מקור נתונה.

כדי ליצור צבעים, קודם צריך ליצור מופע של Palette.Builder מ-Bitmap. לאחר מכן אפשר להשתמש ב-Palette.Builder כדי להתאים אישית את הלוח לפני שיוצרים אותו. בקטע הזה מוסבר איך יוצרים צבעים בהתאמה אישית ומפיקים צבעים מתמונה בפורמט bitmap.

יצירת מופע של Palette

יוצרים מכונה של Palette באמצעות ה-method‏ from(Bitmap bitmap) כדי ליצור קודם Palette.Builder מ-Bitmap.

ה-builder יכול ליצור את הצבעים באופן סינכרוני או אסינכררוני. כדאי להשתמש ביצירת צבעים רציפה אם רוצים ליצור את הצבעים באותו חוט שבו נקראת השיטה. אם יוצרים את הצבעים באופן אסינכררוני, בשרשור אחר, צריך להשתמש ב-method‏ 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 כדי למנוע ביצועים איטיים של ממשק המשתמש. אל תיצרו את הפלטות בשרשור הראשי.

התאמה אישית של לוח הצבעים

בעזרת Palette.Builder תוכלו להתאים אישית את לוח הצבעים על ידי בחירה של מספר הצבעים בלוח הצבעים שייווצר, האזור בתמונה שבו ה-builder ישתמש כדי ליצור את לוח הצבעים ואילו צבעים ייכללו בלוח הצבעים. לדוגמה, אפשר לסנן את הצבע שחור או לוודא שהכלי ישתמש רק בחלק העליון של התמונה כדי ליצור את הצבעים בצבעים.

אפשר לכוונן את הגודל והצבעים של לוח הצבעים באמצעות השיטות הבאות מהמחלקה Palette.Builder:

addFilter()

השיטה הזו מוסיפה מסנן שמציין אילו צבעים מותרים בלוח הצבעים שנוצר. מעבירים את Palette.Filter שלכם ומשמנים את השיטה isAllowed() כדי לקבוע אילו צבעים יסוננו מהלוח.

maximumColorCount()

השיטה הזו מגדירה את מספר הצבעים המקסימלי בלוח הצבעים. ערך ברירת המחדל הוא 16, והערך האופטימלי תלוי בתמונה המקורית. בתמונות לאורך, הערכים האופטימליים נעים בין 8 ל-16, ובתמונות עם פנים הערכים בדרך כלל נעים בין 24 ל-32. יצירת לוחות צבעים עם יותר צבעים נמשכת יותר זמן ב-Palette.Builder.

setRegion()

השיטה הזו מציינת באיזה אזור של קובץ ה-bitmap ה-builder משתמש כשיוצר את הצבעים. אפשר להשתמש בשיטה הזו רק כשיוצרים את לוח הצבעים ממפת סיביות (bitmap), והיא לא משפיעה על התמונה המקורית.

addTarget()

השיטה הזו מאפשרת לבצע התאמת צבעים משלכם על ידי הוספת פרופיל צבע Target ל-builder. אם Target שמוגדרת כברירת מחדל לא מספיקה, מפתחים מתקדמים יכולים ליצור Target משלהם באמצעות Target.Builder.

חילוץ של פרופילי צבע

על סמך הסטנדרטים של Material Design, ספריית הצבעים מחלצת מהתמונה פרופילי צבעים נפוצים. כל פרופיל מוגדר על ידי 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(). השיטות האלה מחזירות צבעים שמתאימים לשימוש מעל הצבע של תבנית הצבע.

כל method של get<Profile>Swatch() מ-Palette מחזירה את הדוגמית שמשויכת לפרופיל הספציפי הזה. <Profile> מוחלף בשם של אחד מ-6 הפרופילים של הצבעים. למרות ששיטות get<Profile>Swatch() של הצבעים לא דורשות פרמטרים של ערכי ברירת מחדל, הן מחזירות את הערך null אם הפרופיל הספציפי לא קיים בתמונה. לכן, לפני שמשתמשים במדגם, צריך לוודא שהוא לא null. לדוגמה, הקוד הבא מקבל את צבע הטקסט של הכותרת מתוך צבעים, אם תבנית הצבעים של Vibrant לא ריקה:

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

כדי לגשת לכל הצבעים בלוח, ה-method‏ getSwatches() מחזיר רשימה של כל דוגמיות הצבע שנוצרו מהתמונה, כולל ששת פרופילי הצבעים הרגילים.

קטע הקוד הבא משתמש בשיטות מקטע הקוד הקודם כדי ליצור לוח צבעים באופן סינכרוני, לקבל את תבנית הצבעים הזוהרת שלו ולשנות את הצבעים בסרגל הכלים כך שיתאים לתמונה בפורמט bitmap. איור 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. תמונה לדוגמה עם סרגל הכלים בצבע עז וצבע הטקסט התואם של השם.