查看: 316|回复: 0

[手机开发] 100行Android代码轻松实现带动画柱状图

发表于 2018-1-6 09:57:55

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

最近,项目中遇到一个地方,要用到柱状图。所以这篇文章主要讲怎么搞一个柱子。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的增加就会很慢,动画时间很长。

完整代码如下:

  1. package com.lixiaodaoaaa.view.pieview;
  2. import android.content.Context;
  3. import android.graphics.Canvas;
  4. import android.graphics.Paint;
  5. import android.graphics.RectF;
  6. import android.support.annotation.Nullable;
  7. import android.util.AttributeSet;
  8. import android.view.View;
  9. import com.gcssloop.graphics.R;
  10. import com.lixiaodaoaaa.uitls.DensityUtils;
  11. /**************************************
  12. * *** http://weibo.com/lixiaodaoaaa **
  13. * *** create at 2017/5/18 23:45 ****
  14. * ******* by:lixiaodaoaaa **********
  15. **************************************/
  16. public class PColumn extends View {
  17. int MAX = 100;//最大
  18. int corner = 40;
  19. int data = 0;//显示的数
  20. int tempData = 0;
  21. int textPadding = 20;
  22. Paint mPaint;
  23. int mColor;
  24. Context mContext;
  25. public PColumn(Context context) {
  26. super(context);
  27. mContext = context;
  28. }
  29. public PColumn(Context context, @Nullable AttributeSet attrs) {
  30. super(context, attrs);
  31. mContext = context;
  32. initPaint();
  33. }
  34. public PColumn(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  35. super(context, attrs, defStyleAttr);
  36. mContext = context;
  37. initPaint();
  38. }
  39. private void initPaint() {
  40. mPaint = new Paint();
  41. mPaint.setAntiAlias(true);
  42. mColor = mContext.getResources().getColor(R.color.colorPrimary);
  43. mPaint.setColor(mColor);
  44. }
  45. @Override
  46. public void draw(Canvas canvas) {
  47. super.draw(canvas);
  48. if (data == 0) {
  49. mPaint.setTextSize(getWidth() / 2);
  50. RectF oval3 = new RectF(0, getHeight() - DensityUtils.pxTodip(mContext, 20), getWidth(), getHeight());// 设置个新的长方形
  51. canvas.drawRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);
  52. canvas.drawText("0",
  53. getWidth() * 0.5f - mPaint.measureText("0") * 0.5f,
  54. getHeight() - DensityUtils.pxTodip(mContext, 20) - 2 * DensityUtils.pxTodip(mContext, textPadding),
  55. mPaint);
  56. return;
  57. }
  58. //防止数值很大的的时候,动画时间过长
  59. int step = data / 100 + 1;
  60. if (tempData < data - step) {
  61. tempData = tempData + step;
  62. } else {
  63. tempData = data;
  64. }
  65. //画圆角矩形
  66. String S = tempData + "";
  67. //一个字和两,三个字的字号相同
  68. if (S.length() < 4) {
  69. mPaint.setTextSize(getWidth() / 2);
  70. } else {
  71. mPaint.setTextSize(getWidth() / (S.length() - 1));
  72. }
  73. float textH = mPaint.ascent() + mPaint.descent();
  74. float MaxH = getHeight() - textH - 2 * DensityUtils.pxTodip(mContext, textPadding);
  75. //圆角矩形的实际高度
  76. float realH = MaxH / MAX * tempData;
  77. RectF oval3 = new RectF(0, getHeight() - realH, getWidth(), getHeight());// 设置个新的长方形
  78. canvas.drawRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);
  79. //写数字
  80. canvas.drawText(S,
  81. getWidth() * 0.5f - mPaint.measureText(S) * 0.5f,
  82. getHeight() - realH - 2 * DensityUtils.pxTodip(mContext, textPadding),
  83. mPaint);
  84. if (tempData != data) {
  85. postInvalidate();
  86. }
  87. }
  88. public void setData(int data, int MAX) {
  89. this.data = data;
  90. tempData = 0;
  91. this.MAX = MAX;
  92. postInvalidate();
  93. }
  94. }
复制代码
  1. /*
  2. * Copyright 2016 GcsSloop
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. * http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. *
  16. * Last modified 2016-10-02 00:22:33
  17. *
  18. */
  19. package com.lixiaodaoaaa.graphics;
  20. import android.os.Bundle;
  21. import android.support.v7.app.AppCompatActivity;
  22. import com.gcssloop.graphics.R;
  23. import com.lixiaodaoaaa.view.pieview.PColumn;
  24. public class MainActivity extends AppCompatActivity {
  25. private PColumn column_one;
  26. private PColumn column_two;
  27. private PColumn column_three;
  28. @Override
  29. protected void onCreate(Bundle savedInstanceState) {
  30. super.onCreate(savedInstanceState);
  31. setContentView(R.layout.activity_main);
  32. initAllViews();
  33. }
  34. private void initAllViews() {
  35. column_one = (PColumn) findViewById(R.id.column_one);
  36. column_two = (PColumn) findViewById(R.id.column_two);
  37. column_three = (PColumn) findViewById(R.id.column_three);
  38. column_one.setData(0, 100);
  39. column_two.setData(30, 100);
  40. column_three.setData(40, 100);
  41. }
  42. }
复制代码

xml配置如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:layout_weight="1"
  8. android:paddingBottom="@dimen/activity_vertical_margin"
  9. android:paddingLeft="@dimen/activity_horizontal_margin"
  10. android:paddingRight="@dimen/activity_horizontal_margin"
  11. android:paddingTop="@dimen/activity_vertical_margin"
  12. tools:context="com.lixiaodaoaaa.graphics.MainActivity"
  13. >
  14. <View
  15. android:layout_width="0dp"
  16. android:layout_height="match_parent"
  17. android:layout_weight="0.2"/>
  18. <com.lixiaodaoaaa.view.pieview.PColumn
  19. android:id="@+id/column_one"
  20. android:layout_width="0dp"
  21. android:layout_height="match_parent"
  22. android:layout_weight="1"/>
  23. <View
  24. android:layout_width="0dp"
  25. android:layout_height="match_parent"
  26. android:layout_weight="2.4"/>
  27. <com.lixiaodaoaaa.view.pieview.PColumn
  28. android:id="@+id/column_two"
  29. android:layout_width="0dp"
  30. android:layout_height="match_parent"
  31. android:layout_weight="1"/>
  32. <View
  33. android:layout_width="0dp"
  34. android:layout_height="match_parent"
  35. android:layout_weight="2.4"/>
  36. <com.lixiaodaoaaa.view.pieview.PColumn
  37. android:id="@+id/column_three"
  38. android:layout_width="0dp"
  39. android:layout_height="match_parent"
  40. android:layout_weight="1"/>
  41. <View
  42. android:layout_width="0dp"
  43. android:layout_height="match_parent"
  44. android:layout_weight="0.2"/>
  45. </LinearLayout>
复制代码

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

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



回复

使用道具 举报