İyi bir görsel tasarım, başarılı bir uygulama için olmazsa olmazdır ve renk şemaları tasarımın birincil bileşenidir. Palet kitaplığı, görsellerden belirgin renkleri çıkararak görsel açıdan ilgi çekici uygulamalar oluşturan bir Jetpack kitaplığıdır.
Düzen
temaları tasarlamak ve uygulamanızdaki görsel öğelere
özel renkler uygulamak için Palet kitaplığını kullanabilirsiniz. Örneğin, bir şarkı için albüm kapağına göre renk koordineli bir başlık kartı oluşturmak
veya bir uygulamanın arka plan resmi değiştiğinde araç çubuğu rengini ayarlamak için bir palet kullanabilirsiniz. Palette
nesnesi, Bitmap
resimdeki renklere erişmenizi sağlamanın yanı sıra
tasarım seçimlerinizi bildirmek için bit eşlemden
altı ana renk profili sağlar.
Kitaplığı kurun
Palet kitaplığını kullanmak için build.gradle
öğenize aşağıdakileri ekleyin:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Modern
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Palet oluşturun
Palette
nesnesi, bir resimdeki ana renklere ve yer paylaşımlı metin için karşılık gelen renklere erişmenizi sağlar. Belirli bir kaynak resme göre uygulamanızın stilini tasarlamak ve uygulamanızın renk şemasını dinamik olarak değiştirmek için paletleri kullanın.
Palet oluşturmak için önce Bitmap
öğesinden bir Palette.Builder
örneği oluşturun. Ardından, oluşturmadan önce paleti özelleştirmek için Palette.Builder
kullanabilirsiniz. Bu bölümde, bit eşlem resimden palet oluşturma
ve özelleştirme açıklanmaktadır.
Palet örneği oluşturma
İlk olarak Bitmap
öğesinden Palette.Builder
oluşturmak için bu öğenin from(Bitmap bitmap)
yöntemini kullanarak Palette
örneği oluşturun.
Oluşturucu, paleti eşzamanlı veya eşzamansız olarak oluşturabilir. Paleti çağrılan yöntemle aynı iş parçacığı üzerinde oluşturmak istiyorsanız eşzamanlı palet oluşturmayı kullanın. Paleti eşzamansız olarak başka bir iş parçacığında oluşturursanız palete oluşturulduktan hemen sonra erişmek için onGenerated()
yöntemini kullanın.
Aşağıdaki kod snippet'i, her iki palet oluşturma türü için örnek yöntemler sağlar:
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. } }); }
Resimlerin veya nesnelerin sıralı listesi için sürekli olarak paletler oluşturmanız gerekiyorsa kullanıcı arayüzü performansının yavaş olmasını önlemek için Palette
örneklerini önbelleğe almayı düşünün. Paletleri ana iş parçacığınızda oluşturmayın.
Paletinizi özelleştirin
Palette.Builder
, ortaya çıkan palette kaç renk olacağını, oluşturucunun paleti oluşturmak için resmin hangi alanını kullanacağını ve palete hangi renklerin dahil edileceğini seçerek paletinizi özelleştirmenize olanak tanır. Örneğin, siyah rengi filtreleyebilir veya oluşturucunun, paletinizi oluşturmak için yalnızca resmin üst yarısını kullanmasını sağlayabilirsiniz.
Palette.Builder
sınıfında yer alan aşağıdaki yöntemleri kullanarak paletinizin boyutunda ve renklerinde ince ayarlar yapın:
addFilter()
- Bu yöntem, üretilen palette hangi renklere izin verildiğini gösteren bir filtre ekler. Kendi
Palette.Filter
öğenizi geçirin ve Paletten hangi renklerin filtrelendiğini belirlemek içinisAllowed()
yöntemini değiştirin. maximumColorCount()
- Bu yöntem, paletinizdeki maksimum renk sayısını belirler. Varsayılan değer 16'dır ve optimum değer kaynak görüntüye bağlıdır. Manzaralar için optimum değerler 8-16 arasında değişirken yüz içeren resimler genellikle 24-32 arasındadır.
Palette.Builder
daha fazla renk içeren paletler oluşturmak için daha uzun sürer. setRegion()
- Bu yöntem, oluşturucunun paleti oluştururken bit eşlemin hangi alanını kullandığını gösterir. Bu yöntemi yalnızca bit eşlemden palet oluştururken kullanabilirsiniz ve bu yöntem orijinal resmi etkilemez.
addTarget()
- Bu yöntem, oluşturucuya bir
Target
renk profili ekleyerek kendi renk eşleştirmenizi yapmanızı sağlar. VarsayılanTarget
yeterli değilse ileri düzey geliştiricilerTarget.Builder
kullanarak kendiTarget
kodlarını oluşturabilirler.
Renk profillerini ayıklama
Palet kitaplığı, Malzeme Tasarımı standartlarına dayalı olarak, bir resimden yaygın olarak kullanılan renk profillerini çıkarır. Her profil bir Target
ile tanımlanır ve bit eşlem resminden çıkarılan renkler, doygunluk, parlaklık ve popülasyona (renkle temsil edilen bit eşlemdeki piksel sayısı) göre her bir profile göre puanlanır. Her profil için, en yüksek puanı alan renk, ilgili resmin renk profilini tanımlar.
Varsayılan olarak, bir Palette
nesnesi, belirli bir resimden 16 birincil renk içerir. Paletinizi oluştururken Palette.Builder
kullanarak renk sayısını özelleştirebilirsiniz. Daha fazla renk ayıklamak her bir renk profili için daha fazla potansiyel eşleşme sağlar ancak palet oluşturulurken Palette.Builder
ürününün daha uzun sürmesine de neden olur.
Palet kitaplığı aşağıdaki altı renk profilini çıkarmaya çalışır:
- Açık Renkli
- Canlı
- Koyu Canlı
- Hafif Kapatılmış
- Sesi kapatılır.
- Koyu Renk Kapatılmış
Palette
içindeki get<Profile>Color()
yöntemlerinin her biri, ilgili profille ilişkili paletteki rengi döndürür. Burada <Profile>
, altı renk profilinden birinin adıyla değiştirilir. Örneğin, Koyu Canlı renk profilini alma yöntemi getDarkVibrantColor()
şeklindedir.
Tüm resimler tüm renk profillerini içermediğinden, döndürülecek varsayılan bir renk sağlayın.
Şekil 1'de get<Profile>Color()
yöntemlerinden bir fotoğraf ve ilgili renk profilleri gösterilmektedir.
Renk şemaları oluşturmak için kartelaları kullanma
Palette
sınıfı ayrıca her bir renk profili için Palette.Swatch
nesne oluşturur. Palette.Swatch
nesneleri, söz konusu profil için ilişkili rengi ve renk popülasyonunu piksel cinsinden içerir.
Kartelalarda, renk profili hakkında daha fazla bilgiye (ör. HSL değerleri ve piksel popülasyonu) erişmek için ek yöntemler bulunur. getBodyTextColor()
ve getTitleTextColor()
yöntemlerini kullanarak daha kapsamlı renk şemaları ve uygulama temaları oluşturmaya yardımcı olması için kartelaları kullanabilirsiniz. Bu yöntemler, kartelanın rengi üzerinde kullanılmaya uygun renkleri döndürür.
Palette
içindeki her get<Profile>Swatch()
yöntemi, söz konusu profille ilişkili kartelayı döndürür. Burada <Profile>
, altı renk profilinden birinin adıyla değiştirilir. Paletin get<Profile>Swatch()
yöntemleri için varsayılan değer parametreleri gerekmese de söz konusu profil resimde yoksa null
değerini döndürür. Bu nedenle, kartelayı kullanmadan önce boş olup olmadığını kontrol edin. Örneğin, aşağıdaki kod, Canlı kartela boş değilse başlık metin rengini bir paletten alır:
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(); // ... }
Bir paletteki tüm renklere erişmek için getSwatches()
yöntemi, standart altı renk profili de dahil olmak üzere, bir resimden oluşturulan tüm kartelaların listesini döndürür.
Aşağıdaki kod snippet'i, eş zamanlı olarak bir palet oluşturmak, canlı kartelasını almak ve araç çubuğunun renklerini bit eşlem resmiyle eşleşecek şekilde değiştirmek için önceki kod snippet'lerinde bulunan yöntemleri kullanır. Şekil 2'de elde edilen resim ve araç çubuğu görüntülenmektedir.
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); }