为何要用带动画的柱状图呢？
最近，项目中遇到一个地方，要用到柱状图。所以这篇文章主要讲怎么搞一个柱子。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), 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 = 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, 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(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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。