Android Support Palette使用詳解

來源:互聯網
上載者:User

標籤:解析   方式   必須   match   表示   void   存在   creat   標題   

 

 

使用Palette API選擇顏色

 

良好的視覺設計是app成功所必不可少的, 而色彩設計體系是設計的基礎構成. Palette包是支援包, 能夠從圖片中解析出突出的顏色, 從而協助你建立出視覺迷人的應用

你能夠使用Palette包設計布局主題, 並把自訂色彩應用到可視化元素中. 比如, 你可以根據專輯封面, 用Palette建立為歌曲建立一個彩色標題卡片, 或者當應用背景圖片發生改變時調整toolbar顏色. Palette對象給予你許可權訪問Bitmap圖片裡面的顏色, 同時也根據Bitmap提供了6個主要的顏色, 供你填寫設計選擇.

 

設定依賴

 

Palette為庫從版本Android Support Library 24.0.0引入, 可以在build.gradle中按照如下代碼添加Palette依賴:

1 android {2   compileSdkVersion 273   ...4 }5 6 dependencies {7   ...8   implementation ‘com.android.support:palette-v7:27.1.1‘9 }

 

建立Palette對象

 

Palette給予你許可權訪問圖片中的基本顏色, 以及重疊文本對應的顏色. 可以根據給定資源圖片, 使用palette設計應用風格, 動態改變應用的色彩體系.

要建立Palette, 首先在從Bitmap中執行個體化Palette.Builder. 然後在產生Palette之前, 可以使用Palette.Builder來自訂Palette.

 

產生Palette執行個體

 

首先, 利用Palette的from(Bitmap)方法從Bitmap中產生Palette.Builder. 之後利用這個Builder同步或者非同步地產生Palette. 如果你想在generate()方法被調用的線程中建立Palette對象, 使用同步的palette產生. 如果你想在不同的線程上非同步地產生Palette, 就要使用Palette.PaletteAsyncListener.onGenerated方法在Palette產生之後立即訪問它.
下面的代碼片斷展示了兩種不同的Palette產生方式:

 1 // Generate palette synchronously and return it 2 public Palette createPaletteSync(Bitmap bitmap) { 3   Palette p = Palette.from(bitmap).generate(); 4   return p; 5 } 6  7 // Generate palette asynchronously and use it on a different 8 // thread using onGenerated() 9 public void createPaletteAsync(Bitmap bitmap) {10   Palette.from(bitmap).generate(new PaletteAsyncListener() {11     public void onGenerated(Palette p) {12       // Use generated instance13     }14   });15 }


如果你需要持續為多個有序圖片產生多個Palette, 考慮將Palette執行個體緩衝起來, 以避免減緩UI效能. 你也不應該在主線程中建立Palette.

 

自訂Palette

 

Palette.Builder允許你自訂Palette, 通過從結果Palette中選擇多少種顏色, Builder使用圖片的什麼地區產生Palette, Palette中允許什麼顏色等. 比如, 你能夠過濾掉黑色, 或者, Builder只能夠使用圖片的上半部分產生Palette.

通過Palette.Builder中的下列方法, 可以微調Palette尺寸和顏色:

  • addFilter(): 該方法添加了過濾器, 用以表明結果Palette中什麼顏色是允許的. 傳入自己的Palette.Filter, 修改isAllowed()方法來決定Palette過濾哪些方法.
  • maximumColorCount(): 該方法設定了Palette中最大的顏色數目. 預設值是16, 最優值依賴於源圖. 對於風景圖, 最優值處於8~16, 而肖像圖通常擁有16~24個值. 顏色越多, Palette.Builder產生Palette就需要花費超久的時間.
  • setRegion(): 該方法指出了產生Palette時, Builder使用Bitmap的什麼地區. 你只能使用這個方法從Bitmap中產生Palette, 而不會影響源圖.
  • addTarget(): 該方法允許你通過向Builder添加Target色彩設定檔來執行自己的顏色匹配. 如果預設的Target並不有效話, 進階開發人員能夠使用Target.Builder建立自己的Target.

 

提取色彩設定檔

 

基於材料設計標準, Palette庫從圖片中提供常用的色彩設定檔. 每一個檔案被一個Target定義, 從Bitmap圖片中提取的色彩基於飽和度, 亮度和分布(Bitmap中表示色彩的像素數)對檔案進行評分. 對於每一個檔案, 具有最好分數的顏色定義了給定圖片的色彩設定檔.

預設情況下, 對於給定圖片, Palette對象包含16個基本顏色. 在產生Palette的時候, 你可以通過Palette.Builder自訂色彩數. 提取更多的色彩對於每個色彩設定檔提供了更多的潛在匹配, 但也引起Palette.Builder花費更久的時間來產生Palette.

Palette庫嘗試提取以下6個色彩設定檔:

  • Light Vibrant
  • Vibrant
  • Dark Vibrant
  • Light Muted
  • Muted
  • Dark Muted

每一個Palette.get<Profile>Color()方法返回了Palette中的顏色, 而每一個Palette關聯了一個特定的設定檔, 其中, <Profile>被以上6個色彩設定檔名取代. 比如, 擷取Dark Vibrant色彩設定檔的方法是getDarkVibrantProfile(). 因為不是所有的圖片都會包含所有的色彩設定檔, 所以, 你必須也提供一個預設顏色返回.

 

使用樣本建立色彩體系

 

Palette對象也為每一個色彩設定檔產生 Palette.Swatch對象. Palette.Swatch對象包含對象的設定檔關聯的顏色和顏色的像素分布.

Swatch擁有額外的方法來訪問色彩設定檔更多的資訊, 比如HSL值, 像素分布等. 你能夠通過使用getBodyTextColor()和getTitleTextColor()來產生更多繁雜的色彩體系和應用主題. 這些方法返回的顏色恰好配合Swatch的顏色使用.

每一個Palette.get<Profile>Swatch()方法返回了關聯特定設定檔的Swatch. 儘管get<Profile>Swatch()方法並不預設值參數, 如果圖片中並不存在特定的某個設定檔, 該方法會返回null. 由此, 你應該在使用Swatch之前判斷它是否為空白. 比如, 下面的代碼從Palette中擷取了標題文本顏色, 並檢查了Vibrant Swatch是否為空白:

1 Palette.Swatch vibrant = myPalette.getVibrantSwatch();2 if(vibrant != null){3     int titleColor = vibrant.getTitleTextColor();4     // ...5 }


要訪問Palette中的所有顏色, getSwatches()方法返回了包含圖片中產生的所有Swatch的列表, 包括標準的6個色彩設定檔.

下面的代碼片斷使用了上述代碼片斷, 同步產生了Palette, 擷取了Vibrant Swatch, 改變了Toolbar顏色, 以匹配Bitmap圖片. 下面的圖片則展示了結果和toolbar.

 

 1 // Set the background and text colors of a toolbar given a 2 // bitmap image to match 3 public void setToolbarColor(Bitmap bitmap) { 4     // Generate the palette and get the vibrant swatch 5     // See the createPaletteSync() method 6     // from the code snippet above 7     Palette p = createPaletteSync(bitmap); 8     Palette.Swatch vibrantSwatch = p.getVibrantSwatch(); 9 10     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);11 12     // Load default colors13     int backgroundColor = ContextCompat.getColor(getContext(),14         R.color.default_title_background);15     int textColor = ContextCompat.getColor(getContext(),16         R.color.default_title_color);17 18     // Check that the Vibrant swatch is available19     if(vibrantSwatch != null){20         backgroundColor = vibrantSwatch.getRgb();21         textColor = vibrantSwatch.getTitleTextColor();22     }23 24     // Set the toolbar background and text colors25     toolbar.setBackgroundColor(backgroundColor);26         toolbar.setTitleTextColor(textColor);27 }

 

Android Support Palette使用詳解

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.