Android自定义view-手把手教你画直方图，饼图.

最新推荐文章于 2022-11-07 10:21:08 发布
最新推荐文章于 2022-11-07 10:21:08 发布
阅读量439 收藏
点赞数
文章标签： 移动开发 java python
原文链接：https://juejin.im/post/5afa850e6fb9a07aa2138068
版权

直方图

  • 先画一个直角坐标系
package com.example.a16040657.customviewtest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by 16040657 on 2018/5/15.
 */

public class HistogramView extends View {
    public HistogramView(Context context) {
        super(context);
    }

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

    public HistogramView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

//    public HistogramView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
//        super(context, attrs, defStyleAttr, defStyleRes);
//    }

    Paint paint = new Paint();

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //开始直方图绘制
        //我们首先绘制竖向的一条黑色直线
        paint.setColor(Color.BLACK);
        //线的粗细先设置一下
        paint.setStrokeWidth(5);
        //坐标系都是针对自己view的顶点坐标(注意不是屏幕坐标哦) 点的坐标 x轴的值是一样的 所以可以得知这肯定是一条笔直的竖线
        canvas.drawLine(100, 200, 100, 800, paint);
        //然后依葫芦画瓢画一条横向的黑色直线 与上面这条竖着的直线 组成一个x轴和y轴
        canvas.drawLine(100, 800, 800, 800, paint);


    }
}

复制代码

看下效果：

  • 然后绘制第一个直方
 //绘制第一个矩形直方
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        //注意坐标都是 left, top, right, bottom
        canvas.drawRect(150, 700, 200, 800, paint);
        //然后在我们的直方下面绘制对应的文字

        paint.setTextSize(35);
        canvas.drawText("三星", 140, 840, paint);
复制代码

看下效果

  • 依葫芦画瓢 多画几个直方模块 组成一个完整的直方图。这里是全部代码
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //开始直方图绘制
        //我们首先绘制竖向的一条黑色直线
        paint.setColor(Color.BLACK);
        //线的粗细先设置一下
        paint.setStrokeWidth(5);
        //坐标系都是针对自己view的顶点坐标(注意不是屏幕坐标哦) 点的坐标 x轴的值是一样的 所以可以得知这肯定是一条笔直的竖线
        canvas.drawLine(100, 200, 100, 800, paint);
        //然后依葫芦画瓢画一条横向的黑色直线 与上面这条竖着的直线 组成一个x轴和y轴
        canvas.drawLine(100, 800, 800, 800, paint);

        //绘制第一个矩形直方
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        //注意坐标都是 left, top, right, bottom
        canvas.drawRect(150, 700, 200, 800, paint);
        //然后在我们的直方下面绘制对应的文字
        paint.setTextSize(35);
        canvas.drawText("三星", 140, 840, paint);

        //多画几个直方模组 组成一个完整的直方图
        canvas.drawRect(250, 500, 300, 800, paint);
//        paint.setTextSize(35);
        canvas.drawText("苹果", 240, 840, paint);


        canvas.drawRect(350, 300, 400, 800, paint);
//        paint.setTextSize(35);
        canvas.drawText("小米", 340, 840, paint);

        canvas.drawRect(450, 200, 500, 800, paint);
        //销冠华为颜色就特殊点吧
        paint.setColor(Color.BLUE);
        canvas.drawText("华为", 440, 840, paint);


    }
复制代码

最后看下效果：

基本上直方图算是最简单的一种自定义view，这里给出基本画法，拿到项目里面用各位就需要自定义一些属性，然后坐标的值根据属性算一下而已，算的上比较简单的一种自定义view了。大体思路和画法是不变的

稍微复杂点的饼图

  • 先看看饼图的核心怎么画，代码很少，略微涉及到一点初中数学知识。
package com.example.a16040657.customviewtest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by 16040657 on 2018/5/15.
 */

public class PieGraphView extends View {
    public PieGraphView(Context context) {
        super(context);
    }

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

    public PieGraphView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    Paint paint = new Paint();

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //饼图的核心其实就是画好扇形就成功了一大半了
        //饼图的核心就是一个圆形，学会切割圆形，就知道怎么画饼图
        //先绘制一个整体的背景
        canvas.drawColor(Color.GRAY);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLUE);

        //这里要注意的是标准的饼图是一个圆形，那既然是圆形，这里right和left的差值要和 top和bottom的差值相等
        //因为只有对应的矩形长宽相等，里面才是个圆形 最终画出来的才是完整的圆形否则就是不规则的椭圆很难看
        //-110的这个参数 是起始角度 100这个参数是划过的角度 ，这里的划 代表是顺时针， x轴方向是0度，这个地方要自己体会一下
        canvas.drawArc(200, 700, 800, 1300, -110, 100, true, paint); // 绘制扇形
        paint.setColor(Color.RED);
        //保证饼图的重合性，可以看出来 这个-10的值 就是 -110+100得到的，上一个扇形的尾巴等于这个一个扇形的头
        canvas.drawArc(200, 700, 800, 1300, -10, 50, true, paint); // 绘制扇形
        paint.setColor(Color.YELLOW);
        //最后画一个大的，完成这个圆即可，注意这里 三个划过的角度是100+50+210=360 刚好是一个圆形的角度 且起始角度40的值就是上一个扇形的-10+50 计算而来，这样就完美组成了一个完整的圆形饼图
        canvas.drawArc(200, 700, 800, 1300, 40, 210, true, paint); // 绘制扇形


    }
}

复制代码

然后看看效果

  • 光有图还不行，还得看告诉别人这些饼图代表什么
 paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(6);
        Path path = new Path();
        //为了好理解 我们先回到这个圆形的中心点
        path.moveTo(500, 1000);
        //然后再挪动到蓝色的区域某个位置
        path.moveTo(550, 900);
        //然后画一条斜线
        path.lineTo(700, 750);
        //然后再斜线的末端相对平移一下
        path.rLineTo(100,0);
        canvas.drawPath(path, paint);
        //最后再绘制一个文字
        paint.reset();
        paint.setTextSize(35);
        paint.setColor(Color.WHITE);
        canvas.drawText("JAVA",810,750,paint);
复制代码

看下效果：

  • 最后补全代码看下整体效果
package com.example.a16040657.customviewtest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by 16040657 on 2018/5/15.
 */

public class PieGraphView extends View {
    public PieGraphView(Context context) {
        super(context);
    }

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

    public PieGraphView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    Paint paint = new Paint();

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //饼图的核心其实就是画好扇形就成功了一大半了
        //饼图的核心就是一个圆形，学会切割圆形，就知道怎么画饼图
        //先绘制一个整体的背景
        canvas.drawColor(Color.GRAY);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLUE);

        //这里要注意的是标准的饼图是一个圆形，那既然是圆形，这里right和left的差值要和 top和bottom的差值相等
        //因为只有对应的矩形长宽相等，里面才是个圆形 最终画出来的才是完整的圆形否则就是不规则的椭圆很难看
        //-110的这个参数 是起始角度 100这个参数是划过的角度 ，这里的划 代表是顺时针， x轴方向是0度，这个地方要自己体会一下
        canvas.drawArc(200, 700, 800, 1300, -110, 100, true, paint); // 绘制扇形
        paint.setColor(Color.RED);
        //保证饼图的重合性，可以看出来 这个-10的值 就是 -110+100得到的，上一个扇形的尾巴等于这个一个扇形的头
        canvas.drawArc(200, 700, 800, 1300, -10, 50, true, paint); // 绘制扇形
        paint.setColor(Color.YELLOW);
        //最后画一个大的，完成这个圆即可，注意这里 三个划过的角度是100+50+210=360 刚好是一个圆形的角度 且起始角度40的值就是上一个扇形的-10+50 计算而来，这样就完美组成了一个完整的圆形饼图
        canvas.drawArc(200, 700, 800, 1300, 40, 210, true, paint); // 绘制扇形

        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(6);
        Path path = new Path();
        //为了好理解 我们先回到这个圆形的中心点
        path.moveTo(500, 1000);
        //然后再挪动到蓝色的区域某个位置
        path.moveTo(550, 900);
        //然后画一条斜线
        path.lineTo(700, 750);
        //然后再斜线的末端相对平移一下
        path.rLineTo(100, 0);
        canvas.drawPath(path, paint);
        //最后再绘制一个文字
        paint.reset();
        paint.setTextSize(35);
        paint.setColor(Color.WHITE);
        canvas.drawText("JAVA", 810, 750, paint);


        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(6);
        Path path2 = new Path();
        path2.moveTo(550, 1000);
        path2.lineTo(650, 1100);
        path2.rLineTo(200, 0);
        canvas.drawPath(path2, paint);
        paint.reset();
        paint.setTextSize(35);
        paint.setColor(Color.WHITE);
        canvas.drawText("PYTHON", 860, 1100, paint);



        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(6);
        Path path3 = new Path();
        path3.moveTo(400, 1050);
        path3.lineTo(250, 1100);
        path3.rLineTo(-100, 0);
        canvas.drawPath(path3, paint);
        paint.reset();
        paint.setTextSize(35);
        paint.setColor(Color.WHITE);
        canvas.drawText("C++", 80, 1100, paint);


    }
}

复制代码

weixin_33750452
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android高级应用源码-仿随手记的炫酷饼图.zip
10-14
Android高级应用源码-仿随手记的炫酷饼图.zip
Android自定义直方图
朝花夕拾
03-07 525
github地址
Android自定义View之直方图和扇形图——ChartView
余生无须指教
08-31 1396
先上图实现      因为本次需求中只有柱状图和扇形图的需求，所以本次示例将两种类型的图放在了一个view里，先看看自定义属性<declare-styleable name="ChartView"> <attr name="textColor" format="color" /> <attr name="textSize" format="dimension" />
安卓简单绘制直方图思路
qq_28898075的博客
06-08 921
最近看了看HenCoder Android 开发进阶：自定义 View 1-1 绘制基础，作者讲的很全面，受益匪浅，顺手写了下常用Drawxxx()方法，练习了一下，以免忘记了。这里说一下比价复杂的直方图，虽然很多第三方可以直接拿来用，但是我还是自己随便写了个Demo，知其所以然。代码很简单：public class Practice10HistogramView extends View { ...
Android之自定义的水平方向的直方图
tianyaluqingchen的博客
11-07 560
先上效果图：     本文采用了两种方式实现了如上效果。     方案一：完全自定义的View填充。     自定义HorizontalBarChart的思路为：使该控件继承自RelativeLayout，然后根据传入的数据组装并填充item布局；声明一个线性布局，将这些item布局依次添加到线性布局中（还需要额外添加头布局和尾布局）；然后声明一个ScrollView，将线性布局添加到S...
android 照片直方图第三方库,Android drawXXX()直方图和饼图
weixin_29552815的博客
05-27 198
题目见Github通过一下午的时间做了个练习，比较复杂的就是直方图和饼图。直方图device-2017-07-13-183502.pngpackage com.hencoder.hencoderpracticedraw1.practice;import android.content.Context;import android.graphics.Canvas;import android.gra...
手把手教你用Android自定义饼状图
09-01
本教程将教你如何从零开始创建一个自定义的饼状图，适用于那些对图表有特定需求或者希望深入理解Android绘图机制的开发者。 首先，我们要创建一个新的`View`子类，例如名为`PieView`。在这个类中，我们将重写构造...
EXCEL报表饼状图-2-动态复合型饼图.xlsx
05-01
EXCEL报表饼状图-2-动态复合型饼图.xlsx
Android 关于用path绘制扇形区域的方式
LoadHappy的博客
05-23 914
path绘制扇形
Android简单实现直方图
dongkui_的博客
03-10 1439
前言： 学习过后想自己实现一个直方图，所以就有了以下的文章 先上一张效果图。看下去的动力，有没有很多人感觉很熟悉？！是的，你们想的是对的，是来自HenCoder Android 开发进阶：自定义 View 1-1 绘制基础的学习。主要就是想自己实现一个，界面的画的久了，越来越喜欢可以动态变化的布局了，毕竟固定的布局修改起来还是很费时的，努力向这个方向上发展吧。还有饼图后续会分享一下。（上面是参...
android 画一个自定义的二维虚线坐标
05-15
该代码用android实现自定义的view画一个二维虚线坐标系。可动态添加坐标轴上的文字
Android自定义二维坐标系，并且可以连接坐标上的坐标点
11-18
这个二维坐标系是完全继承View，本人在处理图片灰度值的时候用到，很简单美观的二维坐标系，找了很久合适的，于是自己写了一个，该坐标系可以连接坐标上坐标点，为了方便我只连接了3个点，很多点的时候，可以用循环前面一个连接后面一个这样连接，这个控件可以直接用，在学习后者工作中，可以用来画坐标曲线。只要你提供相应的坐标点即可!.....当然也要根据个人情况使用，我是提供一个控件！
Android Studio Canvas类（基本绘图实现）
qq_46574738的博客
02-23 4886
基本绘图实现
自定义view实战(9)：多点触控扇形图
silencefly的博客
11-07 956
自定义view实战(9)：多点触控扇形图，单指旋转、二指放大、三指移动，四指以上同时按下进行复位
Android studio 继承view 画笔画圆、画方形、画三角形、画扇形、画椭圆
飞鸟96
09-30 4420
MainActivitypublic class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVie
Android自定义View-绘制扇形实现圆形进度
u010881762的专栏
01-22 4922
先上图，这是要实现的效果,根据音量的大小中间的进度调节。麦克风部分是透明的,所以原理就是在蒙层的底部画白色的扇形。如下图所示 这样就能实现圆形像水瓮一样的进度。 实现方法： 通过Canvas的drawArc方法实现。 public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, bo
Android 下，使用 Path 画一个环状的扇形
marksim的博客
09-06 1401
今天需要在界面上画一个环状的扇形。研究一下，发现一个简单的办法就可以办到。记录一下。 直接上代码： //设置一个目标正方形框。这个边长是内弧的直径。中心点即为圆心 RectF baseRectf = new RectF(600, 600, 800, 800); Path path = new Path(); //画一个弧。注意，角度的设置。这样设置，正方型的边长就是直径。方便计算。 path.addArc(baseRectf, -30, 60); //向外扩张这个正方形。此时正方形的边长是外弧的
Android自定义view实现扇形
Ares
07-22 1670
Android自定义view实现扇形android可以通过Canvas实现各种形状，其中drawArc这个方法可以绘制弧形。public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) oval :指定圆弧的外轮廓矩形区域。 startAngle: 圆弧起始角度，
Android自定义View——环形进度条
qq_36046305的博客
12-06 558
自定义View 让我们先从一个简单的例子入手： 一个简单的环形进度条，在进度条前端位置加一个白色小圆点，然后还有一个进度加载动画。 首先我们分析一下这个自定义View包含了以下几个部分： 圆环背景 圆环进度 白色小圆点 加载动画 大概就只有这几个部分组成。 第一步：首先我们要新建一个自定义的类继承系统的View类： public class CircleProgress extends Vi...
python读取excel画出饼状图_利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图...
最新发布
05-28
可以使用Python中的pandas和matplotlib库来读取Excel表格并绘制各种图表，其中饼图可以使用matplotlib库的pyplot模块来实现。以下是一个简单的例子： ```python import pandas as pd import matplotlib.pyplot as ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值