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

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

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

引言

前面几篇文章都是有关通过继承系统View和组合现有View来实现自定义View的

，刚好由于项目需要实现一种滑动切换LED彩灯颜色的功效，因此需要一种类似调色板的功效，随着手在调色板有效区域滑动，LED彩灯随即显示对应的颜色，也能够通过左右的按钮，按次序切换显示一组颜色，同时都随着亮度的变化LED彩灯的亮度随即变化，这篇基本上把继承View重绘实现自定义控件的大部分知识总结了下(固然尚有蛮多没有涉及到，例如说自适应布局等)，源码在Github上

一、继承View绘制自定义控件的通用环节自定义属性和继承View重写onDraw办法

实现构造办法，其中publicRainbowPalette(Contextcontext,AttributeSetattrs)必须实现，否则无法通过xml引用，publicRainbowPalette(Contextcontext)，publicRainbowPalette(Context

context,AttributeSetattrs,int

defStyleAttr)可选，普通在构造办法中完毕属性和其它组员变量的初始化重写onMeasure办法，否则在xml中有些设立布局参数无效

@Override

protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){

super.onMeasure(width,

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

//setMeasuredDimension(width,height);

}

手动调用invalidate或者postInvalidateon办法完毕界面刷新重写onTouchEvent办法实现基本的交互

定义回调接口供外部调用

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

1、UI构成

首先从整个形状来看是个圆环，系统自有的控件明显没含有这个功效，只能是继承View重

写OnDraw来完毕绘制工作。前面Android入门——运用Canvas完毕绘制点、圆、直线、

途径、椭圆、多边形等2D图形能够懂得通过Paint能够在Canvas绘制任何图形

，涉及圆环，

于是整体的构造就出来了，中心实体小圆作为批示目前颜色的标记，外圈渐变色圆环作为调

色板的取色区域(能够通过给Paint传入Shadershader=newSweepGradient(0,0,gradientColors,

null)来绘制渐变色)，最外圈的光环能够绘制多个圆环，而作为批示器标记的

小圆点(也能够传入图片资源)也是一种圆形，如此一来UI方面的构造基本明了

o

2、交互设计

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

滑动选择颜色:自定义控件的滑动自然是重写onTouchEvent,然后调用invalidate手动触发

View重绘(即重新调用onDraw)

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

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

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

/**

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

@return

*/

privatebooleanisEfectiveTouch(floatx,floaty,floatoutRadius,floatinRadius){

doubleoutCircle=Math.PI*outRadius*outRadius;doubleinCircle=Math.PI*inRadius*inRadius;doublefingerCircle=Math.PI*(x*x+y*y);

if(fingerCircleoutCirclefingerCircleinCircle){

returntrue;

}else{returnfalse;

}

}

三、实现彩虹圆环调色板

1、自定义属性attr.xml

declare-styleablename=rainbow_palette

attrname=palette_colorformat=color/

!--可滑动小球的颜色--

attrname=indicator_colorformat=color/

!--中间批示目前选中颜色