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

概述为何要用带动画的柱状图呢？最近，项目中遇到一个地方，要用到柱状图。所以这篇文章主要讲怎么搞一个柱子。100行代码，搞定柱状图!

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

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

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

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

关于尺寸

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

关于数据范围

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

关于数字的文字大小

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

关于边界值

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

关于动画

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

完整代码如下：

package com.lixiaodaoaaa.vIEw.pIEvIEw;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.vIEw.VIEw;import com.gCSSloop.graphics.R;import com.lixiaodaoaaa.uitls.DensityUtils;/************************************** * *** http://weibo.com/lixiaodaoaaa ** * *** create at 2017/5/18  23:45 **** * ******* by:lixiaodaoaaa ********** **************************************/public class PColumn extends VIEw {  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 = new Paint();    mPaint.setAntiAlias(true);    mcolor = mContext.getResources().getcolor(R.color.colorPrimary);    mPaint.setcolor(mcolor);  }  @OverrIDe  public voID draw(Canvas canvas) {    super.draw(canvas);    if (data == 0) {      mPaint.setTextSize(getWIDth() / 2);      RectF oval3 = new RectF(0,getHeight() - DensityUtils.pxTodip(mContext,20),getWIDth(),getHeight());// 设置个新的长方形      canvas.drawRoundRect(oval3,DensityUtils.pxTodip(mContext,corner),mPaint);      canvas.drawText("0",getWIDth() * 0.5f - mPaint.measureText("0") * 0.5f,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 = new RectF(0,getHeight() - realH,getHeight());// 设置个新的长方形    canvas.drawRoundRect(oval3,mPaint);    //写数字    canvas.drawText(S,getWIDth() * 0.5f - mPaint.measureText(S) * 0.5f,getHeight() - realH - 2 * DensityUtils.pxTodip(mContext,mPaint);    if (tempData != data) {      postInvalIDate();    }  }  public voID setData(int data,int MAX) {    this.data = data;    tempData = 0;    this.MAX = MAX;    postInvalIDate();  }}

/* * copyright 2016 GCSSloop * * licensed under the Apache license,Version 2.0 (the "license"); * you may not use this file except in compliance with the license. * You may obtain a copy of the license at * *  http://www.apache.org/licenses/liCENSE-2.0 * * Unless required by applicable law or agreed to in writing,software * distributed under the license is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implIEd. * See the license for the specific language governing permissions and * limitations under the license. * * Last modifIEd 2016-10-02 00:22:33 * */package com.lixiaodaoaaa.graphics;import androID.os.Bundle;import androID.support.v7.app.AppCompatActivity;import com.gCSSloop.graphics.R;import com.lixiaodaoaaa.vIEw.pIEvIEw.PColumn;public class MainActivity extends AppCompatActivity {  private PColumn column_one;  private PColumn column_two;  private PColumn column_three;  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_main);    initAllVIEws();  }  private voID initAllVIEws() {    column_one = (PColumn) findVIEwByID(R.ID.column_one);    column_two = (PColumn) findVIEwByID(R.ID.column_two);    column_three = (PColumn) findVIEwByID(R.ID.column_three);    column_one.setData(0,100);    column_two.setData(30,100);    column_three.setData(40,100);  }}

xml配置如下：

<?xml version="1.0" enCoding="utf-8"?><linearLayout  xmlns:androID="http://schemas.androID.com/apk/res/androID"  xmlns:tools="http://schemas.androID.com/tools"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:layout_weight="1"  androID:paddingBottom="@dimen/activity_vertical_margin"  androID:paddingleft="@dimen/activity_horizontal_margin"  androID:paddingRight="@dimen/activity_horizontal_margin"  androID:paddingtop="@dimen/activity_vertical_margin"  tools:context="com.lixiaodaoaaa.graphics.MainActivity">  <VIEw    androID:layout_wIDth="0dp"    androID:layout_height="match_parent"    androID:layout_weight="0.2"/>  <com.lixiaodaoaaa.vIEw.pIEvIEw.PColumn    androID:ID="@+ID/column_one"    androID:layout_wIDth="0dp"    androID:layout_height="match_parent"    androID:layout_weight="1"/>  <VIEw    androID:layout_wIDth="0dp"    androID:layout_height="match_parent"    androID:layout_weight="2.4"/>  <com.lixiaodaoaaa.vIEw.pIEvIEw.PColumn    androID:ID="@+ID/column_two"    androID:layout_wIDth="0dp"    androID:layout_height="match_parent"    androID:layout_weight="1"/>  <VIEw    androID:layout_wIDth="0dp"    androID:layout_height="match_parent"    androID:layout_weight="2.4"/>  <com.lixiaodaoaaa.vIEw.pIEvIEw.PColumn    androID:ID="@+ID/column_three"    androID:layout_wIDth="0dp"    androID:layout_height="match_parent"    androID:layout_weight="1"/>  <VIEw    androID:layout_wIDth="0dp"    androID:layout_height="match_parent"    androID:layout_weight="0.2"/></linearLayout>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的100行Android代码轻松实现带动画柱状图全部内容，希望文章能够帮你解决100行Android代码轻松实现带动画柱状图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。