Android自定义带增长动画和点击弹窗提示效果的柱状图DEMO

项目中最近用到各种图表,本来打算用第三方的,例如MPAndroid,这是一个十分强大的图表库,应用起来十分方便,但是最终发现和设计不太一样,没办法,只能自己写了。今天将写好的柱状图的demo贴在这,该柱状图可根据数据的功能有一下几点:

     1. 根据数据的多少,动态的绘制柱状图柱子的条数;

     2. 柱状图每条柱子的绘制都有动态的动画效果;

     3. 每条柱子有点击事件,点击时弹出提示框,显示相关信息,规定时间后,弹窗自动消失。

     好了,先上演示图:

     下边贴出相关代码:

     自定义柱状图类:

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(); // 用于延时更新,实现动画 
  private float animHeight; // 进度条动画高度 
  private Paint axisLinePaint; // 坐标轴画笔 
  private Paint hLinePaint; // 内部水平虚线画笔 
  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; //用于格式化数字 
  private float currentHeight; // 当前柱状图应有的高度,应由计算得来 
  private int num = -1; // 画多少条柱子,因为存在刚开机数据不足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); 
  } 
  /** 
   * 进行相关初始化操作 
   * @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); //设置打印时保留三位小数 
    axisLinePaint.setColor(Color.parseColor("#dbdde4")); //设置坐标轴的颜色为白色 
    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(); 
    //根据原型图得出,图中每px高度在实际中的相对尺寸 
    mRelativePxInHeight = height / 470; 
    //根据原型图得出,图中每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)); 
    //计算柱子之间的间隔 
    //最左侧位置100 * mRelativePxInWidth,最右侧位置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); 
    } 
//    延时绘制,实现动画效果。数字越大,延时越久,动画效果就会越慢 
    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); 
    } 
  } 
  //实现柱子增长的动画效果 
  @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) { 
            //获取点击的柱子区域的y值 
            float top = 346 * mRelativePxInHeight - Float.parseFloat(data[num - 1 - i])/ 100 * 276 * mRelativePxInHeight; 
            float bottom = 346 * mRelativePxInHeight; 
            if (y >= top && y <= bottom) { 
              //判断是否设置监听 
              //将点击的第几条柱子,点击柱子顶部的坐值,用于弹出dialog提示数据,还要返回百分比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; 
  } 
  /** 
   * 柱子点击时的监听接口 
   */ 
  public interface OnChartClickListener { 
    void onClick(int num, float x, float y, float value); 
  } 
  /** 
   * 设置柱子点击监听的方法 
   * @param listener 
   */ 
  public void setOnChartClickListener(OnChartClickListener listener) { 
    this.listener = listener; 
  } 
} 

  在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: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中的实现:

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()); 
        // 设置好参数之后再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自定义带增长动画和点击弹窗提示效果的柱状图,实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对菜鸟教程(cainiaojc.com)网站的支持!

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。