ऐप्लिकेशन को सफल बनाने के लिए, अच्छा विज़ुअल डिज़ाइन होना ज़रूरी है. साथ ही, कलर स्कीम ऐसे ऐप्लिकेशन हैं मुख्य रूप से डिज़ाइन किया गया है. कॉन्टेंट बनाने Palette लाइब्रेरी एक Jetpack है लाइब्रेरी, जो दिखने में आकर्षक बनाने के लिए इमेज में से खास रंगों को निकालती है दिखाई देता है.
लेआउट डिज़ाइन करने के लिए, पैलेट लाइब्रेरी का इस्तेमाल किया जा सकता है
थीम और कस्टम रंग
विज़ुअल एलिमेंट शामिल हैं. उदाहरण के लिए, पैलेट का इस्तेमाल करके
किसी गाने के एल्बम कवर के आधार पर या
ऐप के टूलबार का रंग जब उसकी बैकग्राउंड इमेज बदलती है. कॉन्टेंट बनाने
Palette
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
ऑब्जेक्ट आपको इसमें मौजूद रंगों का ऐक्सेस देता है,
Bitmap
इमेज
साथ ही, बिटमैप से छह मुख्य कलर प्रोफ़ाइलें जोड़कर
डिज़ाइन के विकल्प.
लाइब्रेरी सेट अप करना
पैलेट लाइब्रेरी का इस्तेमाल करने के लिए, इन्हें अपने
build.gradle
:
Kotlin
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()
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
पैलेट बनाने के तुरंत बाद उसे ऐक्सेस करने का तरीका.
नीचे दिया गया कोड स्निपेट, दोनों तरह के पैलेट के लिए उदाहरण के तरीके देता है जनरेशन:
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
की मदद से,
इससे बनने वाले पैलेट में कितने रंग हैं, आपकी इमेज का कौनसा हिस्सा
बिल्डर, पैलेट जनरेट करने के लिए इसका इस्तेमाल करता है और यह बताता है कि इसमें कौनसे रंग शामिल हैं
पैलेट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, काला रंग फ़िल्टर किया जा सकता है या बिल्डर पक्का किया जा सकता है
यह पैलेट जनरेट करने के लिए, इमेज के सिर्फ़ ऊपरी आधे हिस्से का इस्तेमाल करता है.
अपने पैलेट के आकार और रंगों को नीचे दी गई विधियों से बेहतर बनाएं
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
इमेज में मौजूद नहीं है. इसलिए, जांच लें कि कोई स्वैच पहले शून्य नहीं है
उसका इस्तेमाल करना. उदाहरण के लिए, नीचे दिया गया कोड शीर्षक के टेक्स्ट का रंग,
वाइब्रेंट स्वैच शून्य नहीं होने पर पैलेट:
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(); // ... }
पैलेट में सभी रंगों को ऐक्सेस करने के लिए,
getSwatches()
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
यह तरीका किसी इमेज से जनरेट होने वाले सभी स्वैच की सूची दिखाता है. इसमें ये भी शामिल हैं
छह रंग प्रोफ़ाइल होनी चाहिए.
कोड का नीचे दिया गया स्निपेट पिछले कोड में बताए गए तरीकों का इस्तेमाल करता है स्निपेट सिंक्रोनस रूप से जनरेट करने, इसका शानदार स्वैच हासिल करने, और बदलाव करने के लिए बिट मैप इमेज से मिलान करने के लिए टूलबार के रंग. इमेज 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); }