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

最新推荐文章于 2024-11-10 18:11:38 发布

zhangxiangliang2

最新推荐文章于 2024-11-10 18:11:38 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：安卓开发入门系列

本文链接：https://blog.youkuaiyun.com/zhangxiangliang2/article/details/73610241

安卓开发入门系列专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在安卓开发中快速入门自定义柱状图，核心代码简洁，只需在布局文件中添加控件，并通过一行代码设置数据。提供源码下载链接，帮助开发者快速理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心代码不到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.youkuaiyun.com/detail/zhangxiangliang2/9878082

好，看完整个过程，有一点需要解释：

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

其中的坐标如下：