Android自定義帶增長動畫和點擊彈窗提示效果的柱狀圖DEMO
更新時間：2016年11月09日 10:32:03 作者：zzd_92
這篇文章主要介紹了Android自定義帶增長動畫和點擊彈窗提示效果的柱狀圖的相關(guān)資料,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下
項目中最近用到各種圖表，本來打算用第三方的，例如MPAndroid,這是一個十分強大的圖表庫，應(yīng)用起來十分方便，但是最終發(fā)現(xiàn)和設(shè)計不太一樣，沒辦法，只能自己寫了。今天將寫好的柱狀圖的demo貼在這，該柱狀圖可根據(jù)數(shù)據(jù)的功能有一下幾點：
1. 根據(jù)數(shù)據(jù)的多少，動態(tài)的繪制柱狀圖柱子的條數(shù)；
2. 柱狀圖每條柱子的繪制都有動態(tài)的動畫效果；
3. 每條柱子有點擊事件，點擊時彈出提示框，顯示相關(guān)信息，規(guī)定時間后，彈窗自動消失。
好了，先上演示圖：
下邊貼出相關(guān)代碼：
自定義柱狀圖類：
package com.example.histogram;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import com.example.histogram.UI.UI;
import java.text.NumberFormat;
/**
* Created by ZHANGZDon 2016/6/16 0016.
* 柱狀圖
*/
public class HistoGram extends View implements Runnable {
private Handler handler = new Handler(); // 用于延時更新，實現(xiàn)動畫
private float animHeight; // 進度條動畫高度
private Paint axisLinePaint; // 坐標軸畫筆
private Paint hLinePaint; // 內(nèi)部水平虛線畫筆
private Paint textPaint; // 繪制文本的畫筆
private Paint recPaint; // 繪制柱狀圖陰影背景的畫筆
private Paint dataPaint; // 繪制柱狀圖的畫筆
private Paint textPaint2; // 繪制白色文本的畫筆
private Paint textPaint3; // 繪制坐標的畫筆
private Paint textPaint4; // 繪制x軸上的白色豎線的畫筆
private String[] xTitleString; // x軸刻度
private String[] yTitleString; // y軸刻度
private String[] data; // 接口返回的indicatordata，用于計算柱子高度
NumberFormat numberFormat; //用于格式化數(shù)字
private float currentHeight; // 當前柱狀圖應(yīng)有的高度，應(yīng)由計算得來
private int num = -1; // 畫多少條柱子，因為存在剛開機數(shù)據(jù)不足24條的情況
private float mRelativePxInHeight;
private float mRelativePxInWidth;
private OnChartClickListener listener;
private int mDist;
public void setNum(int num) {
this.num = num;
invalidate();
}
public void setData(String[] data) {
this.data = data;
invalidate();
}
public void setxTitleString(String[] title) {
this.xTitleString = title;
invalidate();
}
public HistoGram(Context context) {
this(context, null);
}
public HistoGram(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public void setTitle(String[] title) {
this.xTitleString = title;
}
public HistoGram(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
/**
* 進行相關(guān)初始化操作
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
axisLinePaint = new Paint();
hLinePaint = new Paint();
textPaint = new Paint();
recPaint = new Paint();
dataPaint = new Paint();
textPaint2 = new Paint();
textPaint3 = new Paint();
textPaint4 = new Paint();
numberFormat = NumberFormat.getNumberInstance();
numberFormat.setMinimumFractionDigits(3); //設(shè)置打印時保留三位小數(shù)
axisLinePaint.setColor(Color.parseColor("#dbdde4")); //設(shè)置坐標軸的顏色為白色
hLinePaint.setARGB(51, 255, 255, 255);
textPaint.setColor(Color.parseColor("#8593a1"));
// textPaint.setTextSize(29);
textPaint.setTextSize(UI.dip2px(getContext(), 12));
recPaint.setColor(Color.parseColor("#f2f5fc"));
dataPaint.setColor(Color.CYAN);
textPaint2.setColor(Color.WHITE);
textPaint2.setTextSize(UI.dip2px(getContext(), 12));
textPaint3.setColor(Color.parseColor("#000000"));
textPaint3.setTextSize(UI.dip2px(getContext(), 9));
textPaint4.setColor(Color.parseColor("#8593a1"));
textPaint4.setTextSize(UI.dip2px(getContext(), 6));
axisLinePaint.setAntiAlias(true);
hLinePaint.setAntiAlias(true);
textPaint.setAntiAlias(true);
recPaint.setAntiAlias(true);
dataPaint.setAntiAlias(true);
textPaint2.setAntiAlias(true);
textPaint3.setAntiAlias(true);
textPaint4.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(data == null || xTitleString == null || num < 0 ) {
return;
}
//繪制y軸刻度
Paint.FontMetrics metrics = textPaint3.getFontMetrics();
int decent = (int) metrics.descent;
float width = getWidth();
float height = getHeight();
//根據(jù)原型圖得出，圖中每px高度在實際中的相對尺寸
mRelativePxInHeight = height / 470;
//根據(jù)原型圖得出，圖中每px寬度在實際中的相對尺寸
mRelativePxInWidth = width / 690;
textPaint3.setTextAlign(Paint.Align.RIGHT);
//繪制縱坐標
yTitleString = new String[6];
yTitleString[5] = "0";
yTitleString[4] = "20";
yTitleString[3] = "40";
yTitleString[2] = "60";
yTitleString[1] = "80";
yTitleString[0] = "100";
for (int i = 0; i < yTitleString.length; i++) {
canvas.drawText(yTitleString[i], 88 * mRelativePxInWidth, (72 + i * 56) * mRelativePxInHeight + decent, textPaint3);
}
//繪制x軸刻度
textPaint3.setTextAlign(Paint.Align.CENTER);
textPaint4.setTextAlign(Paint.Align.CENTER);
TextPaint textPaint = new TextPaint();
textPaint.setColor(Color.parseColor("#000000"));
textPaint.setTextSize(UI.dip2px(getContext(), 9));
//計算柱子之間的間隔
//最左側(cè)位置100 * mRelativePxInWidth,最右側(cè)位置630 ePxInWidth,
float totalWidth = 630 - 100;
// 柱子與之子之間的間隔
mDist = (int) (totalWidth / (xTitleString.length + 1));
for (int i = 0; i < xTitleString.length; i++) {
//繪制白色豎線
canvas.drawLine((100 + (i+1) * mDist) * mRelativePxInWidth, 348 * mRelativePxInHeight, (100 + (i+1) * mDist) * mRelativePxInWidth, 352 * mRelativePxInHeight, axisLinePaint);
//繪制x軸文字
canvas.drawText(xTitleString[i], (100 + (i+1) * mDist) * mRelativePxInWidth, 370 * mRelativePxInHeight, textPaint3);
}
// 繪制矩形陰影
for (int i = 0; i < num; i++) {
RectF rectF = new RectF();
// rectF.left = 111 * relativePxInWidth + i * 22 * relativePxInWidth;
// rectF.right = 121 * relativePxInWidth + i * 22 * relativePxInWidth;
rectF.left = 95 * mRelativePxInWidth + (i+1) * mDist * mRelativePxInWidth;
rectF.right = 105 * mRelativePxInWidth +(i+1) * mDist * mRelativePxInWidth;
rectF.top = 70 * mRelativePxInHeight;
rectF.bottom = 338 * mRelativePxInHeight;
canvas.drawRoundRect(rectF, 10, 10, recPaint);
}
// 繪制x軸坐標線
for (int i = 0; i < 6; i++) {
canvas.drawLine(100 * mRelativePxInWidth, (66 + i * 56) * mRelativePxInHeight + decent, 630 * mRelativePxInWidth, (66 + i * 56) * mRelativePxInHeight + decent, axisLinePaint);
}
// 延時繪制，實現(xiàn)動畫效果。數(shù)字越大，延時越久，動畫效果就會越慢
handler.postDelayed(this, 1);
for (int i = 0; i < num; i++) {
RectF dataRectF = new RectF();
dataRectF.left = 95 * mRelativePxInWidth + (i + 1) * mDist * mRelativePxInWidth;
dataRectF.right = 105 * mRelativePxInWidth + (i + 1) * mDist * mRelativePxInWidth;
dataPaint.setColor(Color.parseColor("#3ac2d9"));
//獲取柱子高度
currentHeight = Float.parseFloat(data[num - 1 - i]);
if (currentHeight == 0) {
dataRectF.top = 346 * mRelativePxInHeight;
} else if (currentHeight == 100) {
dataRectF.top = 70 * mRelativePxInHeight;
} else {
if (animHeight >= currentHeight) {
dataRectF.top = 346 * mRelativePxInHeight - currentHeight / 100 * 276 * mRelativePxInHeight;
} else {
dataRectF.top = 346 * mRelativePxInHeight - 276 * mRelativePxInHeight * (animHeight / 100);
}
}
dataRectF.bottom = 346 * mRelativePxInHeight;
// 限制最高高度
if (dataRectF.top < 70 * mRelativePxInHeight) {
dataRectF.top = 70 * mRelativePxInHeight;
}
canvas.drawRoundRect(dataRectF, 10, 10, dataPaint);
}
}
//實現(xiàn)柱子增長的動畫效果
@Override
public void run() {
animHeight += 1;
if (animHeight >= 276 * mRelativePxInHeight) {
return;
} else {
invalidate();
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
//獲取點擊坐標
float x = event.getX();
float y = event.getY();
//判斷點擊點的位置
float leftx = 0;
float rightx = 0;
for (int i = 0; i < num; i++) {
leftx = 95 * mRelativePxInWidth + (i+ 1) * mDist * mRelativePxInWidth - mDist/2 * mRelativePxInWidth;
rightx = 105 * mRelativePxInWidth + (i+ 1) * mDist * mRelativePxInWidth + mDist/2 * mRelativePxInWidth;
if (x < leftx) {
continue;
}
if (leftx <= x && x <= rightx) {
//獲取點擊的柱子區(qū)域的y值
float top = 346 * mRelativePxInHeight - Float.parseFloat(data[num - 1 - i])/ 100 * 276 * mRelativePxInHeight;
float bottom = 346 * mRelativePxInHeight;
if (y >= top && y <= bottom) {
//判斷是否設(shè)置監(jiān)聽
//將點擊的第幾條柱子，點擊柱子頂部的坐值，用于彈出dialog提示數(shù)據(jù)，還要返回百分比currentHeidht = Float.parseFloat(data[num - 1 - i])
if(listener != null) {
Log.e("ss","x" + x +";y:" + y);
listener.onClick(i + 1, leftx + mDist/2,top,Float.parseFloat(data[num - 1 - i]));
}
break;
}
}
}
break;
}
case MotionEvent.ACTION_MOVE:
Log.e("touch", "ACTION_MOVE");
break;
case MotionEvent.ACTION_UP:
Log.e("touch", "ACTION_UP");
break;
}
return true;
}
/**
* 柱子點擊時的監(jiān)聽接口
*/
public interface OnChartClickListener {
void onClick(int num, float x, float y, float value);
}
/**
* 設(shè)置柱子點擊監(jiān)聽的方法
* @param listener
*/
public void setOnChartClickListener(OnChartClickListener listener) {
this.listener = listener;
}
}
在xml文件中的應(yīng)用：
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.histogram.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center"
android:text="繁忙度指示圖(%)"
android:textSize="15sp"
android:textColor="#000000"
/>
<com.example.histogram.HistoGram
android:id="@+id/staticview"
android:layout_width="400dp"
android:layout_height="500dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="14dp"
android:layout_marginTop="5dp"/>
</LinearLayout>
在activity中的實現(xiàn)：
package com.example.histogram;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.PopupWindow;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private PopupWindow mPopupWindow;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final HistoGram histoGram = (HistoGram) findViewById(R.id.staticview);
String[] data ={"100","20","40","20","80","20","60","30","5","20","60","30","5","5","20","60","30","5"};
final String[] title = {"1","2","3","4","5","6","7","8","9","6","7","8","9","9","6","7","8","9"};
histoGram.setNum(title.length);
histoGram.setData(data);
histoGram.setxTitleString(title);
histoGram.setOnChartClickListener(new HistoGram.OnChartClickListener() {
@Override
public void onClick(int num, float x, float y, float value) {
//顯示提示窗
View inflate = View.inflate(MainActivity.this, R.layout.popupwindow, null);
TextView textView = (TextView) inflate.findViewById(R.id.main_tv);
textView.setText(value + "%\n" + title[num - 1]);
if(mPopupWindow != null) {
mPopupWindow.dismiss();
}
mPopupWindow = new PopupWindow(inflate,140, 60, true);
mPopupWindow.setTouchable(true);
Log.e("ss","num" + num +";x" + x+";y"+ y + ";value" + value
+";(int)((- histoGram.getHeight()) + y - 65)"
+(int)((- histoGram.getHeight()) + y - 65)
+ "histoGram.getHeight()" + histoGram.getHeight());
// 設(shè)置好參數(shù)之后再show
// Toast.makeText(MainActivity.this, "num" + num +";x" + x+";y"+ y + ";value" + value
// +";popupWindow.getWidth()"+ mPopupWindow.getWidth()+";"+ mPopupWindow.getHeight(), Toast.LENGTH_SHORT).show();
mPopupWindow.showAsDropDown(histoGram,(int)(x - 65),(int)((- histoGram.getHeight()) + y - 65) );
mPopupWindow.setBackgroundDrawable(getResources().getDrawable(R.mipmap.databg_busyness));
new Handler().postDelayed(new Runnable(){
public void run() {
mPopupWindow.dismiss();
}
}, 1000);
}
});
}
}
以上所述是小編給大家介紹的Android自定義帶增長動畫和點擊彈窗提示效果的柱狀圖,實現(xiàn)一個模擬后臺數(shù)據(jù)登入的效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Crashlytics Android 異常報告統(tǒng)計管理(詳解)
下面小編就為大家?guī)硪黄狢rashlytics Android 異常報告統(tǒng)計管理(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細介紹了Android自定義View旋轉(zhuǎn)圓形圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細介紹了Android自定義View圓形進度條控件的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Android自定義控件ViewGroup實現(xiàn)標簽云
這篇文章主要為大家詳細介紹了Android自定義控件ViewGroup實現(xiàn)標簽云，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
下面小編就為大家分享一篇淺談Android textview文字對齊換行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Android編程設(shè)計模式之工廠方法模式,結(jié)合實例形式詳細分析了Android工廠方法模式的概念、原理、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-12-12
實例講解Android App使用自帶的SQLite數(shù)據(jù)庫的基本方法
這篇文章主要介紹了Android App使用自帶的SQLite數(shù)據(jù)庫的基本方法,SQLite是一個小巧的內(nèi)嵌型數(shù)據(jù)庫,在數(shù)據(jù)庫需求不大的情況下使用SQLite其實非常有效,需要的朋友可以參考下2016-04-04
本文主要介紹了Android12?藍牙適配的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了Android 顯示刷新頻率的實現(xiàn)代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了Android GPS獲取當前經(jīng)緯度坐標，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05