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

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

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

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

כדי להשתמש בספריית 'פלטות', צריך להוסיף את הפריטים הבאים אל 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 באמצעות from(Bitmap bitmap) כדי ליצור קודם Palette.Builder Bitmap

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

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

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

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

addFilter()

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

maximumColorCount()

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

setRegion()

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

addTarget()

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

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

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

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

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

• מלא חיים בהיר
• מלא חיים
• כהה ועז
• השתקפות בהירה
• הושתק
• כהה מושתק

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

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

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

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

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

בכל get<Profile>Swatch() methods מ- הפקודה 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);
}