Android进阶——自定义View之自己绘制彩虹圆环调色板

Android进阶——自定义View之自己绘

制彩虹圆环调色板

引言

前面几篇文章都是关于通过继承系统View和组合现有View来实现自定义View的，刚好由于项目需要实现一个滑动切换LED彩灯颜色的功能，所以需要一个类似调色板的功能，随着手在调色板有效区域滑动，LED彩灯随即显示相应的颜色，也可以通过左右的按钮，按顺序切换显示一组颜色，同时都随着亮度的改变LED彩灯的亮度随即变化，这篇基本上把继承View重绘实现自定义控件的大部分知识总结了下（当然还有蛮多没有涉及到，比如说自适应布局等），源码在Github上

一、继承View绘制自定义控件的通用步骤

自定义属性和继承View重写onDraw方法

实现构造方法，其中public RainbowPalette(Context context, AttributeSet attrs) 必须实现，否则无法通过xml引用，public RainbowPalette(Context context) ，public RainbowPalette(Context context, AttributeSet attrs, int defStyleAttr)可选，通常在构造方法中完成属性和其他成员变量的初始化

重写onMeasure方法，否则在xml中有些设置布局参数无效

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(width, height);//重新设置View的位置，若不重写的话，则不会布局，即使设置centerInParent为true也无效

//setMeasuredDimension(width,height);

}

手动调用invalidate或者postInvalidateon方法完成界面刷新

重写onTouchEvent方法实现基本的交互

定义回调接口供外部调用

二、彩虹圆环调色板设计思想

1、UI构成

首先从整个形状来看是个圆环，系统自有的控件明显没具有这个功能，只能是继承View重写OnDraw来完成绘制工作。前面Android入门——利用Canvas完成绘制点、圆、直线、路径、椭圆、多边形等2D图形可以知道通过Paint可以在Canvas绘制任何图形，包括圆环，于是整体的结构就出来了，中心实体小圆作为指示当前颜色的标记，外圈渐变色圆环作为调色板的取色区域（可以通过给Paint传入Shader shader = new SweepGradient(0, 0, gradientColors, null)来绘制渐变色），最外圈的光环可以绘制多个圆环，而作为指示器标记的小圆点（也可以传入图片资源）也是一个圆形，如此一来UI方面的结构基本明了。

2、交互设计

一般来说自定义View的人机交互都是通过回调的方式的来实现的。

滑动选择颜色：自定义控件的滑动自然是重写onTouchEvent,然后调用invalidate手动触发View重绘（即重新调用onDraw）

颜色指示器的显示的位置：手动触发invalidate重新调用onDraw绘制

中心圆形自动同步选中的颜色：手动触发invalidate重新调用onDraw绘制

仅在圆环处滑动选择颜色：如果面积小于外圆大于内圆的就认为是有效滑动

/**

* 是否是有效Touch即是否是按在圆环之上的

* @return

*/

private boolean isEfectiveTouch(float x, float y, float outRadius, float inRadius){ double outCircle = Math.PI * outRadius * outRadius;

double inCircle = Math.PI * inRadius * inRadius;

double fingerCircle = Math.PI * (x * x + y * y);

if(fingerCircle < outCircle && fingerCircle > inCircle) {

return true;

}else {

return false;

}

}

三、实现彩虹圆环调色板

1、自定义属性

attr.xml

2、重写View

import com.xiaoi.app.zkSmartHome.R;

/**

* auther: Crazy.Mo

* Date: 2016/12/13

* Time:10:27

* Des:自定义的调色板，可以绘制圆形指示器，也可以自定义图标指示器,但是指示器会超出边界

*/

public class RainbowPalette extends View {