Palette API ile renkleri seçme

Başarılı bir uygulama için iyi bir görsel tasarım şarttır ve renk şemaları, tasarımın birincil bileşenlerinden biridir. Palet kitaplığı, görsel açıdan ilgi çekici uygulamalar oluşturmak için resimlerden belirgin renkleri ayıklayan bir Jetpack kitaplığıdır.

Palet kitaplığını kullanarak düzen temaları tasarlayabilir ve uygulamanızdaki görsel öğelere özel renkler uygulayabilirsiniz. Örneğin, bir şarkının albüm kapağına göre renk koordineli başlık kartı oluşturmak veya arka plan resmi değiştiğinde uygulamanın araç çubuğu rengini ayarlamak için palet kullanabilirsiniz. Palette nesnesi, bir Bitmap resimdeki renklere erişim sağlarken, tasarım seçimlerinizi bilgilendirmek için bitmap'ten altı ana renk profili de sunar.

Kitaplığı ayarlama

Palet kitaplığını kullanmak için build.gradle dosyanıza aşağıdakileri ekleyin:

android {
    compileSdkVersion(33)
    ...
}

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

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

Palet oluşturma

Palette nesnesi, bir resimdeki birincil renklerin yanı sıra yer paylaşımlı metnin karşılık gelen renklerine erişmenizi sağlar. Uygulamanızın stilini tasarlamak ve belirli bir kaynak resme göre uygulamanızın renk şemasını dinamik olarak değiştirmek için paletleri kullanın.

Palet oluşturmak için önce Bitmap öğesinden Palette.Builder örneklendirin. Paleti oluşturmadan önce özelleştirmek için Palette.Builder kullanabilirsiniz. Bu bölümde, bir bit eşlem görüntüsünden palet oluşturma ve özelleştirme konuları açıklanmaktadır.

Palette örneği oluştur

Önce Bitmap öğesinden Palette.Builder oluşturmak için 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ığında oluşturmak istiyorsanız senkronize palet oluşturma özelliğini kullanın. Paleti eşzamansız olarak farklı 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'inde, her iki palet oluşturma türü için örnek yöntemler verilmiştir:

// 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 görüntü veya nesne listesi için sürekli olarak paletler oluşturmanız gerekiyorsa kullanıcı arayüzü performansının yavaş olmasını önlemek amacıyla Palette örneklerini önbelleğe almayı değerlendirin. Paletleri ana ileti dizisinde oluşturmayın.

Paletinizi özelleştirme

Palette.Builder, oluşturulan paletin kaç renk içereceğini, paleti oluşturmak için oluşturucunun resminizin 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 paletinizi oluşturmak için oluşturucunun yalnızca bir resmin üst yarısını kullanmasını sağlayabilirsiniz.

Palette.Builder sınıfındaki aşağıdaki yöntemlerle paletinizin boyutunu ve renklerini hassaslaştırın:

addFilter()

Bu yöntem, ortaya çıkan palette hangi renklere izin verildiğini belirten bir filtre ekler. Kendi Palette.Filter öğenizi iletin ve Paletten hangi renklerin filtreleneceğini belirlemek için isAllowed() 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. Manzara fotoğraflarında optimum değerler 8-16 arasındayken yüzlerin yer aldığı resimlerde genellikle 24-32 arasında değerler kullanılır. Palette.Builder'ün daha fazla renk içeren paletler oluşturması 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 bir bit eşlemden palet oluştururken kullanabilirsiniz. Palet, orijinal resmi etkilemez.

addTarget()

Bu yöntem, derleyiciye Target renk profili ekleyerek kendi renk eşleştirmenizi yapmanıza olanak tanır. Varsayılan Target yeterli değilse ileri seviye geliştiriciler Target.Builder kullanarak kendi Target'lerini oluşturabilir.

Renk profillerini al

Palet kitaplığı, Materyal Tasarımın standartlarına göre 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 (bit eşlemdeki renkle temsil edilen piksel sayısı) bağlı olarak her profile göre puanlanır. Her profil için en yüksek puana sahip renk, söz konusu resim için renk profilini tanımlar.

Varsayılan olarak bir Palette nesnesi, belirli bir resimden 16 birincil renk içerir. Paletinizi oluştururken Palette.Builder simgesini kullanarak renk sayısını özelleştirebilirsiniz. Daha fazla renk ayıklamak, her renk profili için daha fazla olası eşleşme sağlar ancak paleti oluştururken Palette.Builder süresinin uzamasına da neden olur.

Palet kitaplığı aşağıdaki altı renk profilini ayıklamaya çalışır:

• Işık Canlı
• Canlı
• Koyu Canlı
• Hafif Sessiz
• Sesi kapatılır.
• Koyu ve Tonu Azaltılmış

Palette içindeki get<Profile>Color() yöntemlerinin her biri, ilgili profille ilişkili paletteki rengi döndürür. Bu yöntemlerde <Profile>, altı renk profilinden birinin adıyla değiştirilir. Örneğin, Koyu Canlı renk profilini elde etme yöntemi getDarkVibrantColor()'tür. Tüm resimler tüm renk profillerini içermediğinden döndürülecek varsayılan bir renk sağlayın.

Şekil 1'de bir fotoğraf ve get<Profile>Color() yöntemlerine ait ilgili renk profilleri gösterilmektedir.

Renk şemaları oluşturmak için renk kartelalarını kullanma

Palette sınıfı, her bir renk profili için Palette.Swatch nesne de oluşturur. Palette.Swatch nesneleri, ilgili profilin rengini ve rengin piksel cinsinden nüfusunu içerir.

Paletlerde, renk profili hakkında daha fazla bilgiye (ör. HSL değerleri ve piksel sayısı) erişmek için ek yöntemler bulunur. getBodyTextColor() ve getTitleTextColor() yöntemlerini kullanarak daha kapsamlı renk şemaları ve uygulama temaları oluşturmak için paletleri kullanabilirsiniz. Bu yöntemler, kartela renginin üzerine uygulanması için uygun renkleri döndürür.

Palette içindeki her get<Profile>Swatch() yöntemi, söz konusu profille ilişkili paleti döndürür. Bu yöntemlerde <Profile>, altı renk profilinden birinin adıyla değiştirilir. Paletin get<Profile>Swatch() yöntemleri varsayılan değer parametreleri gerektirmese de söz konusu profil resimde yoksa null döndürürler. Bu nedenle, bir paleti kullanmadan önce paletin boş olup olmadığını kontrol edin. Örneğin, aşağıdaki kodda Canlı renk paleti boş değilse başlık metni rengini paletten alır:

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, 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, bir paleti senkronize olarak oluşturmak, canlı palet örneğini almak ve bir araç çubuğunun renklerini bitmap resmiyle eşleşecek şekilde değiştirmek için önceki kod snippet'lerindeki yöntemleri kullanır. Şekil 2'de, oluşturulan resim ve araç çubuğu gösterilmektedir.

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