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

圓角,頭頂帶數(shù)字。恩,這樣用drawable也可以搞定。但是,這個(gè)柱子是有一個(gè)動(dòng)畫(huà)的,就是進(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ù)字的寬度不能超過(guò)柱子的寬度。因?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)畫(huà)
不停的設(shè)置值,就會(huì)形成動(dòng)畫(huà)。意思是先設(shè)置數(shù)據(jù)1,然后緊接著設(shè)數(shù)據(jù)2.3.4.5……一直到最終的顯示值,就會(huì)有動(dòng)畫(huà)效果。但是如果最終數(shù)值很大,1,1,1的增加就會(huì)很慢,動(dòng)畫(huà)時(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)畫(huà)時(shí)間過(guò)長(zhǎng)
int step = data / 100 + 1;
if (tempData < data - step) {
tempData = tempData + step;
} else {
tempData = data;
}
//畫(huà)圓角矩形
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);
//寫(xiě)數(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布局之LinearLayout自定義高亮背景的方法
這篇文章主要介紹了Android布局之LinearLayout自定義高亮背景的方法,實(shí)例分析了Android中LinearLayout布局參數(shù)設(shè)置技巧,需要的朋友可以參考下2016-01-01
Android開(kāi)發(fā)從相機(jī)或相冊(cè)獲取圖片裁剪
當(dāng)我們需要上傳圖片時(shí),想要裁剪成我們需要的尺寸大小,android手機(jī)都帶有這個(gè)功能,很容易,那么此功能是如何實(shí)現(xiàn)的呢?下面小編給大家介紹Android開(kāi)發(fā)從相機(jī)或相冊(cè)獲取圖片裁剪,需要的朋友可以參考下2015-10-10
Android用SharedPreferences實(shí)現(xiàn)登錄注冊(cè)注銷功能
這篇文章主要為大家詳細(xì)介紹了Android用SharedPreferences實(shí)現(xiàn)登錄注冊(cè)注銷功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android如何讓APP無(wú)法在指定的系統(tǒng)版本上運(yùn)行(實(shí)現(xiàn)方法)
這篇文章主要介紹了Android如何讓APP無(wú)法在指定的系統(tǒng)版本上運(yùn)行(實(shí)現(xiàn)方法),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02
淺析Android手機(jī)衛(wèi)士之號(hào)碼歸屬地查詢
這篇文章主要介紹了淺析Android手機(jī)衛(wèi)士之號(hào)碼歸屬地查詢的相關(guān)資料,需要的朋友可以參考下2016-04-04
Android自定義View實(shí)現(xiàn)動(dòng)畫(huà)效果詳解
這篇文章主要為大家詳細(xì)介紹了Android如何通過(guò)自定義View實(shí)現(xiàn)動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
Android實(shí)現(xiàn)基本功能的新聞應(yīng)用
這篇文章主要介紹了一個(gè)簡(jiǎn)易功能的Android新聞應(yīng)用實(shí)現(xiàn)流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-12-12
教你制作Android中炫酷的ViewPagerIndicator(不僅仿MIUI)
ViewPagerIndicator作為一款分頁(yè)指標(biāo)小部件兼容ViewPager,封裝上做得非常不錯(cuò),目前已為眾多知名應(yīng)用所使用。今天給你大家分享一個(gè)炫酷的效果,有需要的可以參考學(xué)習(xí)。2016-08-08

