安卓Android学习—自定义 球 + 波纹 View

自定义 球 + 波纹 View

先看下需求

1.png

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

制作

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

2.png
3.png
4.png

主要代码注释

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