Palette API ile renkleri seçme

İ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:

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

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:

// 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.
    }
  });
}

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. ve isAllowed() 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ılan Target ise yetersiz, ileri düzey geliştiriciler kendi Target 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, şuradan 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ürmesine yardımcı olur.

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.

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 yardımcı olabilir. Örneğin, aşağıdaki kod, başlık metin rengini bir Canlı kartela null değilse palet:

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();
    // ...
}

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.

// 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);
}