自定义控件实例(二) -- 颜色选择器

先看效果:
在这里插入图片描述

工程以及说明颜色选择器

再写这个控件之前,那叫一个纠结啊,如果都封装好,但是每个人需要都不一样,有些人可能只需要彩色条,有人可能只需要渐变的。所以干脆点,两个都写出来,自己去配置或者下载改成自己想要的。

一、渐变条

原理比较简单,其实就是使用着色器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 监听。具体的代码看工程吧。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页