Material Design全新設計系列之Pallette

RecycleView+Pallette

版權聲明：本文爲博主原創文章，轉載請註明出處

Palette介紹

A Color Pallette that includes all the colors respects Android
Material Design. Thanks “Marcel Ulbrich” for creating datas.

Palette英文名——調色板、顏料，Palette從圖像中提取突出的顏色，賦給App UI控件如ActionBar、Toolbar、或者其他，清新簡約的App很受人們追捧。

Palette用法彙總

從圖像中提取突出的顏色如下：

• Vibrant （有活力的）
• Vibrant dark（有活力的 暗色）
• Vibrant light（有活力的 亮色）
• Muted （柔和的）
• Muted dark（柔和的 暗色）
• Muted light（柔和的 亮色）

Palette有兩種初始化方法，同步和異步。各自都有兩個方法：

兩種同步方法：

// 最好在加載圖片線程中使用
// 默認調色板大小(16).
private static final int DEFAULT_CALCULATE_NUMBER_COLORS = 16;
Palette p = Palette.generate(bitmap);
//設置調色板大小numcolor
Palette p = Palette.generate(bitmap, numcolor);

兩種異步方法：

// 內部使用AsyncTask
// 但是可能不是最優的方法(因爲有線程的切換)
// 默認調色板大小(16).
Palette.generateAsync(bitmap, 
new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
        // palette進行對UI控件的賦值
    }
});
// 設置調色板大小
Palette.generateAsync(bitmap, 
numcolor, new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
        // palette爲生成的調色板
    }
});

通過Palette對象獲取到六個樣本
swatPalette.Swatch s = p.getVibrantSwatch(); //獲取到充滿活力的這種色調

Palette.Swatch s = p.getDarkVibrantSwatch(); //獲取充滿活力的黑
Palette.Swatch s = p.getLightVibrantSwatch(); //獲取充滿活力的亮
Palette.Swatch s = p.getMutedSwatch(); //獲取柔和的色調
Palette.Swatch s = p.getDarkMutedSwatch(); //獲取柔和的黑
Palette.Swatch s = p.getLightMutedSwatch(); //獲取柔和的亮

對象對應的顏色方法：

getPopulation(): 像素的數量
getHsl(): HSL顏色
getBodyTextColor(): 用於內容文本的顏色
getTitleTextColor(): 標題文本的顏色

-

效果圖以及核心代碼展示

一.AS開發——首先需要添加Palette的依賴：
在build.gralde的dependencies添加appcomat v7和palette-v7依賴，RecycleView展示瀑布流數據，所以相應的添加依賴

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:design:23.1.0'
compile 'com.android.support:appcompat-v7:21.0.+'
compile 'com.android.support:palette-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}

注意：如果是Eclipse開發，需要導入相應的jar包。

核心代碼如下：

   /**
     * 將數據與item視圖進行綁定
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(final MyRecycleViewAdapter.ViewHolder holder, int position) {
        //文本賦值
        holder.tv.setText("我是文本" + position);
        ImageLoader.getInstance().displayImage(s[position], holder.imageView, new ImageLoadingListener() {
            //加載開始
            @Override
            public void onLoadingStarted(String s, View view) {}

            //加載失敗
            @Override
            public void onLoadingFailed(String s, View view, FailReason failReason) {}

            //加載完成
            @Override
            public void onLoadingComplete(String s, View view, Bitmap bitmap) {

                holder.imageView.setImageBitmap(bitmap);
                if (bitmap != null) {
                    Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
                        @Override
                        public void onGenerated(Palette palette) {
                            //以獲取明亮的色調爲例
                            Palette.Swatch vibrant =
                                    palette.getVibrantSwatch();
                            if (vibrant != null) {
                                // If we have a vibrant color
                                // update the title TextView
                                holder.tv.setBackgroundColor(
                                        vibrant.getRgb());
                                holder.tv.setTextColor(
                                        vibrant.getTitleTextColor());
                            }

                        }
                    });
                }
            }

            @Override
            public void onLoadingCancelled(String s, View view) {}
        });


    }

源碼github :
https://github.com/CreateFutureW/PaletteRecycleView