100行Android代码轻松实现带动画柱状图

为何要用带动画的柱状图呢？

最近，项目中遇到一个地方，要用到柱状图。所以这篇文章主要讲怎么搞一个柱子。100行代码，搞定柱状图!

圆角，头顶带数字。恩，这样用draable也可以搞定。，这个柱子是有一个动画的，就是进入到界面的时候柱子不断的长高。这样的话，综合考虑还是用自定义Vie来做比较简便。效果如下图了

完整Demo地址请到我的github下载地址
https://github./lixiaodaoaaa/ColumnAnimVieProject

关于尺寸

控件尺寸直接来自xml中的设置，无需进行onMeasure测量。所以使用getWidth和getHeight获取高度。

关于数据范围

数据如果是一个柱子单独显示，则数据的范围不是很重要，柱状图通常是由很多柱子并列显示的，而这些柱子的单位高度都应该是一样的，所以提供设置最大值的范围，最小值就是0.

关于数字的文字大小

由于柱子的宽度就是整个Vie的宽度，所以数字的宽度不能超过柱子的宽度。因为这个原因，文字的size需要动态计算。意思就是 0和100000这两个数字显示的时候，文字的大小是不一样的。

关于边界值

0，是一个边界值（最小值），当显示0的时候，并不是柱子不显示的，而是显示一个最小高度的。

关于动画

不停的设置值，就会形成动画。意思是先设置数据1，然后紧接着设数据2.3.4.5……一直到最终的显示值，就会有动画效果。如果最终数值很大，1,1,1的增加就会很慢，动画时间很长。

完整代码如下

package .lixiaodaoaaa.vie.pievie;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.vie.Vie;

import .gcssloop.graphics.R;
import .lixiaodaoaaa.uitls.DensityUtils;
public class PColumn extends Vie {
  int MAX = 100;//最大
  int corner = 40;
  int data = 0;//显示的数
  int tempData = 0;
  int textPadding = 20;
  Paint mPaint;
  int mColor;

  Context mContext;

  public PColumn(Context context) {
 super(context);
 mContext = context;
  }

  public PColumn(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 mContext = context;
 initPaint();
  }

  public PColumn(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 mContext = context;
 initPaint();
  }

  private void initPaint() {
 mPaint = ne Paint();
 mPaint.setAntiAlias(true);
 mColor = mContext.getResources().getColor(R.color.colorPrimary);
 mPaint.setColor(mColor);
  }

  @Override
  public void dra(Canvas canvas) {
 super.dra(canvas);

 if (data == 0) {
   mPaint.setTextSize(getWidth() / 2);
   RectF oval3 = ne RectF(0, getHeight() - DensityUtils.pxTodip(mContext, 20), getWidth(), getHeight());// 设置个新的长方形
   canvas.draRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);

   canvas.draText("0",
   getWidth()  0.5f - mPaint.measureText("0")  0.5f,
   getHeight() - DensityUtils.pxTodip(mContext, 20) - 2  DensityUtils.pxTodip(mContext, textPadding),
   mPaint);
   return;
 }

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

 if (tempData < data - step) {
   tempData = tempData + step;
 } else {
   tempData = data;
 }
 //画圆角矩形
 String S = tempData + "";
 //一个字和两,三个字的字号相同
 if (S.length() < 4) {
   mPaint.setTextSize(getWidth() / 2);
 } else {
   mPaint.setTextSize(getWidth() / (S.length() - 1));
 }

 float textH = mPaint.ascent() + mPaint.descent();
 float MaxH = getHeight() - textH - 2  DensityUtils.pxTodip(mContext, textPadding);
 //圆角矩形的实际高度
 float realH = MaxH / MAX  tempData;
 RectF oval3 = ne RectF(0, getHeight() - realH, getWidth(), getHeight());// 设置个新的长方形
 canvas.draRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);
 //写数字
 canvas.draText(S,
 getWidth()  0.5f - mPaint.measureText(S)  0.5f,
 getHeight() - realH - 2  DensityUtils.pxTodip(mContext, textPadding),
 mPaint);
 if (tempData != data) {
   postInvalidate();
 }
  }

  public void setData(int data, int MAX) {
 this.data = data;
 tempData = 0;
 this.MAX = MAX;
 postInvalidate();
  }

}

package .lixiaodaoaaa.graphics;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import .gcssloop.graphics.R;
import .lixiaodaoaaa.vie.pievie.PColumn;

public class MainActivity extends AppCompatActivity {

  private PColumn column_one;
  private PColumn column_to;
  private PColumn column_three;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentVie(R.layout.activity_main);

 initAllVies();
  }

  private void initAllVies() {
 column_one = (PColumn) findVieById(R.id.column_one);
 column_to = (PColumn) findVieById(R.id.column_to);
 column_three = (PColumn) findVieById(R.id.column_three);

 column_one.setData(0, 100);
 column_to.setData(30, 100);
 column_three.setData(40, 100);

  }

}

xml配置如下

  
  <.lixiaodaoaaa.vie.pievie.PColumn
 android:id="@+id/column_one"
 android:layout_idth="0dp"
 android:layout_height="match_parent"
 android:layout_eight="1"/>

  

  <.lixiaodaoaaa.vie.pievie.PColumn
 android:id="@+id/column_to"
 android:layout_idth="0dp"
 android:layout_height="match_parent"
 android:layout_eight="1"/>

  

  <.lixiaodaoaaa.vie.pievie.PColumn
 android:id="@+id/column_three"
 android:layout_idth="0dp"
 android:layout_height="match_parent"
 android:layout_eight="1"/>
  

完整Demo地址请到我的github下载地址
https://github./lixiaodaoaaa/ColumnAnimVieProject