Android 项目(一):自定义View绘制“折线图”

这里写图片描述
  都说不要造轮子不要造轮子,可是我还是在不停的造轮子啊!!!闲话不多说了看看上面折线图的效果(Ps:当然了如果有现成的例子或者是开源的东西最好还是参考别人的或者是开源的,毕竟自己自定义view好看是好看但是太耗费时间很多东西需要自己去慢慢调试)。
  如果你有了一定的android基础,建议在绘制上面的折线图之前还是仔细观察一下,有了自己的思路再来看下面的博客。
  通过上面的效果图可以看出画布的底层是白色的背景,之后绘制了一个灰色的矩形区域+绘制网格背景(说白了就是画线),然后就是折线图的具体绘制了,关于折线图的具体绘制从效果上看是先绘制的线再绘制的两层的小圆点(一个底部蓝色的圆点+一个表层的白色圆点)然后就是折线所围区域的阴影部分;这里简单说一下折线就是通过画线绘制的,圆点画圆,阴影部分通过path路径绘制(给画笔透明度);绘制的时候为了确定折线的绘制路线可以先绘制圆点再绘制折线,最后绘制阴影
  好了,上面就是绘制折线图的大体思路了

一、创建自定义view

这里就是先创建一个class来继承View,然后再在canvas画布上进行绘制,先不要管怎么绘制,具体绘制下面会给出。
ps:
1、代码private List<BrokenLineCusVisit> mdata;中自己创建的一个类,为了添加数据方便,如果不是为了以后整个项目考虑,可以自己在该class中随意添加数据,之后在MainActivity中就不需要再添加数据了。
2、有使用到heigh的地方需要在onMeasure方法中使用,不然会是0;比如gridspace_heigh(每个网格的高度)

/**
 * Created by Administrator on 2015/10/13.
 */
public class BrokenLineCusVisitView extends View {
   
    private int width;
    private int heigh;

    //网格的宽度与高度
    private int gridspace_width;
    private int gridspace_heigh;
    //底部空白的高度
    private int brokenline_bottom;


    //灰色背景的画笔
    private Paint mPaint_bg;
    //灰色网格的画笔
    private Paint mPaint_gridline;
    //文本数据的画笔
    private Paint mPaint_text;

    //折线圆点的蓝色背景
    private Paint mPaint_point_bg;
    //折线圆点的白色表面
    private Paint mPaint_point_sur;
    //阴影路径的画笔
    private Paint mPaint_path;
    //折线的画笔
    private Paint mPaint_brokenline;
    //路径
    private Path mpath=new Path();
    //客户拜访的折线(BrokenLineCusVisit)数据
    private List<BrokenLineCusVisit> mdata;

    public BrokenLineCusVisitView(Context context) {
        super(context);
    }

    public BrokenLineCusVisitView(Context context, AttributeSet attrs) {
        super(context, attrs);
        inite(context);
    }

    private void inite(Context context) {

        mPaint_bg=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_bg.setColor(Color.argb(0xff,0xef,0xef,0xef));

        mPaint_gridline=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_gridline.setColor(Color.argb(0xff,0xce,0xCB,0xce));

        mPaint_brokenline=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_brokenline.setColor(Color.argb(0xff,0x91,0xC8,0xD6));
        mPaint_brokenline.setTextSize(18);
        mPaint_brokenline.setTextAlign(Paint.Align.CENTER);

        mPaint_point_bg=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_point_bg.setColor(Color.argb(0xff, 0x91, 0xC8, 0xD6));
           //注意path的画笔的透明度已经改变了
        mPaint_path=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_path.setColor(Color.argb(0x33,0x91,0xC8,0xD6));


        mPaint_point_sur=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_point_sur.setColor(Color.WHITE);


        mPaint_text=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint_text.setColor(Color.BLACK);
        mPaint_text.setTextAlign(Paint.Align.CENTER);

         invalidate();
    }
    //data的set/get方法,用于设置数据
    public List<BrokenLineCusVisit> getMdata() {
        return mdata;
    }

    public void setMdata(List<BrokenLineCusVisit> mdata) {
        this.mdata = mdata;
        requestLayout();
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);
        //绘制白色背景
        canvas.drawColor(Color.WHITE);
        //绘制灰色矩形区域
        canvas.drawRect(10,0,width,heigh-brokenline_bottom,mPaint_bg);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        gridspace_width= <
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值