使用TextView实现带动画的统计图

运行效果图。

一、前言

最近公司要求做一个支付报表，里面就涉及到一个支付方式的统计。很多人第一时间想到的可能就是Echarts，其实也是可以实现。但是一个简单的条形统计图，思想向后没必要搞得那么复杂吧。不就一个textview带个渐变的背景色吗？行吧，就用textview做吧。

二、正文

1、先把每一个统计方式的布局撸出来xml代码如下

<?xml version="1.0" encoding="utf-8"?>

<com.example.myapp.PriceTextView
android:id="@+id/tv_money"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="￥0.00"
android:textColor="@color/textColor"
android:textSize="10sp" />

</LinearLayout>

2、列表数据填充

package com.example.myapp;

import android.animation.ObjectAnimator;
import android.app.Activity;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.List;

/**
* 横向柱状图
* Created by Kwon on 2019/12/5 9:54.
*/
public class ColumnarView {

private final LinearLayout mLinearLayout;
private final Activity mActivity;

public ColumnarView(Activity activity, LinearLayout linearLayout) {
this.mActivity = activity;
this.mLinearLayout = linearLayout;
}

/**
* 显示支付方式柱状图（横图）
*/
public void showPayColumnar() {
mLinearLayout.removeAllViews();
/*筛选进度条的最大值*/
double finalMaxScale = 100;

for (int i = 0; i < 6; i++) {
View item = LayoutInflater.from(mActivity).inflate(R.layout.columnar_pay_item, mLinearLayout, false);
PriceTextView tvMoney = item.findViewById(R.id.tv_money);
TextView tvNum = item.findViewById(R.id.tv_num);
ImageView imgType = item.findViewById(R.id.imgType);
View bar = item.findViewById(R.id.bar);
LinearLayout barContainer = item.findViewById(R.id.bar_container);
/*添加item到添加隔断到linearlayout*/
mLinearLayout.addView(item);

/*金额*/
double payAmount = i * 6;

/*支付方式*/
String payTypeName = "支付方式";
/*支付进度条背景色*/
bar.setBackgroundResource(getPayColor(payTypeName));
/*支付金额*/
tvMoney.parsePrice(payAmount).showSymbol(payTypeName + "￥");
/*支付笔数*/
String payNum = i + "笔";
tvNum.setText(payNum);

item.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
item.getViewTreeObserver().removeOnPreDrawListener(this);
/*计算出进度条可用宽度（进度条到最后屏幕的宽度-后面显示%的宽度）*/
int initWidth = barContainer.getWidth();
/*计算出进度条应该显示的宽度*/
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) bar.getLayoutParams();
if (finalMaxScale != 0) {
lp.width = (int) (initWidth * payAmount / finalMaxScale);
}
bar.setLayoutParams(lp);
/*定时器*/
item.postDelayed(() -> {
/*获取bar应该显示宽度*/
int barWidth = bar.getWidth();
/*设置动画，1.5秒内从0.0宽度变成1.0宽度（1.0代表100%）*/
ObjectAnimator anim = ObjectAnimator.ofFloat(bar, "alpha", 0.0F, 1.0F).setDuration(2000);
/*动画监听*/
anim.addUpdateListener(valueAnimator -> {
/*事实计算宽度，应该显示的宽度乘以当前进度，再事实设置给bar*/
float cVal = (Float) anim.getAnimatedValue();
lp.width = (int) (barWidth * cVal);
bar.setLayoutParams(lp);
});
/*动画开始*/
anim.start();
}, 0);
return false;
}
});
}
}

/**
* 根据支付方式返回对于颜色
*
* @param payName
*/
public static int getPayColor(String payName) {
switch (payName) {
case "微信支付":
return R.drawable.columnar_green_bg;
case "支付宝":
return R.drawable.columnar_blue_bg;
case "刷卡":
return R.drawable.columnar_red500_bg;
case "花呗":
return R.drawable.columnar_blue500_bg;
case "云闪付":
return R.drawable.columnar_red_bg;
default:
return R.drawable.columnar_yellow_bg;
}
}
}

3、在需要的地方调用下就可以了，直接上代码

package com.example.myapp;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

LinearLayout llyPay = findViewById(R.id.llyPay);

ColumnarView columnarView = new ColumnarView(MainActivity.this, llyPay);
columnarView.showPayColumnar();
}
}

怎么样？是不是超级简单。

三、总结

相对于使用Echarts来说，我觉得使用textview+动画来的更加简单。有不足之处，望各位大神赐教！谢谢。

使用TextView实现带动画的统计图相关推荐

我的Android进阶之旅------Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
Android利用温度传感器实现带动画效果的电子温度计
概述 Android利用温度传感器实现带动画效果的电子温度计. 详细一.准备工作需要准备一部带有温度传感器的安卓手机,或者使用有温度传感器的模拟器. 二.程序实现 1.需要截图程序结构 2.实现思 ...
Android高效率实现弹出带动画效果的对话框，仿照微信对话框效果
转载请注明出处: http://blog.csdn.net/jakeyangchina/article/details/53423453 看到很多app页面里都有弹出对话框效果,今天使用PopupWi ...
Android实现GridView的item长按拖动删除完美实现（带动画效果）
领导这几天让做一个项目,就是可以实现像支付宝首页一样的可以长按拖动,删除的界面,以前没做过,领导让我做的时候觉得简直是老虎吃天,无从下手啊,可是领导的任务还是要实现的,没办法,就自己网上找咯,但是网上 ...
仿支付宝输入支付密码2（带动画）
由于用对话框做输入支付密码会出现宽度无法充满,这次我用popwindow来做,功能效果更加容易扩展:这次提供源码噢,有兴趣的可以下载去参考下,带动画噢: 先看看效果图把: 主界面只有这么简单,就不多在 ...
Android 自定义view画带指针带动画的上半圆弧刻度盘
之前工作中有用到环形进度条等的,为了赶进度都是在网上找到相似的效果的然后再进行修改.一直都想自己画一个,今天就和大家一起来学习刻度盘的绘制. 先看一下截图: 效果演示请看刻度盘演示代码下载:Cal ...
iOS提示气泡,带动画
1.效果如图: 从项目中抠出来的,做了简单的封装. 2.用法: //顶部提示HYNoticeView *noticeTop = [[HYNoticeView alloc] initWithFrame: ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...

使用TextView实现带动画的统计图

使用TextView实现带动画的统计图相关推荐

最新文章

热门文章