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

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

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

יצירת מופע של פלטת צבעים

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

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

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

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

ספריית Palette מנסה לחלץ את ששת פרופילי הצבעים הבאים:

• מלא חיים בהיר
• מלא חיים
• כהה וססגוני
• השתק עדין
• הושתק
• כהה מושתק

כל אחת מ-get<Profile>Color() ה-methods ב- Palette מחזיר את הצבע של הלוח המשויך לזה פרופיל מסוים, שבו <Profile> מוחלף ב- השם של אחד מששת הפרופילים של צבעים. לדוגמה, השיטה לקבלת פרופיל הצבע 'כהה ועז' היא getDarkVibrantColor(). מכיוון שלא כל התמונות כוללות את כל הפרופילים של הצבעים, יש לספק צבע ברירת מחדל ל החזרה.

באיור 1 מוצגת תמונה ופרופי הצבעים התואמים שלה מהשיטות get<Profile>Color().

שימוש בדוגמיות כדי ליצור ערכות צבעים

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

לתבניות הצבע יש שיטות נוספות לגישה למידע נוסף על פרופיל הצבע, כמו ערכים של HSL ורישום פיקסלים. אפשר להשתמש בדוגמיות צבע כדי ליצור ערכות צבעים ועיצובים של אפליקציות מקיפים יותר באמצעות השיטות getBodyTextColor() ו-getTitleTextColor(). השיטות האלה מחזירות צבעים שמתאימים לשימוש מעל הצבע של תבנית הצבע.

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