当前位置： 移动技术网 > IT编程>移动开发>Android > Android自定义view实现动态柱状图

Android自定义view实现动态柱状图

2019年07月24日  | 移动技术网IT编程  | 我要评论

丁乐锶,金色风铃曲谱网,天父的儿女

先看一下动态柱状图效果。

主要功能是可以自定义指定的字体，柱状图颜色，动态效果。

在自定义view

public class histogram extends view {
 int max = 100;//矩形显示的最大值
 int corner = 0; //矩形的角度。 设置为0 则没有角度。
 double data = 0.0;//显示的数
 double tempdata = 0; //初始数据
 int textpadding = 50; //字体与矩形图的距离
  paint mpaint;
 int mcolor;
  context mcontext;


 //构造函数
 public histogram(context context) {
  super(context);
  mcontext = context;
 }

 public histogram(context context, @nullable attributeset attrs) {
  super(context, attrs);
  mcontext = context;
  initpaint();
 }

 public histogram(context context, @nullable 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.gary);
  mpaint.setcolor(mcolor);
 }

 @override
 public void draw(canvas canvas) {
  super.draw(canvas);

  if (data == 0.0) {
   mpaint.settextsize(getwidth() / 2);
   rectf oval3 = new rectf(0, getheight() - densityutils.pxtodip(mcontext, 20), getwidth(), getheight());// 设置个新的长方形
   canvas.drawroundrect(oval3, densityutils.pxtodip(mcontext, corner), densityutils.pxtodip(mcontext, corner), mpaint);

   canvas.drawtext("0",
     getwidth() * 0.5f - mpaint.measuretext("0") * 0.5f,
     getheight() - densityutils.pxtodip(mcontext, 20) - 2 * densityutils.pxtodip(mcontext, textpadding),
     mpaint);
   return;
  }

  //防止数值很大的的时候，动画时间过长
  int step = (int) (data / 100 + 1.0);

  if (tempdata < data - step) {
   tempdata = tempdata + step;
  } else {
   tempdata = data;
  }
  //画圆角矩形
  string s = tempdata + ""; //如果数字后面需要加% 则在""中添加%
  //设置显示的字体
  typeface typeface = typeface.createfromasset(getcontext().getassets(),"digital-7.ttf");
  mpaint.settypeface(typeface);
//  //一个字和两,三个字的字号相同
  if (s.length() < 4) {
   mpaint.settextsize(getwidth()/2 );
  } else {
   mpaint.settextsize(50); //可以通过getwidth()/2 改变字体大小 也可以通过设置数字来改变自己想要的字体大小 当超出矩形图宽度时不能显示全部
  }
//
  float texth = mpaint.ascent() + mpaint.descent();
  float maxh = getheight() - texth - 2 * densityutils.pxtodip(mcontext, textpadding);
//  //圆角矩形的实际高度
  float realh = (float) (maxh / max * tempdata);
  rectf oval3 = new rectf(0, getheight() - realh, getwidth(), getheight());// 设置个新的长方形
  canvas.drawroundrect(oval3, densityutils.pxtodip(mcontext, corner), densityutils.pxtodip(mcontext, corner), mpaint);
  //写数字
  canvas.drawtext(s,
    getwidth() * 0.5f - mpaint.measuretext(s) * 0.5f,
    getheight() - realh - 2 * densityutils.pxtodip(mcontext, textpadding),
    mpaint);
  if (tempdata != data) {
   postinvalidate();
  }
 }

 public void setdata(double data, int max) {
  this.data = data;
  this.max = max;
  postinvalidate();
 }

 public int getmcolor() {
  return mcolor;
 }

 public void setmcolor(int mcolor) {
  this.mcolor = mcolor;
 }

}

布局

<?xml version="1.0" encoding="utf-8"?>
<linearlayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 >
 <view
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="0.2"/>
 <com.mieasy.myhistogramview.histogram
  android:id="@+id/column_one"
  android:layout_width="0dp"
  android:layout_height="300dp"
  android:layout_weight="0.8"/>

 <view
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="2.4"/>

 <com.mieasy.myhistogramview.histogram
  android:id="@+id/column_two"
  android:layout_width="0dp"
  android:layout_height="300dp"
  android:layout_weight="1"/>

 <view
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="2.4"/>

 <com.mieasy.myhistogramview.histogram
  android:id="@+id/column_three"
  android:layout_width="0dp"
  android:layout_height="300dp"
  android:layout_weight="1"/>
 <view
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="0.2"/>


</linearlayout>

mainactivity调用initallviews()方法

 private void initallviews() {
  column_one = (histogram) findviewbyid(r.id.column_one);
  column_two = (histogram) findviewbyid(r.id.column_two);
  column_three = (histogram) findviewbyid(r.id.column_three);

  column_one.setdata( 20.22, 100);
  column_two.setdata(30.2, 100);
  column_three.setdata(40, 100);
  column_one.mpaint.setcolor(getresources().getcolor(r.color.coloraccent)); //改变柱状图的颜色
 }

参考文章：100行android代码轻松实现带动画柱状图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网