自定义android控件，柱状图统计

最新推荐文章于 2021-05-29 11:02:00 发布
最新推荐文章于 2021-05-29 11:02:00 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： android Android 统计 文章标签： android Android android统计 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz3hh/article/details/8155523
版权

代码没有格式化，对您的读解造成不便请谅解

 

代码如下：

 

package com.controls;

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

public class DoubleHistogram extends View {

 private int mAscent;

 private String mText = "";
 
 // X轴
 public static float XLength = 600.f;

 // Y轴
 public static float Ylength = 300.0f;

 // X轴最大值
 public static float XMAXLENGTH = 2500.0f;

 // Y轴最大值
 public static float YMAXLENGTH = 250.0f;

 // 画笔
 private static Paint paint;

 // 距离屏幕左边的距离
 private static float marginleft = 40;

 // 距离屏幕上边的距离
 private static float margintop = 60;

 // 统计图的标题
 public String topNoteText = "";

 // 实际提示信息
 public  String realityValuesNoteText = "计划订购金额";

 // 计划提示信息
 public String thinkValuesNoteText = "实际订购金额";

 // 平均刻度值
 public static int average = 40;

 // y轴刻度的平均值，需要几个刻度
 public static int yaverage = 6;

 // 以多少像素取几个刻度
 public static float faverage = 40;

 // x轴刻度的间距
 public static float xaverage = 40;

 /** 文本信息 **/
 private String[] noteTextValues = { "裤子", "文胸", "T恤", "衬衣", "保暖衣", "保暖裤", "头巾",
   "围巾" };

 /** 文本对应的值 **/
 private double[] realityValues ={600,200,100,200,845,855,544,655};

 private double[] thinkValues={355,145,554,451,453,455,455,452};
 
 /** 柱状图的颜色 **/
 public static int valuescolors = Color.parseColor("#C96118");

 /** 平均刻度值与实际刻度值的比 **/
 public static float xpaverage = 1;

 /** Y轴提示信息 **/
 public String yNoteText = "金额";

 /** X轴提示信息 **/
 public static String xText = "";
 /** 文本信息的间距 **/
 public static float yspace = 80;
 
 /**柱状的宽度**/
 private static float historgramspace=30;
 
 private float yrange=20f;
 
 /**背景颜色**/
 private int backColor=Color.WHITE;
 
 /**背后线条的颜色**/
 private int backLinesColor=Color.parseColor("#F1AAA3");
 
 /**计划数值的颜色**/
    private int thinkValuesColor=Color.RED;
 /**真实数值的颜色**/
 private int realityValuesColor=Color.GREEN;
 
 
 public DoubleHistogram(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  // TODO Auto-generated constructor stub
 }

 public DoubleHistogram(Context context, AttributeSet attrs) {
  super(context, attrs);
  // TODO Auto-generated constructor stub
 }

 public DoubleHistogram(Context context) {
  super(context);
  // TODO Auto-generated constructor stub
 }

 @Override
 protected void onDraw(Canvas canvas) {
  getWidthHeigth();//得到X轴和Y轴的最大长度
  getmaxyLength();//得到数据中的最大值，确定Y轴长度
  canvas.drawColor(backColor);//设置画布的背景色
  paint = new Paint();
  paint.setAntiAlias(true); //抗锯齿
  
  DrawXY(canvas);//画X，Y轴
  
  drawCentreNote(canvas);//画底部提示信息

  drawNoteText(canvas);//画头部提示的信息

  getyaverage();//得到可以有几个刻度

  getAverage(XMAXLENGTH);//得到一个刻度表示的值
  
  getxpaverage();//得到实际值对应的画布像素表示的值
  
  DrawYText(canvas);//画Y轴的信息
  
  DrawXText(canvas);//画X轴信息
  
  DrawXthinkText(canvas);//画柱状图
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  setMeasuredDimension(measureWidth(widthMeasureSpec),
    measureHeight(heightMeasureSpec));
 }
 
 /**
  * 此方法参照android开发说明文档
  * @param measureSpec
  * @return
  */
 private int measureWidth(int measureSpec) {
  paint=new Paint();
  int result = 0;
  int specMode = MeasureSpec.getMode(measureSpec);
  int specSize = MeasureSpec.getSize(measureSpec);

  if (specMode == MeasureSpec.EXACTLY) {
   // We were told how big to be
   result = specSize;
  } else {
   // Measure the text
   if(mText.equals("")){
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    result = (int) (metrics.widthPixels<getAcquiesceWhidth()?getAcquiesceWhidth():metrics.widthPixels+getPaddingLeft()
      + getPaddingRight());
   }else{
    result = (int) paint.measureText(mText) + getPaddingLeft()
      + getPaddingRight();
   }
   
   if (specMode == MeasureSpec.AT_MOST) {
    // Respect AT_MOST value if that was what is called for by
    // measureSpec
    result = Math.min(result, specSize);
   }
  }

  return result;
 }
 /**
  * Determines the height of this view
  *
  * @param measureSpec
  *            A measureSpec packed into an int
  * @return The height of the view, honoring constraints from measureSpec
  */
 private int measureHeight(int measureSpec) {
  paint = new Paint();
  int result = 0;
  int specMode = MeasureSpec.getMode(measureSpec);
  int specSize = MeasureSpec.getSize(measureSpec);

  mAscent = (int) paint.ascent();
  if (specMode == MeasureSpec.EXACTLY) {
   // We were told how big to be
   result = specSize;
  } else {
   if (mText.equals("")) {
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    result = (int) (metrics.heightPixels - 150 + getPaddingLeft() + getPaddingRight());
   } else {
    result = (int) (-mAscent + paint.descent()) + getPaddingTop()
      + getPaddingBottom();
   }
   if (specMode == MeasureSpec.AT_MOST) {
    result = Math.min(result, specSize);
   }
  }
  return result;
 }
 
 /**
  * 得到实际需要的宽度
  * @return
  */
 public float getAcquiesceWhidth(){
  float rtn=100;
  if(noteTextValues.length>0){
   rtn=getPaddingLeft()+40+(yspace*(noteTextValues.length+1));
  }
  return rtn;
 }
 /**
  * 得到X轴Y轴的长度
  */
 private void getWidthHeigth() {
  
  marginleft = getPaddingLeft() + 50f;
  margintop = getPaddingTop()+30f;
  // X轴
  XLength = getWidth();
  // Y轴
  Ylength = getHeight() - 70;
 }
 
 /**
  * 得到最大值
  */
 public void getmaxyLength() {
  double temp = thinkValues[0];
  for (int i = 1; i < thinkValues.length; i++) {
   if (temp < thinkValues[i]) {
    temp = thinkValues[i];
   }
  }
  for (int i = 0; i <realityValues.length; i++) {
   if (temp < realityValues[i]) {
    temp = realityValues[i];
   }
  }
  XMAXLENGTH = (float) temp;
 }
 
 /**
  * 画X，Y轴线
  * @param canvas
  */
   public void DrawXY(Canvas canvas) {
  paint.setColor(Color.BLACK);
  canvas.drawLine(marginleft, margintop, marginleft, Ylength, paint);
  canvas.drawLine(marginleft, Ylength, XLength, Ylength, paint);
 }
  
   /**
  * 提示信息画中心
  * @param canvas
  */
 public void drawCentreNote(Canvas canvas) {
  float temp=XLength/2;//得到屏幕中间的像素值
  paint.setColor(thinkValuesColor);//设置颜色
  paint.setTextSize(15);//设置字体
  
  float textLength=temp-paint.measureText(thinkValuesNoteText);
  //画矩形
  canvas.drawRect(textLength-30, Ylength+45, textLength-20, Ylength+55, paint);

  paint.setColor(Color.BLACK);
  //画提示信息
  canvas.drawText(thinkValuesNoteText, textLength-10, Ylength+55, paint);
  
  paint.setColor(realityValuesColor);
  
  //画矩形
  canvas.drawRect(temp+10, Ylength+45, temp+20, Ylength+55, paint);
  
  paint.setColor(Color.BLACK);
  //画提示信息
  canvas.drawText(realityValuesNoteText, temp+30, Ylength+55, paint);
  
  canvas.drawText("0", marginleft-10f, Ylength+10, paint);
 
 }
 
 /**
  * 画头部提示信息
  * @param canvas
  */
 public void drawNoteText(Canvas canvas) {
  paint.setColor(Color.BLACK);
  paint.setTextSize(20);

  canvas.drawText(topNoteText,
    ((float) ((XLength - paint.measureText(topNoteText)) / 2)), margintop+20,
    paint);
 }
 
 public void getyaverage() {
  yaverage = (int) ((Ylength - margintop - 10) % faverage == 0.0 ? (Ylength
    - margintop - 10)
    / faverage
    : (Ylength - margintop - 10) / faverage);
 }
 
 public String getAverage(double d) {
  String strRtn = "0";
  int intnum = (int) (d / yaverage);

  int inttemp = Integer
    .valueOf(getNumber(String.valueOf(intnum).length()));
  if (inttemp == 1) {
   strRtn = String
     .valueOf((int) (d % yaverage) == 0 ? ((int) (d / yaverage))
       : ((int) (d / yaverage) + 1));
  } else {
   strRtn = String.valueOf(intnum % inttemp == 0 ? (intnum / inttemp)
     * inttemp : (intnum / inttemp + 1) * inttemp);
  }
  average = Integer.valueOf(strRtn);
  Log.v("msg", "average = " + String.valueOf(average) + " YMAXLENGTH = "
    + String.valueOf(YMAXLENGTH));
  return strRtn;
 }
 
 public String getNumber(int num) {
  String strRtn = "1";
  if (num > 0) {
   for (int i = 0; i < num - 1; i++) {
    strRtn += "0";
   }
  }
  return strRtn;
 }
 
 public void getxpaverage() {
  xpaverage = average / faverage;
  Log.v("msg", "xp =" + String.valueOf(xpaverage));
 }
 
 /**
  * 画Y轴的信息
  * @param canvas
  */
 public void DrawYText(Canvas canvas) {
  Float temp = 0.0f;
  paint.setTextSize(12);
  for (int i = 1; i < yaverage+1; i++) {
   paint.setColor(Color.BLACK);
   temp = Ylength - Float.valueOf(faverage * i);
//   canvas.drawLine(marginleft-10, temp, marginleft, temp, paint);
   canvas.drawText(
     String.valueOf(Integer.valueOf(average) * i),
     marginleft-paint.measureText(String.valueOf(Integer.valueOf(average) * i))-5.0f, temp + 4.5f, paint);
   paint.setColor(backLinesColor);
   canvas.drawLine(marginleft, temp, XLength, temp, paint);
  }
 }
 /**
  * 画X轴的信息
  * @param canvas
  */
 public void DrawXText(Canvas canvas) {
  paint.setColor(Color.BLACK);
  float temp=marginleft+historgramspace+yrange;
  for(int i=0;i<noteTextValues.length;i++){
   canvas.drawLine(temp,Ylength, temp, Ylength+5f, paint);
   canvas.drawText(noteTextValues[i], temp-paint.measureText(noteTextValues[i])/2, Ylength+20f, paint);
   temp +=yspace;
  }
 }
 
 /**
  * 画柱状图
  * @param canvas
  */
    public void DrawXthinkText(Canvas canvas) {
  
  float temp=marginleft+historgramspace+yrange;
  for(int i=0;i<thinkValues.length;i++){
   paint.setColor(thinkValuesColor);
   canvas.drawRect(temp-historgramspace,  Ylength-(float)(thinkValues[i]/xpaverage), temp, Ylength, paint);
   canvas.drawText(String.valueOf((int)thinkValues[i]), temp-historgramspace/2-paint.measureText(String.valueOf((int)thinkValues[i]))/2, (float) (Ylength-thinkValues[i]/xpaverage-3.0f), paint);
   
   paint.setColor(realityValuesColor);
   canvas.drawRect(temp,  Ylength-(float)(realityValues[i]/xpaverage), temp+historgramspace, Ylength, paint);
   canvas.drawText(String.valueOf((int)realityValues[i]), temp+historgramspace/2-paint.measureText(String.valueOf((int)realityValues[i]))/2, (float) (Ylength-realityValues[i]/xpaverage-3.0f), paint);
   temp +=yspace;
  }
 }
}

 

 

配置文件

main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.controls.DoubleHistogram
        android:id="@+id/s1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

 

web前端-白小白
关注
专栏目录
Android:自定义组件绘制柱状统计图
01-22
Android:自定义组件绘制柱状统计图，有问题请在博文中评论。 对应博文：http://blog.csdn.net/books1958/article/details/43018107
android MpAndroidChart 统计图使用
最新发布
qq_35491100的博客
03-15 897
Mpandroidchart 使用
Android 双颜色柱形图,MPAndroidChart---双柱形示例（提供完整代码）
weixin_30896451的博客
05-29 716
需求：绘制12个月份的温度和风极双柱形效果图：双柱形示意图完整源码：public class TwoBarChartActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContent...
Android自定义View——柱状图
热门推荐
菜鸟的自我修养
10-04 1万+
之前的文章已经介绍了怎么绘制饼图和曲线图，今天这里介绍另一种常用的统计图——柱状图。 依旧是看一下效果图： 可以看到，图中有两幅柱状图，这里简单说明一下：第一幅是单柱状图，是根据同一组数据绘制的，每个柱子间距相 同，相邻柱子用两种颜色区分，视觉效果好一点；第二幅是双柱状图，是根据两组数据绘制的，同一刻度两组数据之 间间距相同，且用不同颜色区分两组数据，刻度与刻度之间的间距是根据数据
自定义控件-- 柱状图--Android
quanjin24k的专栏
08-31 2736
开篇博客就说过， 有时间了就把自己项目中自定义的控件专门记录下；       大家都知道，Android传统的控件样式大多数情况都不能很好的满足我们的实际需求，其实最好的办法就是能找到网上高人们写好的开源控件，但是不是每次都那么凑巧让我们找得到吧？ 既然求爹爹告奶奶的到最后还是没有着落，干脆自己研究下怎么重写喽~      其实大部分我们看见的控件都继承自View，那么我们也可以继承Vie
Android自定义控件横向柱状统计图
08-18
Android自定义控件横向柱状统计图 Android自定义控件横向柱状统计图是Android开发中的一种常见的控件，主要用于展示数据的统计结果。该控件可以根据不同的需求进行自定义，从而满足不同的业务需求。 在Android中...
Android自定义view实现动态柱状图
08-29
本篇文章将深入探讨如何利用Android自定义View来实现动态柱状图。动态柱状图是一种常见且直观的数据展示方式，它能够以图形的形式生动地展示数据的变化，特别适用于数据分析和监控应用。 首先，我们看到一个名为`...
Android自定义控件实现饼状图
08-26
Android 自定义控件实现饼状图 ...10. 自定义控件的应用：自定义控件可以应用于各种场景，例如饼状图、柱状图、折线图等。在本例中，自定义控件用来实现饼状图的绘制，提供了一种灵活的方式来实现图形的绘制。
Android自定义饼状图、柱状图、双折线图
12-16
一开始是使用第三方的绘图框架Achartengine来绘制，能实现一大部分的图形。...为此小编我只能尝试着自己自定义一些图表类的控件。这里给大家带来可点击的饼状图、可点击以及可滑动的柱状图、双折线图
Android 自定义控件 (一) 绘制 柱状图 ,支持触摸操作
吃狗屎糖，走狗屎运...
12-12 3384
项目中，经常会用到统计图表，个性化展示数据，增加趣味性，之前也用过百度Echarts来展示，效果很不错，包括一些交互操作，不得不说，echarts帮我我们实现了绝大多数的需求，体积小不说，实现方式也很简单，后来想了想，为什么不用安卓Canvas绘制呢，毕竟是安卓开发攻城狮，下面就用Canvas绘制一个自带动画和触摸事件的柱状图 先来张效果图： 效果还是不错的, 这里我主要是...
自定义柱状图和自定义折线图
10-13
这是两个自定义的view，自定义的柱状图和自定义的折线图
Android代码-自定义的柱状图控件欢迎大家下载学习我的博客空间是httpblog.csdn.netls1110924viewmode=contents.zip
08-02
自定义的柱状图控件欢迎大家下载学习我的博客空间是httpblog.csdn.netls1110924viewmode=contents.zip
横向柱状图demo—Androidstudio.7z
03-21
横向柱状图，柱状图，安卓柱状图，自定义柱状图。不引用任何jar。直接用现有控件实现横向柱状图。
android 柱状图统计图形
07-05
好用的android图表插件，用于绘制柱状图，饼图，折线图等
Android自定义View实现柱状图--(简易版)
big_fff的博客
09-01 6772
自定义View是我们Android开发经常用到的东西,我们可以利用自定义view实现各种各样的效果,接下来就带大家看一下效果图 图片略丑....... 那么接下来直接上代码 public class HistogramView extends View { /** * 自定义view实现柱状图 * 首先定义一个类实现View */ //定...
D3-Android 自定义控件绘图之柱状图
张风捷特烈的博客
09-05 411
零、前言 [1].本控件绘图部分使用我的LogicCanvas绘图库：基础使用在此， [2].喜欢的话可以到github上看看，顺便给个star [3].今天突然发现竟然LogicCanvas绘图库，忘了绘制文字这个重要功能，赶紧加 [4].写完了，顺便写篇文章吧，基于LogicCanvas实现坐标系及网格(已内置)，再画个柱状图看看吧 网格...
Android自定义统计图(柱状图，折线图，饼状图)
u014386474的博客
08-17 1191
最近由于项目需要，研究了一些统计图的做法，开始时，看了很多博文，大部分都是引用第三方的库，虽然简单， 易上手，但是功能太死板，有很多要求都是不能满足的，所以经过研究，自己使用View中的canvas重新绘图制作 统计图。首先上几张的效果图吧。       点击这里下载（0分下载）   一、demo的结构 一个activity中嵌套了三个
Android 自定义控件--横向柱状图
我对你付出的青春，那么执着
12-15 6830
摘要本文主要内容是：在Android系统下自定义图形。效果如下图：思路如上图所示，我们应该把问题简单化，看上去图片是有规律的，类似一个列表，那么我们就当一列是一个Item吧。 再把一个Item分解： 分成文字和图形部分。文字部分文字部分就是对当个柱状图的说明，我们暂且叫他“itemName”吧。我们看到了itemName是右对齐的，那么我们就得获取所有数据的itemName,然后看谁最长，然后计算
Android 进阶自定义View（3）图表统计BarChartView柱状图的实现
weixin_33962923的博客
08-10 1228
《一》导语： 最近写了几个统计数据相关的图表，刚好放在自定义View这块的跟大家分享一下。对于图表这块，可能对于很多App的开发都用得不是很多，但是对于一些有数据分析统计需求相关的，例如P2P类型的，就比较常用了。不过我们可能也就需要用到那么一两个图表，例如：曲线图、折线图、柱状图，饼状图等等，只是对于不同的...
自定义Android控件：横向柱状统计图实现
这个自定义控件（HorizontalChartView）基于Android的View类扩展，并提供了基本的柱状图绘制功能。控件的核心在于通过传入数据来展示不同柱状的宽度和高度，从而形成统计图表。" 在Android应用开发中，有时需要根据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值