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來做比較簡(jiǎn)便。效果如下圖了:
完整Demo地址請(qǐng)到我的github下載地址:
https://github.com/lixiaodaoaaa/ColumnAnimViewProject
關(guān)于尺寸
控件尺寸直接來自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布局之LinearLayout自定義高亮背景的方法
這篇文章主要介紹了Android布局之LinearLayout自定義高亮背景的方法,實(shí)例分析了Android中LinearLayout布局參數(shù)設(shè)置技巧,需要的朋友可以參考下2016-01-01Android開發(fā)從相機(jī)或相冊(cè)獲取圖片裁剪
當(dāng)我們需要上傳圖片時(shí),想要裁剪成我們需要的尺寸大小,android手機(jī)都帶有這個(gè)功能,很容易,那么此功能是如何實(shí)現(xiàn)的呢?下面小編給大家介紹Android開發(fā)從相機(jī)或相冊(cè)獲取圖片裁剪,需要的朋友可以參考下2015-10-10Android用SharedPreferences實(shí)現(xiàn)登錄注冊(cè)注銷功能
這篇文章主要為大家詳細(xì)介紹了Android用SharedPreferences實(shí)現(xiàn)登錄注冊(cè)注銷功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android如何讓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-04Android自定義View實(shí)現(xiàn)動(dòng)畫效果詳解
這篇文章主要為大家詳細(xì)介紹了Android如何通過自定義View實(shí)現(xiàn)動(dòng)畫效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02Android實(shí)現(xiàn)基本功能的新聞應(yīng)用
這篇文章主要介紹了一個(gè)簡(jiǎn)易功能的Android新聞應(yīng)用實(shí)現(xiàn)流程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12教你制作Android中炫酷的ViewPagerIndicator(不僅仿MIUI)
ViewPagerIndicator作為一款分頁(yè)指標(biāo)小部件兼容ViewPager,封裝上做得非常不錯(cuò),目前已為眾多知名應(yīng)用所使用。今天給你大家分享一個(gè)炫酷的效果,有需要的可以參考學(xué)習(xí)。2016-08-08