android-circlebutton介绍原理-CSDN博客

android-circlebutton 是github上的一个开源项目，正如它的简介一样：Circle button widget for Android，就是一个圆形的button。它与一般圆形的button不同之处在于它是画出来的，属于自定义UI的范畴，因此我拿来介绍一下，而们平常一般使用的button可能是来自于美工的图片。它的好处是节省了资源空间，当然缺点也很明显开发人员也要参与界面设计这块了。其实这样也不能说不好，反过来想减少了对美工的依赖，而且也比较适合开发人员自己去实现一些扁平化的东西，因为它很简洁。

首先看代码，

[html]view plaincopy 
     
 packagecom.example.circlebutton; 
  
 importandroid.animation.ObjectAnimator; 
 importandroid.content.Context; 
 importandroid.content.res.TypedArray; 
 importandroid.graphics.Canvas; 
 importandroid.graphics.Color; 
 importandroid.graphics.Paint; 
 importandroid.util.AttributeSet; 
 importandroid.util.TypedValue; 
 importandroid.widget.ImageView; 
  
 publicclassCircleButtonextendsImageView{ 
  
 privatestaticfinalintPRESSED_COLOR_LIGHTUP=255/25; 
 privatestaticfinalintPRESSED_RING_ALPHA=75; 
 privatestaticfinalintDEFAULT_PRESSED_RING_WIDTH_DIP=4; 
 privatestaticfinalintANIMATION_TIME_ID=android.R.integer.config_shortAnimTime; 
  
 privateintcenterY; 
 privateintcenterX; 
 privateintouterRadius; 
 privateintpressedRingRadius; 
  
 privatePaintcirclePaint; 
 privatePaintfocusPaint; 
  
 privatefloatanimationProgress; 
  
 privateintpressedRingWidth; 
 privateintdefaultColor=Color.BLACK; 
 privateintpressedColor; 
 privateObjectAnimatorpressedAnimator; 
  
 publicCircleButton(Contextcontext){ 
 super(context); 
 init(context,null); 
 } 
  
 publicCircleButton(Contextcontext,AttributeSetattrs){ 
 super(context,attrs); 
 init(context,attrs); 
 } 
  
 publicCircleButton(Contextcontext,AttributeSetattrs,intdefStyle){ 
 super(context,attrs,defStyle); 
 init(context,attrs); 
 } 
  
 @Override 
 publicvoidsetPressed(booleanpressed){ 
 super.setPressed(pressed); 
  
 if(circlePaint!=null){ 
 circlePaint.setColor(pressed?pressedColor:defaultColor); 
 } 
  
 if(pressed){ 
 showPressedRing(); 
 }else{ 
 hidePressedRing(); 
 } 
 } 
  
 @Override 
 protectedvoidonDraw(Canvascanvas){ 
 canvas.drawCircle(centerX,centerY,pressedRingRadius+animationProgress,focusPaint); 
 canvas.drawCircle(centerX,centerY,outerRadius-pressedRingWidth,circlePaint); 
 super.onDraw(canvas); 
 } 
  
 @Override 
 protectedvoidonSizeChanged(intw,inth,intoldw,intoldh){ 
 super.onSizeChanged(w,h,oldw,oldh); 
 centerX=w/2; 
 centerY=h/2; 
 outerRadius=Math.min(w,h)/2; 
 pressedRingRadius=outerRadius-pressedRingWidth-pressedRingWidth/2; 
 } 
  
 publicfloatgetAnimationProgress(){ 
 returnanimationProgress; 
 } 
  
 publicvoidsetAnimationProgress(floatanimationProgress){ 
 this.animationProgress=animationProgress; 
 this.invalidate(); 
 } 
  
 publicvoidsetColor(intcolor){ 
 this.defaultColor=color; 
 this.pressedColor=getHighlightColor(color,PRESSED_COLOR_LIGHTUP); 
  
 circlePaint.setColor(defaultColor); 
 focusPaint.setColor(defaultColor); 
 focusPaint.setAlpha(PRESSED_RING_ALPHA); 
  
 this.invalidate(); 
 } 
  
 privatevoidhidePressedRing(){ 
 pressedAnimator.setFloatValues(pressedRingWidth,0f); 
 pressedAnimator.start(); 
 } 
  
 privatevoidshowPressedRing(){ 
 pressedAnimator.setFloatValues(animationProgress,pressedRingWidth); 
 pressedAnimator.start(); 
 } 
  
 privatevoidinit(Contextcontext,AttributeSetattrs){ 
 this.setFocusable(true); 
 this.setScaleType(ScaleType.CENTER_INSIDE); 
 setClickable(true); 
  
 circlePaint=newPaint(Paint.ANTI_ALIAS_FLAG); 
 circlePaint.setStyle(Paint.Style.FILL); 
  
 focusPaint=newPaint(Paint.ANTI_ALIAS_FLAG); 
 focusPaint.setStyle(Paint.Style.STROKE); 
  
 pressedRingWidth=(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,DEFAULT_PRESSED_RING_WIDTH_DIP,getResources() 
 .getDisplayMetrics()); 
  
 intcolor=Color.BLACK; 
 if(attrs!=null){ 
 finalTypedArraya=context.obtainStyledAttributes(attrs,R.styleable.CircleButton); 
 color=a.getColor(R.styleable.CircleButton_cb_color,color); 
 pressedRingWidth=(int)a.getDimension(R.styleable.CircleButton_cb_pressed_ring_width,pressedRingWidth); 
 a.recycle(); 
 } 
  
 setColor(color); 
  
 focusPaint.setStrokeWidth(pressedRingWidth); 
 finalintpressedAnimationTime=getResources().getInteger(ANIMATION_TIME_ID); 
 pressedAnimator=ObjectAnimator.ofFloat(this,"animationProgress",0f,0f); 
 pressedAnimator.setDuration(pressedAnimationTime); 
 } 
  
 privateintgetHighlightColor(intcolor,intamount){ 
 returnColor.argb(Math.min(255,Color.alpha(color)),Math.min(255,Color.red(color)+amount), 
 Math.min(255,Color.green(color)+amount),Math.min(255,Color.blue(color)+amount)); 
 } 
 } 

继承了ImageView，这也注定了没有文字效果，所以如果你还想有文字效果，那么可以继承于button。看一下变量，除了Paint之外，再也就是3.0之后引入的属性动画ObjectAnimator这个类。既然是属性动画，当然是改变属性值了（不断更改对象的属性值），在这里就是改变button的颜色值。

构造方法里，还是常规的初始化paint、从attrs里获取属性值以及设置一些其他变量值，还要就是ObjectAnimator的初始化。然后CircleButton类会进入onSizeChanged方法，在这个方法里初始化了CircleButton的圆形坐标以及其他的变量。接着进入onDraw方法，在这里面绘制CircleButton，代码如下：

[html]view plaincopy 
       
 canvas.drawCircle(centerX,centerY,pressedRingRadius+animationProgress,focusPaint); 
 canvas.drawCircle(centerX,centerY,outerRadius-pressedRingWidth,circlePaint); 

可以看到它绘制了两个圆形，其实是这样的，从两个Paint变量就可以看出：一个是cirlcePaint，它的Style是FILL类型的，说明它画的是实心圆也就是默认状态下的button。另一个focusPaint是获取焦点时候调用的，它的Style是STROKE类型的，所以画出一个圆环效果，这也就是点击button之后出现的。但是看一下这两个圆环的半径发现实心圆的半径比空心圆的半径要大4。那把画实心圆的代码注释掉，效果是这样的：

看完就明白了，原来是实心圆把空心圆给遮住了，所以默认情况下，看到的是实心圆。当点击button的时候，执行setPressed()方法，这个方法在里面会调用showPressedRing()方法，也就是开启动画效果。这样，关于CircleButton的机制就清楚了。

接下来根据这个lizi 做一个拓展，学以致用。比如我还想使用矩形的butoon，然后也有点击动画的效果，那如何完成呢？很简单，原理同上，上面的例子画的是圆形，那么类似地就画矩形。在onDraw()中加入如下代码：

[html]view plaincopy 
       
 //可以放大的矩形 
 RectFrect=newRectF(); 
 rect.left=8-animationProgress; 
 rect.top=8-animationProgress; 
 rect.right=47+animationProgress; 
 rect.bottom=47+animationProgress; 
 canvas.drawRect(rect,focusPaint);//长方形 
 //实心矩形 
 RectFrect1=newRectF(); 
 rect1.left=5; 
 rect1.top=5; 
 rect1.right=50; 
 rect1.bottom=50; 
 canvas.drawRect(rect1,circlePaint);//长方形 

思路是通过RecF画矩形，在每次点击的时候，让坐标位置随着animationProgress而改变。