欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-11-29 20:07:40
先看一下动态柱状图效果。 主要功能是可以自定义指定的字体,柱状图颜色,动态效果。 在自定义view public class histogra...

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

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

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

在自定义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代码轻松实现带动画柱状图

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