100行Android代碼輕松實現(xiàn)帶動畫柱狀圖

2019-10-22 18:31:02

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

為何要用帶動畫的柱狀圖呢？

最近，項目中遇到一個地方，要用到柱狀圖。所以這篇文章主要講怎么搞一個柱子。100行代碼，搞定柱狀圖!

Android,柱狀圖

圓角，頭頂帶數(shù)字。恩，這樣用drawable也可以搞定。但是，這個柱子是有一個動畫的，就是進入到界面的時候柱子不斷的長高。這樣的話，綜合考慮還是用自定義View來做比較簡便。效果如下圖了：

Android,柱狀圖

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

關(guān)于尺寸

控件尺寸直接來自xml中的設(shè)置，無需進行onMeasure測量。所以使用getWidth和getHeight獲取高度。

關(guān)于數(shù)據(jù)范圍

數(shù)據(jù)如果是一個柱子單獨顯示，則數(shù)據(jù)的范圍不是很重要，但是柱狀圖通常是由很多柱子并列顯示的，而這些柱子的單位高度都應(yīng)該是一樣的，所以提供設(shè)置最大值的范圍，最小值就是0.

關(guān)于數(shù)字的文字大小

由于柱子的寬度就是整個View的寬度，所以數(shù)字的寬度不能超過柱子的寬度。因為這個原因，文字的size需要動態(tài)計算。意思就是 0和100000這兩個數(shù)字顯示的時候，文字的大小是不一樣的。

關(guān)于邊界值

0，是一個邊界值（最小值），當顯示0的時候，并不是柱子不顯示的，而是顯示一個最小高度的。

關(guān)于動畫

不停的設(shè)置值，就會形成動畫。意思是先設(shè)置數(shù)據(jù)1，然后緊接著設(shè)數(shù)據(jù)2.3.4.5……一直到最終的顯示值，就會有動畫效果。但是如果最終數(shù)值很大，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;//顯示的數(shù)  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());// 設(shè)置個新的長方形      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;    }    //防止數(shù)值很大的的時候，動畫時間過長    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());// 設(shè)置個新的長方形    canvas.drawRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);    //寫數(shù)字    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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識閱讀請移步到Android開發(fā)頻道。

上一篇：Android自定義view實現(xiàn)動態(tài)柱狀圖

下一篇：Android編程實現(xiàn)帶漸變效果的圓角矩形示例