安卓开发入门之自定义柱状图


核心代码不到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());
其中的座标如下:




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章