Android 电池电量进度条，上下滚动图片的进度条（battery）

浏览数：52 / 时间：2015年06月11日

最近，制作一个app,需要模拟一个电池电量的进度条，根据电量多少来设置百分比，进度条不断上下滚动，就像平时手机充电一样的电池电量进度条。我就自定义view实现了电量进度条。修改图片就可以达到自己想要的效果

一、自定义View，Battery.java,循环刷新界面,两张图片上下滚动，达到不断向右移动的效果。挺有意思的

package com.example.battery;


import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;

public class Battery extends View {
	public float currentX = 80;
	public float currentY = 80;
	private float secondY = 80;
	private Paint mPaint = new Paint();
	private Context mContext;
	private Handler mHandler;
	private Bitmap mBmp;
	private int speedTime = 20;
	
	private float with = 200;
	private float height = 50;
	private float percentage = 0.5f;

	public Battery(Context context) {
		super(context);
		this.mContext = context;
		
	}

	public Battery(Context context, AttributeSet set) {
		super(context, set);
		this.mContext = context;
		init();
	}

	public void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		with = this.getWidth();
		height = this.getHeight();
		
		mPaint.setColor(Color.BLUE);
		Resources res = mContext.getResources();
		BitmapDrawable bmpDraw = (BitmapDrawable) res
				.getDrawable(R.drawable.loading_pic);
		mBmp = bmpDraw.getBitmap();
		
		canvas.clipRect(0, 0, with*percentage, height);
		
		canvas.drawBitmap(mBmp, 0, currentY, mPaint);
		
		canvas.drawBitmap(mBmp, 0, secondY, mPaint);
	}

	private void init() {
		percentage = 0;
		
		mHandler = new Handler() {
			public void handleMessage(Message msg) {
				switch (msg.what) {
				case 1:
					currentX ++;
					currentY ++;
					if (mBmp != null && currentY > mBmp.getHeight()){
						currentY = -mBmp.getHeight();
					}
					if (mBmp != null){
						secondY = currentY+mBmp.getHeight();
						if (secondY >= mBmp.getHeight()){
							secondY = currentY-mBmp.getHeight();
						}
					}
					
					percentage = percentage + 0.003f;
					if (percentage > 1){
						percentage = 0;
					}
					// 每次计算后都发送消息进入下一次循环，并刷新界面
					mHandler.sendEmptyMessageDelayed(1, speedTime);
					postInvalidate();
					break;
				}
				super.handleMessage(msg);
				postInvalidate();
			}
		};
		
		// 首次循环刷新界面
		mHandler.sendEmptyMessageDelayed(1, speedTime);
	}
}

二、MainActivity

package com.example.battery;


import android.app.Activity;
import android.os.Bundle;


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


}

三、activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:layout_gravity="center"
    android:gravity="center" >  
  
    <com.example.battery.Battery
        android:layout_width="300dp"  
        android:layout_height="10dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="10dp" />  
  
</LinearLayout>

四、附图片效果