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