İ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. İlgili içeriği oluşturmak için kullanılan Palet kitaplığı bir Jetpack'tir görsel olarak ilgi çekici öğeler oluşturmak için resimlerden göze çarpan renkleri çıkaran kitaplık
Düzen tasarlamak için Palet kitaplığını kullanabilirsiniz
temaları kullanabilir ve temaya özel renkler uygulayabilirsiniz.
görsel öğelere yer verin. Örneğin, bir palet kullanarak
bir şarkının renk koordinasyonunu başlık kartı.
arka plan resmi değiştiğinde uygulamanın araç çubuğu rengi. İlgili içeriği oluşturmak için kullanılan
Palette
.
nesnel e-postadaki renklere
Bitmap
resim
bit eşlemden altı ana renk profili sağlayarak
tasarım tercihleri.
Kitaplığı ayarlama
Palet kitaplığını kullanmak için aşağıdaki öğeleri
build.gradle
:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Eski
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Palet oluştur
Palette
nesnesi,
ve yer paylaşımlı metin için karşılık gelen renkleri
değiştirmeniz gerekir. Paletleri kullanarak
ve uygulamanızın renk şemasını buna göre dinamik olarak değiştirecek
temel alınan bir öğedir.
Palet oluşturmak için önce
Palette.Builder
.
Bitmap
başlangıç noktasından. Ardından, Palette.Builder
öğesini kullanarak
paleti oluşturmadan önce özelleştirebilirsiniz. Bu bölümde palet açıklanmaktadır
oluşturma ve özelleştirme süreçlerine olanak tanır.
Palette örneği oluştur
Şunları kullanarak bir Palette
örneği oluşturun:
from(Bitmap bitmap)
ilk olarak bir sunucudan Palette.Builder
oluşturmak için
Bitmap
.
Oluşturucu, paleti eşzamanlı veya eşzamansız olarak oluşturabilir. Tekliflerinizi otomatikleştirmek ve optimize etmek için
eşzamanlı palet oluşturma aracını istiyorsanız paleti aynı
iş parçacığının çağrılması gereken yöntem olarak kullanılır. Paleti eşzamansız olarak oluşturursanız
başka bir ileti dizisinde
onGenerated()
.
yöntemini kullanarak palete oluşturulduktan hemen sonra erişebilirsiniz.
Aşağıdaki kod snippet'i, her iki palet türü için de örnek yöntemler sağlar. nesil:
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. } }); }
Sıralanmış bir resim veya resim listesi listesi için sürekli olarak paletler oluşturmanız gerekiyorsa
göz önünde bulundurursanız
önbelleğe alma
Kullanıcı arayüzü performansının yavaş olmasını önlemek için Palette
örnekleri. Lütfen
paletlerinizi
ana ileti dizisine sahip olmalıdır.
Paletinizi özelleştirin
Palette.Builder
, paletinizi aşağıdakileri seçerek özelleştirmenizi sağlar:
oluşturulan palette kaç renk olduğunu, resminizin hangi alanında
oluşturucunun paleti oluşturmak için kullandığını ve
paletini bulmanız gerekir. Örneğin, siyah rengi filtreleyebilir veya
paletinizi oluşturmak için yalnızca resmin üst yarısını kullanır.
Palette.Builder
sınıf:
addFilter()
- Bu yöntem,
oluşturuyoruz. Kendiniz geçin
Palette.Filter
. veisAllowed()
yöntemini değiştirerek hangi renklerin Paletten filtrelendi. maximumColorCount()
- Bu yöntem, paletinizdeki maksimum renk sayısını ayarlar. Varsayılan
değer 16'dır ve optimum değer, kaynak resme bağlıdır. Örneğin,
için optimum değerler 8-16 arasında değişirken, yüz içeren resimler genellikle
değerleri 24 ile 32 arasında olmalıdır.
Palette.Builder
daha uzun sürer daha fazla renkte paletler oluşturabilir. setRegion()
- Bu yöntem, oluşturucunun paleti oluşturuyoruz. Bu yöntemi yalnızca paleti oluştururken kullanabilirsiniz orijinal resmi etkilemez.
addTarget()
- Bu yöntem, tablodaki bir
Target
renk profilini tasarlıyoruz. VarsayılanTarget
ise yetersiz, ileri düzey geliştiriciler kendiTarget
araçlarını oluşturabilirler profesyonel ve rahatlatıcıTarget.Builder
.
Renk profillerini al
Referans olarak
Malzeme standartları
Tasarım, Palet kitaplığı yaygın olarak kullanılan renk profillerini
görüntüsüdür. Her profil bir Target
ile tanımlanır ve renkler ayıklanır
doygunluğa göre her bir profile göre puanlanır.
parlaklık ve popülasyon (bit eşlemdeki piksellerin sayısını temsil eden
rengi). Her profil için, en iyi puana sahip renk o rengi tanımlar
profiline gidin.
Varsayılan olarak, bir Palette
nesnesi şundan 16 birincil renk içerir:
anlamına gelir. Paletinizi oluştururken
renk sayısını özelleştirmek için
Palette.Builder
. Daha fazla renk ayıklamak, daha fazla potansiyel
her renk profili için eşleşir, ancak aynı zamanda Palette.Builder
daha uzun sürmesini
bekliyordur.
Palet kitaplığı aşağıdaki altı renk profilini çıkarmaya çalışır:
- Açık Canlı
- Canlı
- Koyu Canlı
- Işık Geçirmez
- Sesi kapatılır.
- Koyu Renk Kapatılmış
Şuradaki get<Profile>Color()
yöntemin her biri:
Palette
, bu değerle ilişkili Paletteki rengi döndürür
<Profile>
yerine
ve altı renk profilinden birinin adını girin. Örneğin, dönüşüm hunisinin
Koyu Canlı renk profili:
getDarkVibrantColor()
Tüm resimler tüm renk profillerini içermediğinden,
dön.
Şekil 1'de bir fotoğraf ve bu fotoğrafa ait renk profillerine
get<Profile>Color()
yöntem.
![Solda gün batımı, sağında ise ayıklanmış renk paleti gösterilen resim.](https://developer.android.com/static/training/material/images/palette-library-color-profiles_2-1_2x.png?authuser=9&hl=tr)
Renk şemaları oluşturmak için kartelaları kullanma
Palette
sınıfı ayrıca şunları da oluşturur:
Palette.Swatch
nesneleri seçin. Palette.Swatch
nesne şunu içeriyor:
renk popülasyonunun yanı sıra profilin renk popülasyonunun
piksel.
Kartelalar, öğeyle ilgili daha fazla bilgiye erişmek için ek yöntemler sunar.
renk profili için de geçerlidir. Kartelaları kullanarak şunları yapabilirsiniz:
daha kapsamlı renk şemaları ve uygulama temaları oluşturmaya yardımcı olmak için
getBodyTextColor()
.
ve
getTitleTextColor()
yöntemlerine göz atın. Bu yöntemler, paletin şuna göre kullanıma uygun renkleri döndürür:
rengi.
Şuradaki her get<Profile>Swatch()
yöntem:
Palette
, söz konusu profille ilişkilendirilen kartelayı döndürür.
Burada <Profile>
,
seçtik. Paletin
get<Profile>Swatch()
yöntem için varsayılan yöntem gerekmiyor
değerine ayarlanırsa null
yoksa daha sonra tekrar deneyin. Bu nedenle, kartelada örnek değerinin boş olmadığından
anlamaktır. Örneğin, aşağıdaki kod, başlık metin rengini bir
Canlı kartela null değilse palet:
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, şunlar da dahil olmak üzere bir resimden oluşturulan tüm kartelaların bir listesini döndürür:
standart altı renk profili var.
Aşağıdaki kod snippet'i, önceki kodda bulunan yöntemleri kullanır eşzamanlı olarak bir palet oluşturmak, canlı renk paletini almak ve bit eşlem resmiyle eşleştirmek için bir araç çubuğunun renklerini değiştirin. Şekil 2'de oluşturulan resim ve araç çubuğu.
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); }
![Gün batımını gösteren resim ve içinde TitleTextColor bulunan bir araç çubuğu](https://developer.android.com/static/training/material/images/palette-library-title-text-color_2-1_2x.png?authuser=9&hl=tr)