Android自定义控件横向柱状统计图

本文实例为大家分享了Android实现横向柱状统计图的具体代码,供大家参考,具体内容如下

碰到一个项目需要用到统计图功能,比较简单就自定义写了一个。没有写过多的样式和功能,仅有简单的横向柱状统计图。

传入数据后大致样式如下:

/**横向柱状统计图
 * Created by Administrator on 2018/1/16 0016.
 */
public class HorizontalChartView extends View {

 /**
  * 间隔线画笔
  */
 private Paint paint;

 /**
  * 线的颜色
  */
 private int color_line = Color.rgb(230, 230, 230);

 /**
  * 字的颜色
  */
 private int color_font = Color.rgb(51, 51, 51);

 /**
  * 比例图颜色
  */
 private int color_plan = Color.rgb(22, 85, 164);

 /**
  * 比例图画笔
  */
 private Paint paint_plan;

 /**
  * 比例图高度
  */
 private int plan_height;

 /**
  * 初始化比例
  */
 private Float[] ratio = {0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f};

 /**
  * 文字画笔1
  */
 private Paint paint_font;

 /**
  * 文字画笔2
  */
 private Paint paint_font2;

 /**
  * 线的条数
  */
 private int line_num = 11;

 /**
  * 比例数
  */
 private String ratio_num = "0";

 /**
  * 月份
  */
 private String month_num = "1月";

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

 public HorizontalChartView(Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  init(context, attrs);
 }

 public HorizontalChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs);
 }

 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
 public HorizontalChartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  super(context, attrs, defStyleAttr, defStyleRes);
  init(context, attrs);
 }

 /**
  * 初始化
  *
  * @param context
  * @param attrs
  */
 public void init(Context context, AttributeSet attrs) {

  paint = new Paint();
  paint.setColor(color_line);

  paint_plan = new Paint();
  paint_plan.setColor(color_plan);

  paint_font = new Paint();
  paint_font.setColor(color_font);
  paint_font.setTextSize(DensityUtils.dp2px(context, 12));
  paint_font.setAntiAlias(true);
  paint_font.setTextAlign(Paint.Align.CENTER);

  paint_font2 = new Paint();
  paint_font2.setColor(color_font);
  paint_font2.setTextSize(DensityUtils.dp2px(context, 12));
  paint_font2.setAntiAlias(true);
  paint_font2.setTextAlign(Paint.Align.RIGHT);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  int width = getWidth();
  int height = getHeight();

  int lift_width = (int) (width * 0.15);
  int line_width = (int) (width * 0.78);
  //获取底部文字信息
  Paint.FontMetrics fm = paint_font.getFontMetrics();

  int line_length = (int) (height - (fm.bottom - fm.top) - 4);

  plan_height = (int) (line_length / 12 * 0.3);

  for (int i = 0; i < line_num; i++) {
   canvas.save();

   if (i == 0) {
    ratio_num = "0";
   } else {
    ratio_num = i + "0";
   }
   //底部百分比数字
   canvas.drawText(ratio_num, lift_width + i * line_width / 10, height - 10, paint_font);
   //网络线
   canvas.drawLine(lift_width + i * line_width / 10, 0, lift_width + i * line_width / 10, line_length, paint);
   canvas.restore();
  }
  //获取月份文字信息
  Paint.FontMetrics fm1 = paint_font2.getFontMetrics();
  for (int n = 12; n > 0; n--) {
   canvas.save();
   month_num = n + "月";
   //左侧月份
   canvas.drawText(month_num, lift_width / 4 * 3, ((line_length / 12)) * (13 - n) - line_length / 24 + (fm1.bottom - fm1.top) / 2, paint_font2);
   //比例图
   canvas.drawRect(lift_width, line_length / 12 * (13 - n) - (line_length / 24 + plan_height / 2) + fm1.bottom,
     line_width * (ratio[n - 1] / 100) + lift_width, line_length / 12 * (13 - n) - (line_length / 24 + plan_height / 2) + plan_height + fm1.bottom, paint_plan);

   canvas.restore();
  }
 }

 /**
  * 传入比例信息
  *
  * @param ratio
  */
 public void setRatio(Float[] ratio) {
  this.ratio = ratio;
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android APT 实现控件注入框架SqInject的示例

    作者 大家好,我叫小鑫,也可以叫我蜡笔小鑫

  • Android实现简单的下拉刷新控件

    背景:列表控件在Android App开发中用到的场景很多.在以前我们用ListView,GradView,现在应该大多数开发者都已经在选择使用RecyclerView了,谷歌给我们提供了这些方便的列表控件,我们可以很容易的使用它们.但是在实际的场景中,我们可能还想要更多的能力,比如最常见的列表下拉刷新,上拉加载.上拉刷新和下拉加载应该是列表的标配吧,基本上有列表的地方都要具体这个能力.虽然刷新这个功能已经有各种各样的第三方框架可以选择,但是毕竟不是自己的嘛,今天我们就来实现一个自己的下拉刷新控

  • Android Studio给各种控件加边框的操作方法

    Android Studio给Textview,EditText控件加边框 如图所示,给一些edittext,TextView,还有一些控件组,进度条加上一个粉红色的边框. 看着很好看,其实非常简单,很容易实现,我们只需要设计一个想要的效果,然后使用我们设计的效果就好了. 首先设计我们想要的边框效果 首先我们先在drawable下面新建一个xml文件,先右击res文件夹选择"new",然后选择Android Resource File 接下来会弹出一个窗口,注意Resource Typ

  • android实现圆环倒计时控件

    本文实例为大家分享了android实现圆环倒计时控件的具体代码,供大家参考,具体内容如下 1.自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <!-- 倒计时控件属性 --> <declare-styleable name="CountDownView"> <!--颜色--> <attr name="rin

  • Android自定义view实现倒计时控件

    本文实例为大家分享了Android自定义view实现倒计时控件的具体代码,供大家参考,具体内容如下 直接上代码 自定义TextView 文字展示 public class StrokeTextView extends TextView { private TextView borderText = null;///用于描边的TextView private Context mContext; public StrokeTextView(Context context) { super(conte

  • Android日期选择控件使用详解

    本文实例为大家分享了Android日期选择控件的使用方法,供大家参考,具体内容如下 1.创建dialog 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" an

  • 详解Android控件状态依赖框架

    在生产型Android客户端软件(企业级应用)开发中,界面可能存在多个输入(EditText)和多个操作(MotionEvent和KeyEvent),且操作依赖于输入的状态.如下图所示的场景: 设定图中 确认操作依赖于商品编码和储位的状态 跳过操作不依赖于输入状态 登记差异操作依赖于储位和数量的状态 输入框有三种状态: 待输入: 待校验: 校验成功. 操作需要当其依赖的输入数据校验成功,才能执行. 如果在Activity中去判断输入框状态,那么实际需要调用(3个输入框)*(3种状态)*(3个按钮

  • Android自定义控件横向柱状统计图

    本文实例为大家分享了Android实现横向柱状统计图的具体代码,供大家参考,具体内容如下 碰到一个项目需要用到统计图功能,比较简单就自定义写了一个.没有写过多的样式和功能,仅有简单的横向柱状统计图. 传入数据后大致样式如下: /**横向柱状统计图 * Created by Administrator on 2018/1/16 0016. */ public class HorizontalChartView extends View { /** * 间隔线画笔 */ private Paint

  • Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】

    本文实例讲述了Android编程实现canvas绘制柱状统计图功能.分享给大家供大家参考,具体如下: 这里实现了一个简单的柱状统计图,如下:   特点: 1.根据数据源自动计算每个条目的高度.宽度.间距,自动计算分度值. 2.当条目数较多时,可左右滑动查看全部内容,图形.文字同步滑动,并且松手后会渐渐的停下来(而不是立刻停下来). 代码: (1)核心代码:BarChartView.Java package com.sina.appbarchart; import android.app.Acti

  • Python画柱状统计图操作示例【基于matplotlib库】

    本文实例讲述了Python画柱状统计图操作.分享给大家供大家参考,具体如下: 一.工具:python的matplotlib.pyplot 库 二.案例: import matplotlib.pyplot as plt import numpy as np #添加图形属性 plt.xlabel('Age range') plt.ylabel('Number') plt.title('The statistics of face age dataset') a = plt.subplot(1, 1,

  • Android自定义控件实现饼状图

    本文实现一个如图所示的控件,包括两部分,左边的饼状图和中间的两个小方块,及右边的两行文字 实现起来比较简单,只是一些绘图API的调用 核心代码在onDraw函数里边,对静态控件进行绘制即可 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); /** * 饼状图的x坐标 */ float centreX= getWidth()/5; /** * 饼状图的y坐标 */ float centreY= getHei

  • Android自定义View实现多边形统计图示例代码

    前言   最近利用空闲时间学习了自定义View的一些知识,为了巩固,写了一个小东西,顺便分享出来,下面话不多说了,来一起看看详细的介绍吧. 简介   一个多边形统计图.边数,每个方向的值,每个点的文字等等都是可以设置的. 下面就来分析一下这个自定义View 这个view由以下几个部分组成 M层N边形 中心到各顶点的连线 填充区域 文字 @Override protected void onDraw(Canvas canvas) { if (!canDraw()) { return; } canv

  • javascript实现的柱状统计图表

    工作需要,用javascript做一个统计图表: 完成后,做个笔记,大家分享一下,互相学习.其中还有点问题,还不是很完善. 其中参考了百度空间,中管理中心,访问统计,的js统计图表.但是应用上还是有差别,因为我做的这个项目中,需要时实的绘制新的统计表格,当有数据变化的时候,就会调用绘制表格的方法.所以要考虑页面性能的问题. 下面是完成后的预览图,可以看到,绘制一个表格,耗时0.005毫秒,也就是200分之一秒.效率我还是比较满意的! 目前在firefox,chrome,IE8,正常没问题,IE6

  • Android自定义View实现柱状波形图的绘制

    目录 前言 实现 基本属性 设计监听器 绘制图形 左右拖动 完整代码 前言 柱状波形图是一种常见的图形.一个个柱子按顺序排列,构成一个波形图. 柱子的高度由输入数据决定.如果输入的是音频的音量,则可得到一个声波图. 在一些音频软件中,我们也可以左右拖动声波,来改变音频的播放进度 本文举例的自定View,实现如下功能: 以柱状形式展示数据的大小 标明图形当前最中间的数据 可以横向拖动进度,进度就是让某个特定的数据居中展示 可以改变左右两边的柱子颜色 可以调整柱子的宽度 拖动完毕后监听当前进度 实现

  • Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】

    本文实例讲述了Android编程实现canvas绘制饼状统计图功能.分享给大家供大家参考,具体如下: 本例的目的是实现一个简单的饼状统计图,效果如下:    特点: 1.使用非常方便,可放在xml布局文件中,然后在代码中设置内容,即: PieChartView pieChartView = (PieChartView) findViewById(R.id.pie_chart); PieChartView.PieItemBean[] items = new PieChartView.PieItem

  • Android 实现会旋转的饼状统计图实例代码

    Android 实现会旋转的饼状统计图实例代码 最近在做一个项目,由于有需要统计的需要,于是就做成了下面饼状统计图. 下图是效果图: 大致思路是: 关于的介绍这里不做详细介绍,如果想深入请点击开源项目MPAndroidChart 下面是其实现: 首先是添加MPAndroidChart依赖: maven { url "https://jitpack.io" } compile 'com.github.PhilJay:MPAndroidChart:v3.0.1' Mainactivity

  • vue+echarts实现条纹柱状横向图

    本文实例为大家分享了vue+echarts实现条纹柱状横向图的具体代码,供大家参考,具体内容如下 实现效果: <template>   <div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div> </template> <script> import { getNoteM

随机推荐