安卓開發入門之自定義柱狀圖

核心代碼不到70行

public class MyBarchartView extends View {
    int mMaxValue = 100;//顯示的最大值
    int corner = 0;//圓角角度
    int mValue4show = 0;//顯示的值
    int mTempData = 0;
    int textPadding = 10;//值與圖之間的間隔
    Paint mPaint;
    int mColor;
    Context mContext;
    float mTextsize=10;
    public MyBarchartView(Context context) {
        super(context);
        mContext=context;
    }
    public MyBarchartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext=context;
        initPaint();
    }
    public MyBarchartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext=context;
        initPaint();
    }
    private void initPaint() {
        mPaint=new Paint();
        mPaint.setAntiAlias(true);
        mColor=mContext.getResources().getColor(R.color.colorPrimary);
        mPaint.setColor(mColor);
    }
    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        //防止數值很大的的時候，動畫時間過長
        int step= mValue4show /50+1;
        if (mTempData < mValue4show -step) mTempData = mTempData +step;
        else mTempData = mValue4show;
        String s= mTempData +"";
        mPaint.setTextSize(mTextsize);
        float maxH=getHeight();
        //圓角矩形的實際高度
        float realH=maxH/ mMaxValue * mTempData;
        // 設置新的長方形
        RectF oval3=new RectF(0,getHeight()-realH,getWidth(),getHeight());
        canvas.drawRoundRect(oval3,MyUtil.px2dip(mContext,corner),MyUtil.px2dip(mContext,corner),mPaint);
        //寫數字
        canvas.drawText(s, getWidth() * 0.5f - mPaint.measureText(s) * 0.5f, getHeight() - realH - 2 * MyUtil.px2dip(mContext, textPadding), mPaint);
        if (mTempData != mValue4show)postInvalidate();
    }
    public void setData(int data, int maxValue,float textsize) {
        this.mValue4show = data;
        mTempData = 0;
        this.mMaxValue = maxValue;
        mTextsize=textsize;
        postInvalidate();
    }
}

在佈局文件裏面添加剛纔自定義的控件

 <com.tranwon.mybarchart.MyBarchartView
        android:background="#aaaaaa"
        android:id="@+id/barchart"
        android:layout_width="50dp"
        android:layout_height="300dp" />

使用方法：獲取控件引用後直接一行代碼設置數據

        barchart.setData(88,100,20);

運行結果

源碼下載

http://download.csdn.net/detail/zhangxiangliang2/9878082

好，看完整個過程，有一點需要解釋：

 RectF oval3=new RectF(0,getHeight()-realH,getWidth(),getHeight());

其中的座標如下：