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

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

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

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

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

android {
    compileSdkVersion(36)
    ...
}

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

android {
    compileSdkVersion 36
    ...
}

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

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

addTarget()

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

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

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

כדי לגשת לכל הצבעים בלוח, ה-method‏ 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);
}