Android进阶——自定义View之自己绘制彩虹圆环调色板.doc
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