一，效果图：
图一为所做项目效果展示图：
图二为单独这个View的效果图：
二，使用方法：
1，由于是自定义的View，所以需要在attrs.xml里加入如下属性定义：
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="batteryLevel" format="float" /> <attr name="radius" format="integer" /> <attr name="flowRadius" format="dimension" /> <attr name="textColor" format="color" /> <attr name="textSize" format="dimension" /> <attr name="flowViewColor" format="color" /> <declare-styleable name="BatteryView"> <attr name="batteryLevel" /> <attr name="radius" /> <attr name="flowRadius" /> <attr name="textColor" /> <attr name="textSize" /> <attr name="flowViewColor"/> </declare-styleable> </resources>2，在布局文件中引入：
xmlns:zhangxutong="http://schemas.android.com/apk/res-auto"
<mcxtzhang.weixin521.help.BatteryView android:background="@drawable/battery_view_bg_circle" android:id="@+id/batteryView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:padding="10dp" zhangxutong:flowViewColor="#ffaaffaa"/>以上自定义的属性，如果我们需要自定义波浪滚动的圆球的颜色，则传入 flowViewColor，否则可完全使用默认属性。默认属性如图一，为半透明白色。
3，定义自定义View：
代码如下图：有详细注释：
package mcxtzhang.weixin521.help; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.IntentFilter; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PaintFlagsDrawFilter; import android.graphics.Path; import android.graphics.PorterDuff; import android.graphics.PorterDuffXfermode; import android.graphics.Rect; import android.graphics.drawable.BitmapDrawable; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import mcxtzhang.weixin521.R; import mcxtzhang.weixin521.utils.TipsUtils; /** * @author zhangxutong */ public class BatteryView extends View { private Context mContext; /** * 电池电量 */ private float level; /** * 控件半径 */ private int radius; /** * 波浪圆的半径 (弃用，被控件半径-padding 取代) */ private int flowRadius; /** * 波浪圆的颜色值 */ private int flowColor; /** * 绘制的电量文字颜色值 */ private int textColor; /** * 绘制的电量文字大小 */ private int textSize; /** * 波浪圆X轴偏移 */ private float FAI; /** * 波浪圆振幅 */ private float A; /** * 波浪圆的周期 */ private float W; /** * 波浪圆Y轴偏移 */ private float K; // 画图相关 /** * 画笔(遮罩) */ private Paint mPaint; /** * 画笔 绘制，电量 */ private Paint mTextPaint; /** * 绘制矩形波浪的Path */ private Path mPath; /** * 设置抗锯齿 */ private PaintFlagsDrawFilter mDrawFilter; /** * 设置遮罩模式 */ private PorterDuffXfermode mPorterDuffXfermode; /** * 存放遮罩图片 */ private Bitmap mBitmap; /** * 控件宽度 */ private int mWidth; /** * 控件高度 */ private int mHeight; /** * 中心点 横坐标 */ private int mCenterX; /** * 中心点 纵坐标 */ private int mCenterY; /** * 遮罩取源区域 */ private Rect mSrcRect; /** * 遮罩绘制目标区域 */ private Rect mDestRect; /** * 用于得到将要绘制的电量文字信息的区域 */ private Rect mTextRect; /** * 用于构建将要绘制的电量文字的字符串 */ private StringBuilder sb; /** * 暴漏出给外部调用的接口，用于监听 */ interface OnLevelChangeListener { int onLevelChange(); } OnLevelChangeListener mOnLevelChangeListener; public void setOnLevelChangeListener( OnLevelChangeListener onLevelChangeListener) { mOnLevelChangeListener = onLevelChangeListener; } /** * 监听电池广播 */ private BroadcastReceiver mBatteryChangeReceiver = new BroadcastReceiver() { @Override public void onReceive(Context context, Intent intent) { if (Intent.ACTION_BATTERY_CHANGED.equals(intent.getAction())) { LogI("onReceiver BatteryChanged"); level = intent.getIntExtra("level", -1); int curScale = intent.getIntExtra("scale", -1); sb.delete(0, sb.length()); sb.append("" + (int) level * 100 / curScale).append("%"); //计算AK，以防在电量接近边界，最大最小的时候，绘图超过范围 setA(); //setK(); } } }; /** * 设置Y轴偏移K, 以防在电量接近边界，最大最小的时候，绘图超过范围（弃用） */ private void setK() { // K:-5~+5 , level :0~100 /*float k = 20f/100f; K = k*level;*/ } /** * 设置振幅A，A的计算公式为一个二次方程，在level = 50时，振幅最大，在两端最小，在0和100临界值时为0 */ private void setA() { //y = ax; /*float k = 10f / 50f ; A = level<50? k*level:-k*(level-100);*/ //y = ax2+bx+c ( 0,3) (50,10 )( 100,3) if (level == 0 || level == 100) { A = 0; } else { float a = -7f / 2500; float b = -100 * a; float c = 3; A = (float) (a * Math.pow(level, 2) + b * level + c); } //LogI("A:"+A); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); LogI("onAttachedToWindow"); //onAttachedToWindow会在onDraw前调用，注册监听电量变化的广播 mContext.registerReceiver(mBatteryChangeReceiver, new IntentFilter(Intent.ACTION_BATTERY_CHANGED)); } @Override protected void onDetachedFromWindow() { super.onDetachedFromWindow(); LogI("onDetachedFromWindow"); //防止内存泄露，需要注销该广播 mContext.unregisterReceiver(mBatteryChangeReceiver); } public BatteryView(Context context) { this(context, null); } public BatteryView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public BatteryView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mContext = context; LogI("inital func"); init(); // 获取我们在attr中定义的样式属性 TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BatteryView, defStyleAttr, 0); int n = a.getIndexCount(); for (int i = 0; i < n; i++) { int attr = a.getIndex(i); switch (attr) { case R.styleable.BatteryView_batteryLevel: level = a.getFloat(attr, 0); break; case R.styleable.BatteryView_flowRadius: flowRadius = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150, getResources().getDisplayMetrics())); break; case R.styleable.BatteryView_radius: radius = a.getInt(attr, getWidth()); break; case R.styleable.BatteryView_textColor: textColor = a.getColor(attr, Color.WHITE); break; case R.styleable.BatteryView_textSize: textSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics())); break; case R.styleable.BatteryView_flowViewColor: TipsUtils.showToast(context,"flowViewColor"); flowColor = a.getColor(attr,0x88FFFFFF); break; } } a.recycle(); initPaint(); //这个线程就是为了将波浪滚动起来，改变FAI，即X轴的偏移 ,稍后完善会用属性动画实现 new Thread() { @Override public void run() { while (true) { changeFAI(); try { Thread.sleep(60); } catch (InterruptedException e) { e.printStackTrace(); } postInvalidate(); } } private void changeFAI() { FAI += 0.2; } }.start(); } /** * 初始化参数函数 */ private void init() { level = 0; radius = getWidth(); flowRadius = 150; flowColor = 0x88FFFFFF; FAI = 0; A = 9; W = 0.75f; K = 0; } /** * 初始化画笔相关参数 */ private void initPaint(){ // 绘图参数初始化 // 抗锯齿 mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); //设置遮罩模式为，先绘制DST,再绘制SRC,取交集，留下DST mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN); mPaint = new Paint(); mPaint.setStyle(Paint.Style.FILL); mPath = new Path(); // 防抖动 mPaint.setDither(true); // 开启图像过滤 mPaint.setFilterBitmap(true); //绘制出的滚动波浪的颜色 mPaint.setColor(flowColor); // 初始化遮罩图片 mBitmap = ((BitmapDrawable) getResources().getDrawable( R.drawable.battery_view_bg_round)).getBitmap(); //初始化电量文字的Paint和Rect mTextPaint = new Paint(); //设置文字样式，实心，居中，字体 mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setTextAlign(Paint.Align.CENTER); /*Typeface tf = Typeface.createFromAsset(mContext.getAssets(), "fonts/Roboto-Thin.ttf"); mTextPaint.setTypeface(tf);*/ mTextRect = new Rect(); sb = new StringBuilder(); } //private int temp = 0; @Override protected void onDraw(Canvas canvas) { //LogI("flowRadius" + flowRadius + " getPaddingRight:" + getPaddingRight()); //if(temp++==0) //LogI("onDraw"); // 从canvas层面抗锯齿 canvas.setDrawFilter(mDrawFilter); //新开启一个图层，用于绘制波浪 int sc = canvas.saveLayer(0 + getPaddingLeft(), 0 + getPaddingTop(), mWidth - getPaddingRight(), mHeight - getPaddingBottom(), null, Canvas.ALL_SAVE_FLAG); //清除上次的path mPath.reset(); /* level = 0; setA(); //setK(); */ //利用正弦曲线方程 Y = A sin(wx+FAI)+k，将计算后的坐标传入Path.quadTo()方法（绘制贝塞尔曲线）中,构建波浪曲线。 for (int x = mDestRect.left; x < mDestRect.right; x++) { float y = (float) (A * Math.sin(Math.PI / 250 * W * x + FAI) + K + (mDestRect.bottom - mDestRect.top) * 1.0f / 100 * (100 - level)); if (x == mDestRect.left) { mPath.moveTo(x, y); } mPath.quadTo(x, y, x + 1, y); } //将Path连结起来,形成闭环 mPath.lineTo(mDestRect.right, mDestRect.bottom); mPath.lineTo(mDestRect.left, mDestRect.bottom); mPath.close(); //绘制波浪图形(图形上部是波浪，下部是矩形) （DST） canvas.drawPath(mPath, mPaint); //设置遮罩模式(图像混合模式) mPaint.setXfermode(mPorterDuffXfermode); //绘制用于遮罩的圆形 (SRC) canvas.drawBitmap(mBitmap, mSrcRect, mDestRect, mPaint); //设置遮罩模式为null mPaint.setXfermode(null); //将这个新图层绘制的bitmap，与上一个图层合并(显示) canvas.restoreToCount(sc); //canvas.restore(); 也可以 //绘制电量文字的 字体大小和颜色 需要每次都重新设置 否则绘制不出文字，原因不明。 /*mTextPaint.setTextSize(textSize); mTextPaint.setColor(textColor); mTextPaint.getTextBounds(sb.toString(), 0, sb.toString().length(), mTextRect); //绘制电池电量 canvas.drawText(sb.toString(), mCenterX, mCenterY,mTextPaint); mTextPaint.setTextSize(24);*/ } /** * 通过 onSizeChanged方法 获取当前view的宽高，以及中心点坐标 */ @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { LogI("onSizeChanged:" + getPaddingLeft()); mWidth = w; mHeight = h; mCenterX = w / 2; mCenterY = h / 2; mSrcRect = new Rect(0, 0, mBitmap.getWidth(), mBitmap.getHeight()); /*mDestRect = new Rect(mCenterX - flowRadius, mCenterY - flowRadius, mCenterX + flowRadius, mCenterY + flowRadius);*/ //这边遮罩在绘制时应该考虑View的padding， mDestRect = new Rect(0 + getPaddingLeft(), 0 + getPaddingTop(), mWidth - getPaddingRight(), mHeight - getPaddingBottom()); //mDestRect = new Rect(mWidth/2-flowRadius, mHeight/2-flowRadius,mWidth/2+flowRadius , mHeight/2+flowRadius); } //为了适配wrap_content，需要针对AT_MOST测量一下自己的宽高，这里是将wrap_content设置成默认的150dp @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { LogI("onMeasure"); setMeasuredDimension(measuredWidth(widthMeasureSpec), measuredHeight(heightMeasureSpec)); } private int measuredHeight(int heightMeasureSpec) { //初始化weight的默认值为150dp int measuredHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150, getResources().getDisplayMetrics()); //得到测量模式和测量值 int specMode = MeasureSpec.getMode(heightMeasureSpec); int specSize = MeasureSpec.getSize(heightMeasureSpec); //如果是确定的值或Match_parent if (MeasureSpec.EXACTLY == specMode) { measuredHeight = specSize; } else { //AT_MOST：wrap_content ,UNSPECIFIED 没用过。貌似子View想要多大就多大 //取默认值和测量值的最小值 measuredHeight = Math.min(specSize, measuredHeight); } return measuredHeight; } private int measuredWidth(int widthMeasureSpec) { int measuredWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150, getResources().getDisplayMetrics()); int specMode = MeasureSpec.getMode(widthMeasureSpec); int specSize = MeasureSpec.getSize(widthMeasureSpec); if (MeasureSpec.EXACTLY == specMode) { measuredWidth = specSize; } else { measuredWidth = Math.min(specSize, measuredWidth); } return measuredWidth; } private void LogI(String msg) { android.util.Log.i("zhangxutong/BatteryView", "" + msg); } }重点是在onDraw里，利用path.quaTo()方法，绘制贝塞尔曲线（平滑的曲线），绘制的图形是一个正弦函数曲线图。即模拟出波浪效果。
关于如何让波浪动态滚动起来，是开启了一个线程，动态改变正弦曲线函数的FAI（横坐标的偏移量），则波浪会滚动起来。
========================================
附上源码和快速使用说明文档，
里面包含所有资源文件。
http://download.csdn.net/detail/zxt0601/9421642
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
