पैलेट एपीआई की मदद से रंग चुनें

ऐप्लिकेशन को सफल बनाने के लिए, अच्छा विज़ुअल डिज़ाइन होना ज़रूरी है. साथ ही, कलर स्कीम ऐसे ऐप्लिकेशन हैं मुख्य रूप से डिज़ाइन किया गया है. कॉन्टेंट बनाने 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 का इस्तेमाल इन कामों के लिए किया जा सकता है पैलेट को जनरेट करने से पहले उसे पसंद के मुताबिक बना सकते हैं. यह अनुभाग पैलेट का वर्णन करता है बिटमैप इमेज से जनरेट और कस्टमाइज़ेशन करते हैं.

पैलेट इंस्टेंस जनरेट करें

इसका इस्तेमाल करके 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 के बीच होती है. वहीं, चेहरों वाली तस्वीरें आम तौर पर 8 से 16 के बीच की होती हैं की वैल्यू 24 से 32 के बीच होनी चाहिए. Palette.Builder पूरी होने में ज़्यादा समय लगता है ज़्यादा रंगों वाले पैलेट जनरेट करते हैं.

setRegion()

यह तरीका बताता है कि बिल्डर, बिट मैप के किस हिस्से का इस्तेमाल करता है पैलेट बनाना. इस तरीके का इस्तेमाल सिर्फ़ पैलेट जनरेट करते समय किया जा सकता है लिया है और इसका मूल इमेज पर कोई असर नहीं पड़ता.

addTarget()

इस विधि से आप Target कलर प्रोफ़ाइल जोड़ी गई है. अगर डिफ़ॉल्ट Target यह है काफ़ी नहीं है, लेकिन बेहतर डेवलपर अपने खुद के Target बना सकते हैं इसका इस्तेमाल करके Target.Builder.

कलर प्रोफ़ाइलों को एक्सट्रैक्ट करें

इसके आधार पर मटीरियल के स्टैंडर्ड डिज़ाइन के लिए, पैलेट लाइब्रेरी से आम तौर पर इस्तेमाल की जाने वाली कलर प्रोफ़ाइलों को एक इमेज. हर प्रोफ़ाइल को Target से तय किया जाता है और रंग निकाला जाता है बिट मैप इमेज से ली गई है, जिसे संतृप्ति के आधार पर, हर प्रोफ़ाइल के लिए स्कोर किया जाता है, चमक, और जनसंख्या (बिटमैप में पिक्सेल की संख्या रंग). हर प्रोफ़ाइल के लिए, सबसे अच्छे स्कोर वाला रंग उस रंग को परिभाषित करता है दी गई इमेज के लिए प्रोफ़ाइल.

डिफ़ॉल्ट रूप से, Palette ऑब्जेक्ट में दी गई इमेज. पैलेट जनरेट करते समय, यह काम किया जा सकता है इसका उपयोग करके रंगों की संख्या कस्टमाइज़ करें Palette.Builder. ज़्यादा रंग निकालने से इसकी संभावना बढ़ जाती है हर रंग प्रोफ़ाइल से मेल खाता है, लेकिन इसकी वजह से Palette.Builder भी मिलता है पैलेट जनरेट करने में ज़्यादा समय लगता है.

पैलेट लाइब्रेरी, इन छह रंगों वाली प्रोफ़ाइलों को एक्सट्रैक्ट करने की कोशिश करती है:

• हल्का वाइब्रेंट
• वाइब्रेंट
• डार्क वाइब्रेंट
• लाइट म्यूट की गई
• म्यूट किया गया
• डार्क म्यूट किया गया

यहां दिए गए get<Profile>Color() तरीकों में से हर एक Palette इससे जुड़े पैलेट में रंग लौटाता है विशेष प्रोफ़ाइल, जहां <Profile> को इससे बदला जाता है छह कलर प्रोफ़ाइलों में से किसी एक प्रोफ़ाइल का नाम होता है. उदाहरण के लिए, गहरे वाइब्रेंट रंगों वाली प्रोफ़ाइल यह है getDarkVibrantColor(). चूंकि सभी छवियों में सभी रंग प्रोफ़ाइल नहीं होते हैं, इसलिए डिफ़ॉल्ट रूप से इसे वापसी.

आकृति 1 get<Profile>Color() तरीके.

कलर स्कीम बनाने के लिए स्वैच का इस्तेमाल करना

Palette क्लास भी जनरेट करती है Palette.Swatch ऑब्जेक्ट सबमिट करें. Palette.Swatch ऑब्जेक्ट में उस प्रोफ़ाइल से संबद्ध रंग और इसमें रंग की पॉप्युलेशन पिक्सल.

स्वैच में कलर प्रोफ़ाइल, जैसे कि एचएसएल वैल्यू और पिक्सल पॉप्युलेशन. स्वैच का इस्तेमाल इन कामों के लिए किया जा सकता है कलर स्कीम और ऐप्लिकेशन की थीम बनाने में मदद मिलती है. इसके लिए, 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);
}