自定义 球 + 波纹 View

自定义 球 + 波纹 View

先看下需求

他说要做个这样的View ，1、上半部分可以点击，下半部分也可以点击的 2、 剩余流量是有个百分比的。3、最好中间那条线是可以波动的。4、中间还有文字。

制作

很少写自定义View 就参考了网上的 写下 主要是 PorterDuffXfermode的应用 。

先看下效果







主要代码注释

public class RoundBollView extends View {
private Paint mBitmapPaint;
private int mTotalWidth, mTotalHeight;
private int mSpeed;
private Bitmap mSrcBitmap;
private Bitmap mMaskBitmap;
private Rect mMaskSrcRect;
private Rect mMaskDestRect;
private PaintFlagsDrawFilter mDrawFilter;
private String mTitleText;
private int mTextSize;
private int mCurrentPosition;
private Rect mTextBound;
private PorterDuffXfermode mPorterDuffXfermode;
private PorterDuffXfermode mBottomSelectPorterDuffXfermode;
private PorterDuffXfermode mTopSelectPorterDuffXfermode;
public static final int TOP = 0;
public static final int BOTTOM = 1;
public int mSelectIndex = -1;
private OnItemSelectListener mListener;

public RoundBollView(Context context, AttributeSet attrs) {
super(context, attrs);
......//各种初始化
}

private void initModeAndOther(Context context) {
//这边创建多个 mode 后面点击 和 绘制的时候切换的使用得到不同的效果
mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
mBottomSelectPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
mTopSelectPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT);
....//
}
//开启线程使 波纹滚动  波纹的图片是 一个很长的图片 把每次起始位置不同  截取不同图片
private void threadChangePosition() {
Thread positionThread  =new Thread() {
public void run() {
loopPosition();
}
};
positionThread.start();
}

....//各种set get
//自定义点击事件的监听接口
public interface OnItemSelectListener {
public void onItemSelect(int type);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_DOWN:
//去计算点击的区域是上半部分还是下半部分 并记录 到mSelectIndex
float x = event.getX();
float y = event.getY();
float dx = (getHeight() - (1 - mUsedPercent) * 200) - (y);
if (dx < 0) {
mSelectIndex = BOTTOM;
} else {
mSelectIndex = TOP;
}
if (mListener != null) {
mListener.onItemSelect(mSelectIndex);
}
invalidate();
return true;
case MotionEvent.ACTION_UP:
....
default:
break;
}
return super.onTouchEvent(event);

}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
.....
//对线程 mCurrentPosition 不同的 位置开始截图  就有了波纹效果
Bitmap bm = Bitmap.createBitmap(mSrcBitmap, mCurrentPosition, 0, mTotalWidth, mTotalHeight);
//((1 - mUsedPercent) * 200) 绘图高度是根据mUsedPercent 百分比确定的
canvas.drawBitmap(bm, 0, ((1 - mUsedPercent) * 200), mBitmapPaint);
//mSelectIndex 根据点击不同使用不同的 mode
if (mSelectIndex == BOTTOM) {
mBitmapPaint.setXfermode(mBottomSelectPorterDuffXfermode);
} else if (mSelectIndex == TOP) {
mBitmapPaint.setXfermode(mTopSelectPorterDuffXfermode);
} else {
mBitmapPaint.setXfermode(mPorterDuffXfermode);
}
.....
}
....

....

源码附件

附件地址

http://download.csdn.net/detail/djhsws/9265921