身為android開發者，ImageView那一定是玩的滾瓜爛熟，現在如今Material Design設計也越來越流行，給ImageView實現陰影也不是什麼難事，用CardView包裹一下，就能實現了，但是陰影都是一種顏色，實在太單調了╮(╯▽╰)╭，我就在想ImageView陰影能不能設定成圖片自身的顏色呢?,答案當然是可以的，基於這個思路就有了PaletteImageView這個控制元件，PaletteImageView不僅僅可以將陰影設定成圖片自身顏色，還可以解析圖片的顏色，提供可以跟圖片匹配的UI顏色方案，是不是很酷，接下來讓我們一步步來實現它。
先看一下效果圖：
　　　　　　　　　　　　　　　　　　

要實現的功能:

• 預設情況下為圖片新增相應顏色的陰影
• 可以自定義陰影的顏色
• 可以為圖片新增圓角
• 可以設定陰影半徑大小，提供可以調控的使用者體驗
• 可以自定義設定陰影分別在x和y方向上的偏移量，更高的可控性
• 根據圖片自身的顏色提供與圖片匹配的顏色方案（智慧推薦顏色功能）

難點就是怎麼才能獲取到圖片本身的顏色呢？，這就要用到Palette這個類了，Palette就是調色盤的意思，不瞭解的可以參考這篇文章Palette使用詳解。
我們先來實現給圖片新增相應顏色的陰影，下面只貼出關鍵程式碼，要閱讀完整程式碼請移步github ，主要思路是解析獲取到的bitmap的顏色，當解析出bitmap顏色的時候，使用handler來通知控制元件來繪製帶有顏色的陰影

在onSizeChanged(…)中能夠獲取到控制元件寬高的時候，對圖片先進行壓縮處理 ，為了防止記憶體溢位情況的發生，然後就是獲取圖片顏色得操作

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        zipBitmap(mImgId, mBitmap, mOnMeasureHeightMode);//先壓縮圖片，再去解析圖片bitmap中的顏色
        mRectFShadow = new
 
 RectF(mPadding, mPadding, getWidth() - mPadding, getHeight() - mPadding);//陰影的載體
        ...
    }

壓縮圖片

  private void zipBitmap(int imgId, Bitmap bitmap, int heightNode) {
        WeakReference<Matrix> weakMatrix = new WeakReference<Matrix>(new Matrix());
        if (weakMatrix.get() == null) return;
        Matrix matrix = weakMatrix.get();
        int reqWidth = getWidth() - mPadding - mPadding;
        int reqHeight = getHeight() - mPadding - mPadding;
        if (reqHeight <= 0 || reqWidth <= 0) return;
        int rawWidth = 0;
        int rawHeight = 0;
        if (imgId != 0 && bitmap == null) {
            WeakReference<BitmapFactory.Options> weakOptions = new WeakReference<BitmapFactory.Options>(new BitmapFactory.Options());
            if (weakOptions.get() == null) return;
            BitmapFactory.Options options = weakOptions.get();
            BitmapFactory.decodeResource(getResources(), imgId, options);
            options.inJustDecodeBounds = true;
            rawWidth = options.outWidth;
            rawHeight = options.outHeight;
            options.inSampleSize = calculateInSampleSize(rawWidth, rawHeight, getWidth() - mPadding * 2, getHeight() - mPadding * 2);
            options.inJustDecodeBounds = false;
            bitmap = BitmapFactory.decodeResource(getResources(), mImgId, options);
        } else if (imgId == 0 && bitmap != null) {
            rawWidth = bitmap.getWidth();
            rawHeight = bitmap.getHeight();
            float scale = rawHeight * 1.0f / rawWidth;
            mRealBitmap = Bitmap.createScaledBitmap(bitmap, reqWidth, (int) (reqWidth * scale), true);
            initShadow(mRealBitmap);
            return;
        }
        if (heightNode == 0) {
            float scale = rawHeight * 1.0f / rawWidth;
            mRealBitmap = Bitmap.createScaledBitmap(bitmap, reqWidth, (int) (reqWidth * scale), true);
        } else {
            int dx = 0;
            int dy = 0;
            int small = Math.min(rawHeight, rawWidth);
            int big = Math.max(reqWidth, reqHeight);
            float scale = big * 1.0f / small;
            matrix.setScale(scale, scale);
            if (rawHeight > rawWidth) {
                dy = (rawHeight - rawWidth) / 2;
            } else if (rawHeight < rawWidth) {
                dx = (rawWidth - rawHeight) / 2;
            }
            mRealBitmap = Bitmap.createBitmap(bitmap, dx, dy, small, small, matrix, true);
        }
        initShadow(mRealBitmap);//解析圖片顏色，關鍵
    }

解析圖片的關鍵程式碼

  private void initShadow(Bitmap bitmap) {
        if (bitmap != null) {
            mAsyncTask = Palette.from(bitmap).generate(paletteAsyncListener);//非同步解析圖片的顏色
        }
    }

      //非同步執行緒中解析圖片顏色的監聽器
       private Palette.PaletteAsyncListener paletteAsyncListener = new Palette.PaletteAsyncListener() {
           @Override
           public void onGenerated(Palette palette) {
               if (palette != null) {
                   ...
                   mMainColor = palette.getDominantSwatch().getRgb();//獲取圖片的主色，也就是預設的陰影顏色
                   mHandler.sendEmptyMessage(MSG);//解析到圖片的顏色，此時傳送重繪的訊息
                   ...
               }
           }
       };

      //處理髮送的訊息
      private Handler mHandler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                //陰影半徑大小以及x、y方向上陰影偏移量的限制
                if (mOffsetX < DEFAULT_OFFSET) mOffsetX = DEFAULT_OFFSET;
                if (mOffsetY < DEFAULT_OFFSET) mOffsetY = DEFAULT_OFFSET;
                if (mShadowRadius < DEFAULT_SHADOW_RADIUS) mShadowRadius = DEFAULT_SHADOW_RADIUS;
                //設定畫筆陰影的顏色，也就是圖片陰影的顏色了
                mPaintShadow.setShadowLayer(mShadowRadius, mOffsetX, mOffsetY, mMainColor);
                invalidate();//重新繪製控制元件
            }
        };

繪製陰影

 @Override
    protected void onDraw(Canvas canvas) {
        if (mRealBitmap != null) {
            canvas.drawRoundRect(mRectFShadow, mRadius, mRadius, mPaintShadow);//繪製帶有顏色的陰影
            ...
            if (mMainColor != -1) mAsyncTask.cancel(true);//取消解析圖片顏色的非同步任務
        }
    }

經過上面就可以繪製出帶有顏色的陰影，要自定義陰影顏色的話，使用這句程式碼

   public void setShadowColor(int color){
        this.mMainColor = color;
        mHandler.sendEmptyMessage(MSG);//修改了陰影顏色，傳送重新繪製的訊息
    }

接下來我們給圖片設定圓角，在onSizeChange(…)獲取到寬高以及bitmap的同時，我們就建立好了帶有圓角的mRoundBitmap,繪製過陰影后，就繪製可以帶有圓角的圖片

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        ...
        mRoundRectF = new RectF(0, 0, getWidth() - mPadding * 2, getHeight() - mPadding * 2);
        mRoundBitmap = createRoundConerImage(mRealBitmap,mRadius);//建立帶有圓角的bitmap圖片

    }

//建立帶有圓角的bitmap圖片
 private Bitmap createRoundConerImage(Bitmap source, int radius) {
        Bitmap target = Bitmap.createBitmap(getWidth() - mPadding * 2, getHeight() - mPadding * 2, Bitmap.Config.ARGB_4444);
        Canvas canvas = new Canvas(target);
        canvas.drawRoundRect(mRoundRectF, radius, radius, mPaint);
        mPaint.setXfermode(mPorterDuffXfermode);
        canvas.drawBitmap(source, 0, 0, mPaint);
        mPaint.setXfermode(null);
        return target;
    }

 @Override
    protected void onDraw(Canvas canvas) {
        if (mRealBitmap != null) {
            ...
            canvas.drawBitmap(mRoundBitmap, mPadding, mPadding, null);//繪製帶有圓角的bitmap
            if (mMainColor != -1) mAsyncTask.cancel(true);
        }
    }

修改圓角半徑的效果圖

經過以上帶有多彩顏色陰影的圖片已經出籠了，現在我們要可以修改陰影半徑的大小，修改陰影半徑大小的方式有兩種，一種是在xml中定義，另一種是在程式碼中設定

//xml中新增屬性：
app:paletteShadowRadius 表示陰影半徑

//程式碼中設定陰影半徑大小的原始碼
public void setPaletteShadowRadius(int radius) {
        this.mShadowRadius = radius;//修改陰影半徑大小
        mHandler.sendEmptyMessage(MSG);//傳送訊息，陰影半徑修改了，傳送重繪訊息
    }

修改陰影半徑的效果圖

修改陰影在x y方向的偏移量的原理跟上面一樣，修改引數再發送訊息重繪

 public void setPaletteShadowOffset(int offsetX, int offsetY) {
        if (offsetX >= mPadding) {
            this.mOffsetX = mPadding;
        } else {
            this.mOffsetX = offsetX;
        }
        if (offsetY > mPadding) {
            this.mOffsetX = mPadding;
        } else {
            this.mOffsetY = offsetY;
        }

        mHandler.sendEmptyMessage(MSG);//陰影在x y方向的偏移量改變了，此時傳送訊息進行重繪。
    }

修改陰影在x y方向的偏移量的效果圖

現在終於說到智慧配色的地方了，看過Palette使用詳解這篇文章的都知道獲取到顏色方案的過程了，不瞭解的可以先去看看，沒有太神祕的東西O(∩_∩)O哈哈~，下面講一下實現過程:

首先定義一個監聽器，用來監聽圖片顏色的解析過程，解析完成我們返回看控制元件本身的引用，我們可以獲取六種不同顏色主題，每種主題顏色都有與之匹配的標題顏色、正文顏色、背景色。怎麼獲取到這些顏色呢，實現是將每種主題的是三種子顏色放入一個數組中儲存，只要拿到相應的陣列就可以獲取到想要的顏色了。

 public interface OnParseColorListener {
        void onComplete(PaletteImageView paletteImageView);
        void onFail();
    }
//非同步執行緒中解析圖片顏色的監聽器
private Palette.PaletteAsyncListener paletteAsyncListener = new Palette.PaletteAsyncListener() {
         @Override
         public void onGenerated(Palette palette) {
             if (palette != null) {
                 mPalette = palette;
                 mMainColor = palette.getDominantSwatch().getRgb();
                 mHandler.sendEmptyMessage(MSG);
                 if (mListener != null) mListener.onComplete(mInstance);//解析顏色完成
             } else {
                 if (mListener != null) mListener.onFail();//解析顏色失敗
             }
           }
    };

//獲取Vibrant主題的顏色，
public int[] getVibrantColor() {
      if (mPalette == null || mPalette.getVibrantSwatch() == null) return null;
        int[] arry = new int[3];
        arry[0] = mPalette.getVibrantSwatch().getTitleTextColor();
        arry[1] = mPalette.getVibrantSwatch().getBodyTextColor();
        arry[2] = mPalette.getVibrantSwatch().getRgb();
        return arry;
    }

智慧配色效果圖

大功告成，可以愉快的玩耍啦。PaletteImageView的具體使用方法，請移步github