自定義控件實例(二) -- 顏色選擇器

先看效果：

工程以及說明： 顏色選擇器

再寫這個控件之前，那叫一個糾結啊，如果都封裝好，但是每個人需要都不一樣，有些人可能只需要彩色條，有人可能只需要漸變的。所以乾脆點，兩個都寫出來，自己去配置或者下載改成自己想要的。

一、漸變條

原理比較簡單，其實就是使用着色器shader 中的 LinearGradient 即可，從下圖分析

左上角爲白色，底部爲黑色，而右上角爲配置的顏色，這裏是藍色。單獨使用一個 LinearGradient 肯定是實現不了的，但是可以使用兩個呀，然後用 ComposeShader 實現即可。
先實現白色過渡到黑色：

Shader shader2 = new LinearGradient(0,0,0,400,Color.WHITE,Color.BLACK, Shader.TileMode.CLAMP);
mPaint.setShader(shader1);
canvas.drawRect(0,0,400,400,mPaint);

同理，紅色就是從左到右：

 Shader shader1 = new LinearGradient(0,0,400,0,Color.WHITE,Color.RED, Shader.TileMode.CLAMP);
 mPaint.setShader(shader1);
 canvas.drawRect(0,0,400,400,mPaint);

把兩個結合起來：

 Shader shader1 = new LinearGradient(0,0,400,0,Color.WHITE,Color.RED, Shader.TileMode.CLAMP);
 Shader shader2 = new LinearGradient(0,0,0,400,Color.WHITE,Color.BLACK, Shader.TileMode.CLAMP);
  //使用混合模式,需要關閉硬件加速，如果不關，可以使用Canvas mcanvas = new Canvas(bitmap);用 mcanvas 去畫即可
 ComposeShader shader = new ComposeShader(shader1,shader2, PorterDuff.Mode.MULTIPLY);
 mPaint.setShader(shader);
 canvas.drawRect(0,0,400,400,mPaint);

在使用 ComposeShader 記得關閉硬件加速即可，或者用緩存畫布。然後小球的畫，監聽 ontouch 事件，畫小球即可。

二、畫彩色條

彩色條怎麼畫呢？你可能會想，還是 LinearGradient 啊，但是顏色怎麼辦呢？總不能一個個寫吧？但LinearGradient 還是個方法：

    public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],
            @Nullable float positions[], @NonNull TileMode tile)

那隻需要顏色通過數組放進來即可了。這個就好辦了，我們可以使用 HSV ，只需要讓它填充該矩形可了。

        int[] hugcolors = new int[361];
        int count = 0;
        for (int i = hugcolors.length - 1; i >= 0; i--, count++) {
            hugcolors[count] = Color.HSVToColor(new float[]{i, 1f, 1f});
        }
        LinearGradient shader = new LinearGradient(0,0,200,0,hugcolors, null, Shader.TileMode.CLAMP);
        mPaint.setShader(shader);
        canvas.drawRect(0,0,200,30,mPaint);

看，其實很簡單，可以改成自己喜歡的形狀。接着就是添加三角形或者矩形了，還是 ontouch 監聽。具體的代碼看工程吧。