Android自定义view实现动态柱状图

所属分类: 软件编程 / Android 阅读数: 31
收藏 0 赞 0 分享

先看一下动态柱状图效果。

主要功能是可以自定义指定的字体,柱状图颜色,动态效果。

在自定义view

public class Histogram extends View {
 int MAX = 100;//矩形显示的最大值
 int corner = 0; //矩形的角度。 设置为0 则没有角度。
 double data = 0.0;//显示的数
 double tempData = 0; //初始数据
 int textPadding = 50; //字体与矩形图的距离
  Paint mPaint;
 int mColor;
  Context mContext;


 //构造函数
 public Histogram(Context context) {
  super(context);
  mContext = context;
 }

 public Histogram(Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
  initPaint();
 }

 public Histogram(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.gary);
  mPaint.setColor(mColor);
 }

 @Override
 public void draw(Canvas canvas) {
  super.draw(canvas);

  if (data == 0.0) {
   mPaint.setTextSize(getWidth() / 2);
   RectF oval3 = new RectF(0, getHeight() - DensityUtils.pxTodip(mContext, 20), getWidth(), getHeight());// 设置个新的长方形
   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;
  }

  //防止数值很大的的时候,动画时间过长
  int step = (int) (data / 100 + 1.0);

  if (tempData < data - step) {
   tempData = tempData + step;
  } else {
   tempData = data;
  }
  //画圆角矩形
  String S = tempData + ""; //如果数字后面需要加% 则在""中添加%
  //设置显示的字体
  Typeface typeface = Typeface.createFromAsset(getContext().getAssets(),"digital-7.ttf");
  mPaint.setTypeface(typeface);
//  //一个字和两,三个字的字号相同
  if (S.length() < 4) {
   mPaint.setTextSize(getWidth()/2 );
  } else {
   mPaint.setTextSize(50); //可以通过getWidth()/2 改变字体大小 也可以通过设置数字来改变自己想要的字体大小 当超出矩形图宽度时不能显示全部
  }
//
  float textH = mPaint.ascent() + mPaint.descent();
  float MaxH = getHeight() - textH - 2 * DensityUtils.pxTodip(mContext, textPadding);
//  //圆角矩形的实际高度
  float realH = (float) (MaxH / MAX * tempData);
  RectF oval3 = new RectF(0, getHeight() - realH, getWidth(), getHeight());// 设置个新的长方形
  canvas.drawRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);
  //写数字
  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(double data, int MAX) {
  this.data = data;
  this.MAX = MAX;
  postInvalidate();
 }

 public int getmColor() {
  return mColor;
 }

 public void setmColor(int mColor) {
  this.mColor = mColor;
 }

}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_weight="1"
 >
 <View
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="0.2"/>
 <com.mieasy.myhistogramview.Histogram
  android:id="@+id/column_one"
  android:layout_width="0dp"
  android:layout_height="300dp"
  android:layout_weight="0.8"/>

 <View
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="2.4"/>

 <com.mieasy.myhistogramview.Histogram
  android:id="@+id/column_two"
  android:layout_width="0dp"
  android:layout_height="300dp"
  android:layout_weight="1"/>

 <View
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="2.4"/>

 <com.mieasy.myhistogramview.Histogram
  android:id="@+id/column_three"
  android:layout_width="0dp"
  android:layout_height="300dp"
  android:layout_weight="1"/>
 <View
  android:layout_width="0dp"
  android:layout_height="match_parent"
  android:layout_weight="0.2"/>


</LinearLayout>

MainActivity调用initAllViews()方法

 private void initAllViews() {
  column_one = (Histogram) findViewById(R.id.column_one);
  column_two = (Histogram) findViewById(R.id.column_two);
  column_three = (Histogram) findViewById(R.id.column_three);

  column_one.setData( 20.22, 100);
  column_two.setData(30.2, 100);
  column_three.setData(40, 100);
  column_one.mPaint.setColor(getResources().getColor(R.color.colorAccent)); //改变柱状图的颜色
 }

参考文章:100行Android代码轻松实现带动画柱状图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

老生常谈Android HapticFeedback(震动反馈)

下面小编就为大家带来一篇老生常谈Android HapticFeedback(震动反馈)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详谈OnTouchListener与OnGestureListener的区别

下面小编就为大家带来一篇详谈OnTouchListener与OnGestureListener的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android仿知乎悬浮功能按钮FloatingActionButton效果

前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,下面通过本文给大家分享adroid仿知乎悬浮功能按钮FloatingActionButton效果,需要的朋友参考下吧
收藏 0 赞 0 分享

解决Android V7后自定义Toolbar、ActionBar左侧有空白问题

这篇文章主要介绍的Android V7后自定义Toolbar、ActionBar左侧有空白问题的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android常见控件使用详解

这篇文章主要为大家详细介绍了Android常见控件的使用方法,包括ProgressBar进度条控件、AlertDialog对话框控件等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android实现简洁的APP更新dialog数字进度条

这篇文章主要为大家详细介绍了Android实现简洁的APP更新dialog数字进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 判断当前语言环境是否是中文环境

本文主要介绍了Android 判断当前语言环境是否是中文环境的方法。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

详谈Android中Matrix的set、pre、post的区别

下面小编就为大家带来一篇详谈Android中Matrix的set、pre、post的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android实现登录界面记住密码的存储

这篇文章主要为大家详细介绍了Android SharedPreferrences实现登录界面记住密码的存储,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 使用SharedPreferrences储存密码登录界面记住密码功能

Android存储方式有很多种,在这里所用的存储方式是SharedPreferrences, 其采用了Map数据结构来存储数据,以键值的方式存储,可以简单的读取与写入,下面通过实例代码给大家讲解下,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多