ColorButton 的实现

ColorButton 的实现

作者: 刘鹏

日期: 2010-03-12

本文总结了 Android 自带 Calculator 程序中 ColorButton 的实现方法。

简介

Android 平台自带了一个计算器程序(Calculator), UI 做的非常漂亮美观，如 下图所示。

Calculator 程序在 Calculator 的 UI 中，按钮的表现非常有特色，简洁、大方，既有立体感， 还带一些动画效果，这里我们分析这些特效的实现。参考 Calculator 的源码，我们称这些按钮是 Color Button。

实现原理

普通状态下的按钮

按钮由两部分组成：一是黑色背景；二是一个透明背景的圆，圆内侧有一块白斑， 为按钮带来立体感。如下图所示：

normal color button

按钮按下特效

按钮按下时变成带渐变效果的红色，该效果用一带渐变效果的底图跟前景色红色按 PorterDuff 中的 SRC_IN 模式进行组合得到，如下图所示：

clicked button

 

动画的实现

按下按钮后抬起鼠标，按钮有个红色图案旋转的特效，实现思路有如下几点：

• 设置一个标志表示动画是否在运行
• 在 onDraw 函数中调用 postInvalidDelayed 函数持续刷新屏幕
• 每次刷新屏幕时(可以称之为一帧)根据动画已运行的时间动态改变 alpha 值并旋转底图。

代码如下

private void drawMagicFlame(int duration, Canvas canvas) { int alpha = 255 - 255 * duration / CLICK_FEEDBACK_DURATION; int color = CLICK_FEEDBACK_COLOR | (alpha << 24); mButtonBackground.setColorFilter(color, PorterDuff.Mode.SRC_IN); int cx = getWidth() / 2; int cy = getHeight() / 2; float angle = 250.0f * duration / CLICK_FEEDBACK_DURATION; canvas.rotate(angle, cx, cy); mButtonBackground.draw(canvas); canvas.rotate(-angle, cx, cy); } @Override public void onDraw(Canvas canvas) { if (mAnimStart != -1) { int animDuration = (int) (System.currentTimeMillis() - mAnimStart); if (animDuration >= CLICK_FEEDBACK_DURATION) { mButtonBackground.clearColorFilter(); mAnimStart = -1; } else { drawMagicFlame(animDuration, canvas); postInvalidateDelayed(CLICK_FEEDBACK_INTERVAL); } } else if (isPressed()) { drawMagicFlame(0, canvas); } mButton.draw(canvas); CharSequence text = getText(); canvas.drawText(text, 0, text.length(), mTextX, mTextY, getPaint()); } 

 

我对其中的几点疑惑，希望有人能回答：

1.  mButtonBackground.setColorFilter(color, PorterDuff.Mode.SRC_IN);

是怎样的过滤机制？？

2.

  canvas.rotate(angle, cx, cy);

        mButtonBackground.draw(canvas);

        canvas.rotate(-angle, cx, cy);

旋转对应的角度，为什么后面有旋转对应的-角度