自定義控制元件 --- 電池icon

效果圖如上，下面直接上原始碼：

public class BatteryView extends View {

    private int mMargin = 15;    //電池內芯與邊框的距離
    private int mBoder = 12;     //電池外框的寬頻
    private int mWidth = 210;    //總長
    private int mHeight = 120;   //總高
    private int mHeadWidth = 18;    //頭部寬度
    private int mHeadHeight = 30;   //頭部高度

    private RectF mMainRect;    //外邊框
    private RectF mHeadRect;    //頭部邊框
    private float mRadius = 12f;   //圓角
    private float mPower;

    public BatteryView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    public BatteryView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public BatteryView(Context context) {
        super(context);
        initView();
    }

    private void initView() {

        mHeadRect = new RectF(mWidth - mHeadWidth, (mHeight - mHeadHeight)/2, mWidth, (mHeight + mHeadHeight)/2);

        float left = mHeadRect.width();
        float top = mBoder;
        float right = mWidth - mHeadWidth;
        float bottom = mHeight-mBoder;
        mMainRect = new RectF(left, top, right, bottom);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint1 = new Paint();

        //畫外框
        paint1.setStyle(Paint.Style.STROKE);    //設定空心矩形
        paint1.setStrokeWidth(mBoder);          //設定邊框寬度
        paint1.setColor(Color.parseColor("#ff0000"));
        canvas.drawRoundRect(mMainRect, mRadius, mRadius, paint1);

        //畫電池頭
        paint1.setStyle(Paint.Style.FILL);  //實心
        paint1.setColor(Color.parseColor("#00ff00"));
        canvas.drawRect(mHeadRect, paint1);

        //畫電池芯
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#0000ff"));
        int width   = (int) (mPower * (mMainRect.width() - mMargin*2));
        int left   = (int) (mMainRect.left + mMargin);
        int right    = (int) (mMainRect.left + mMargin + width);
        int top     = (int) (mMainRect.top + mMargin);
        int bottom  = (int) (mMainRect.bottom - mMargin);
        Rect rect = new Rect(left,top,right, bottom);
        canvas.drawRect(rect, paint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(mWidth, mHeight);
    }

    public void setPower(float power) {
        mPower = power;
        invalidate();
    }
}
複製程式碼

外部呼叫：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="aegis.myview.MainActivity">

    <aegis.myview.BatteryView
        android:id="@+id/id_batteryView"
        android:layout_width="500dp"
        android:layout_height="250dp"
        android:visibility="visible"
        app:border="4dp"
        app:inside_margin="3dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>
複製程式碼

    private BatteryView batteryView;
    private float power;
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case 0:
                    batteryView.setPower(power += 0.1);
                    if (power >= 1) {
                        power = 0;
                    }
                    break;
                default:
                    break;
            }
        }
    };

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

        batteryView = (BatteryView) findViewById(R.id.id_batteryView);
        batteryView.setPower(0.1f);
        //模擬充電過程
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                mHandler.sendEmptyMessage(0);
            }
        }, 0, 100);
    }
}
複製程式碼