100行Android代碼輕松實(shí)現(xiàn)帶動(dòng)畫柱狀圖
為何要用帶動(dòng)畫的柱狀圖呢?
最近,項(xiàng)目中遇到一個(gè)地方,要用到柱狀圖。所以這篇文章主要講怎么搞一個(gè)柱子。100行代碼,搞定柱狀圖!

圓角,頭頂帶數(shù)字。恩,這樣用drawable也可以搞定。但是,這個(gè)柱子是有一個(gè)動(dòng)畫的,就是進(jìn)入到界面的時(shí)候柱子不斷的長(zhǎng)高。這樣的話,綜合考慮還是用自定義View來(lái)做比較簡(jiǎn)便。效果如下圖了:

完整Demo地址請(qǐng)到我的github下載地址:
https://github.com/lixiaodaoaaa/ColumnAnimViewProject
關(guān)于尺寸
控件尺寸直接來(lái)自xml中的設(shè)置,無(wú)需進(jìn)行onMeasure測(cè)量。所以使用getWidth和getHeight獲取高度。
關(guān)于數(shù)據(jù)范圍
數(shù)據(jù)如果是一個(gè)柱子單獨(dú)顯示,則數(shù)據(jù)的范圍不是很重要,但是柱狀圖通常是由很多柱子并列顯示的,而這些柱子的單位高度都應(yīng)該是一樣的,所以提供設(shè)置最大值的范圍,最小值就是0.
關(guān)于數(shù)字的文字大小
由于柱子的寬度就是整個(gè)View的寬度,所以數(shù)字的寬度不能超過柱子的寬度。因?yàn)檫@個(gè)原因,文字的size需要?jiǎng)討B(tài)計(jì)算。意思就是 0和100000這兩個(gè)數(shù)字顯示的時(shí)候,文字的大小是不一樣的。
關(guān)于邊界值
0,是一個(gè)邊界值(最小值),當(dāng)顯示0的時(shí)候,并不是柱子不顯示的,而是顯示一個(gè)最小高度的。
關(guān)于動(dòng)畫
不停的設(shè)置值,就會(huì)形成動(dòng)畫。意思是先設(shè)置數(shù)據(jù)1,然后緊接著設(shè)數(shù)據(jù)2.3.4.5……一直到最終的顯示值,就會(huì)有動(dòng)畫效果。但是如果最終數(shù)值很大,1,1,1的增加就會(huì)很慢,動(dòng)畫時(shí)間很長(zhǎng)。
完整代碼如下:
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è)置個(gè)新的長(zhǎng)方形
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ù)值很大的的時(shí)候,動(dòng)畫時(shí)間過長(zhǎng)
int step = data / 100 + 1;
if (tempData < data - step) {
tempData = tempData + step;
} else {
tempData = data;
}
//畫圓角矩形
String S = tempData + "";
//一個(gè)字和兩,三個(gè)字的字號(hào)相同
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);
//圓角矩形的實(shí)際高度
float realH = MaxH / MAX * tempData;
RectF oval3 = new RectF(0, getHeight() - realH, getWidth(), getHeight());// 設(shè)置個(gè)新的長(zhǎng)方形
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地址請(qǐng)到我的github下載地址:
https://github.com/lixiaodaoaaa/ColumnAnimViewProject
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入解讀Android開發(fā)中Activity的生命周期
這篇文章主要介紹了Android開發(fā)中Activity的生命周期,包括Activity的停止和銷毀等重要內(nèi)容,非常推薦!需要的朋友可以參考下2015-12-12
Android編程單元測(cè)試實(shí)例詳解(附源碼)
這篇文章主要介紹了Android編程單元測(cè)試,結(jié)合完整實(shí)例形式詳細(xì)分析了Android單元測(cè)試的具體步驟與相關(guān)技巧,并附帶完整實(shí)例代碼供讀者下載參考,需要的朋友可以參考下2015-11-11
Android自定義view實(shí)現(xiàn)帶header和footer的Layout
這篇文章主要介紹了Android自定義view實(shí)現(xiàn)帶header和footer的Layout,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
Android中訪問證書有問題的SSL網(wǎng)頁(yè)的方法
在WebView里加載SSL網(wǎng)頁(yè)很正常,也沒什么難度。但如果要加載的SSL頁(yè)面的證書有問題,比如過期、信息不正確、發(fā)行機(jī)關(guān)不被信任等,WebView就會(huì)拒絕加載該網(wǎng)頁(yè)2014-04-04
android簡(jiǎn)單自定義View實(shí)現(xiàn)五子棋
這篇文章主要為大家詳細(xì)介紹了android簡(jiǎn)單自定義View實(shí)現(xiàn)五子棋,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11
詳解Android內(nèi)存泄漏檢測(cè)與MAT使用
編寫沒有內(nèi)存泄漏的程序,對(duì)提高程序穩(wěn)定性,提高用戶體驗(yàn)具有重要的意義。這篇文章主要介紹了詳解Android內(nèi)存泄漏檢測(cè)與MAT使用,有興趣的可以了解一下。2016-12-12
Android 給應(yīng)用程序的icon添加未讀消息個(gè)數(shù)提示(紅圈內(nèi)數(shù)字)
本文主要介紹了Android 給應(yīng)用程序的icon添加未讀消息個(gè)數(shù)提示(紅圈內(nèi)數(shù)字)的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04

