android 涨潮动画加载_Android附带涨潮动画效果的曲线报表绘制
写在前面
本文属于部分原创,实现安卓平台正弦曲线类报表绘制功能介绍,基于网络已有的曲线报表绘制类(LineGraphicView)自己添加了涨潮的渐变动画算法
最终效果图
废话少说,直接上源码
一、自定义View LineGraphicView,本类注释不算多,能搜到这篇文章的朋友看懂代码应该不会有障碍
import java.util.ArrayList;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.Transformation;
class LineGraphicView extends View {
/**
* 公共部分
*/
private static final int CIRCLE_SIZE = 10;
private static int yPos = 0;
private float aniProgress;// 实现动画的值
private HistogramAnimation ani;
private static enum Linestyle {
Line, Curve
}
private Context mContext;
private Paint mPaint;
private Resources res;
private DisplayMetrics dm;
/**
* data
*/
private Linestyle mStyle = Linestyle.Curve;
private int canvasHeight;
private int canvasWidth;
private int bheight = 0;
private int blwidh;
private boolean isMeasure = true;
/**
* Y轴最大值
*/
private int maxValue;
/**
* Y轴间距值
*/
private int averageValue;
private int marginTop = 10;
private int marginBottom = 40;
/**
* 曲线上总点数
*/
private Point[] mPoints;
/**
* 纵坐标值
*/
private ArrayList yRawData;
/**
* 横坐标值
*/
private ArrayList xRawDatas;
private ArrayList xList = new ArrayList();// 记录每个x的值
private int spacingHeight;
public LineGraphicView(Context context) {
this(context, null);
}
public LineGraphicView(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
initView();
}
private void initView() {
this.res = mContext.getResources();
this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
dm = new DisplayMetrics();
WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(dm);
ani = new HistogramAnimation();
ani.setDuration(1000);
startAnimation(ani);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
if (isMeasure) {
this.canvasHeight = getHeight();
this.canvasWidth = getWidth();
if (bheight == 0)
bheight = (int) (canvasHeight - marginBottom);
blwidh = dip2px(30);
isMeasure = false;
}
}
@Override
protected void onDraw(Canvas canvas) {
mPaint.setColor(Color.GRAY);
drawAllXLine(canvas);
// 画直线(纵向)
drawAllYLine(canvas);
// 点的操作设置
mPoints = getPoints();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(dip2px(0.2f));
mPaint.setStyle(Style.STROKE);
if (mStyle == Linestyle.Curve) {
drawScrollLine(canvas);
} else {
drawLine(canvas);
}
mPaint.setStyle(Style.FILL);
for (int i = 0; i < mPoints.length; i++) {
canvas.drawCircle(mPoints[i].x, mPoints[i].y, CIRCLE_SIZE / 2, mPaint);
}
}
/**
* 画所有横向表格,包括X轴
*/
private void drawAllXLine(Canvas canvas) {
for (int i = 0; i < spacingHeight + 1; i++) {
if (i == 0) {
yPos = bheight - (bheight / spacingHeight) * i + marginTop;
}
canvas.drawLine(blwidh, bheight - (bheight / spacingHeight) * i + marginTop, (canvasWidth - blwidh), bheight - (bheight / spacingHeight) * i + marginTop, mPaint);// Y坐标
drawText(String.valueOf(averageValue * i), blwidh / 2, bheight - (bheight / spacingHeight) * i + marginTop, canvas);
}
}
/**
* 画所有纵向表格,包括Y轴
*/
private void drawAllYLine(Canvas canvas) {
for (int i = 0; i < yRawData.size(); i++) {
xList.add(blwidh + (canvasWidth - blwidh) / yRawData.size() * i);
canvas.drawLine(blwidh + (canvasWidth - blwidh) / yRawData.size() * i, marginTop, blwidh + (canvasWidth - blwidh) / yRawData.size() * i, bheight + marginTop, mPaint);
drawText(xRawDatas.get(i), blwidh + (canvasWidth - blwidh) / yRawData.size() * i, bheight + dip2px(18), canvas);// X坐标
}
}
private void drawScrollLine(Canvas canvas) {
// 画曲线
int sh = 0;
int eh = 0;
Point startp = new Point();
Point endp = new Point();
for (int i = 0; i < mPoints.length - 1; i++) {
startp = mPoints[i];
endp = mPoints[i + 1];
if (aniProgress <= 0) {
sh = yPos;
eh = yPos;
} else if (aniProgress >= 1) {
sh = startp.y;
eh = endp.y;
} else {
sh = (int) ((int) startp.y + (yPos - startp.y) * (1 - aniProgress));
eh = (int) ((int) endp.y + (yPos - endp.y) * (1 - aniProgress));
}
startp.y = sh;
endp.y = eh;
int wt = (startp.x + endp.x) / 2;
Point p3 = new Point();
Point p4 = new Point();
p3.x = wt;
p3.y = sh;
p4.x = wt;
p4.y = eh;
Path path = new Path();
path.moveTo(startp.x, startp.y);// (51, 991),(172, 670)
path.cubicTo(p3.x, p3.y, p4.x, p4.y, endp.x, endp.y);
// canvas.drawPath(path, mPaint);
path.lineTo(endp.x, yPos);
path.lineTo(startp.x, yPos);
path.lineTo(startp.x, endp.y);
Paint paint = new Paint();
paint.setColor(Color.CYAN);
paint.setStyle(Paint.Style.FILL);
// 设置抗锯齿。
paint.setAntiAlias(true);
canvas.drawPath(path, paint);
}
}
private void drawLine(Canvas canvas) {
Point startp = new Point();
Point endp = new Point();
for (int i = 0; i < mPoints.length - 1; i++) {
startp = mPoints[i];
endp = mPoints[i + 1];
canvas.drawLine(startp.x, startp.y, endp.x, endp.y, mPaint);
}
}
private void drawText(String text, int x, int y, Canvas canvas) {
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setTextSize(dip2px(12));
p.setColor(Color.BLACK);
p.setTextAlign(Paint.Align.LEFT);
canvas.drawText(text, x, y, p);
}
private Point[] getPoints() {
Point[] points = new Point[yRawData.size()];
for (int i = 0; i < yRawData.size(); i++) {
int ph = bheight - (int) (bheight * (yRawData.get(i) / maxValue));
points[i] = new Point(xList.get(i), ph + marginTop);
}
return points;
}
public void setData(ArrayList yRawData, ArrayList xRawData, int maxValue, int averageValue) {
this.maxValue = maxValue;
this.averageValue = averageValue;
this.mPoints = new Point[yRawData.size()];
this.xRawDatas = xRawData;
this.yRawData = yRawData;
this.spacingHeight = maxValue / averageValue;
}
public void setTotalvalue(int maxValue) {
this.maxValue = maxValue;
}
public void setPjvalue(int averageValue) {
this.averageValue = averageValue;
}
public void setMargint(int marginTop) {
this.marginTop = marginTop;
}
public void setMarginb(int marginBottom) {
this.marginBottom = marginBottom;
}
public void setMstyle(Linestyle mStyle) {
this.mStyle = mStyle;
}
public void setBheight(int bheight) {
this.bheight = bheight;
}
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
private int dip2px(float dpValue) {
return (int) (dpValue * dm.density + 0.5f);
}
private class HistogramAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
aniProgress = interpolatedTime;
postInvalidate();
}
}二、入口页面调用这个自定义控件
import java.util.ArrayList;
import java.util.Random;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
@SuppressLint("ClickableViewAccessibility")
public class MainActivity extends Activity {
LineGraphicView tu;
ArrayList yList;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
tu = (LineGraphicView) findViewById(R.id.histogram);
yList = new ArrayList();
Random random = new Random();
for (int i = 0; i < 16; i++) {
yList.add(random.nextDouble() * 10);
}
ArrayList xRawDatas = new ArrayList();
for (int i = 0; i < 16; i++) {
xRawDatas.add(String.valueOf(i));
}
tu.setData(yList, xRawDatas, 10, 1);
}
}三、Mainactivity引用的activity_main.xml如下
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
android:id="@+id/histogram"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
结束语
上述代码亲测有效,但也只是实现了基本功能,封装有待完善,欢迎宝宝们来学习交流~
android 涨潮动画加载_Android附带涨潮动画效果的曲线报表绘制相关推荐
- CSS动画——加载的菊花转动画
CSS动画--加载的菊花转动画 最近在整理工作过程中用到的一些动画,菊花转loading就是其中一个.本人比较爱较劲,看到这个就想用代码实现,虽然我很菜,但是我也要做一个菜中VIP!!! 话不多说,先 ...
- Android仿美团加载数据、小人奔跑进度动画对话框(附顺丰快递员奔跑效果)
我们都知道在Android中,常见的动画模式有两种:一种是帧动画(Frame Animation),一种是补间动画(Tween Animation).帧动画是提供了一种逐帧播放图片的动画方式,播放事先 ...
- android 动画间隔时间,Android使用View Animation实现动画加载界面
之前分别介绍了View Animation和Drawable Animation,学了就要用啊,今天给大家一个使用View Animation实现动画加载界面的实现. 首先先看一下实现效果. 下面是实 ...
- 安卓学习笔记---Android仿美团加载数据、小人奔跑进度动画对话框(以及顺丰快递员奔跑效果)
最近要加一个动态的加载功能,类似于美团的效果,这篇文章写的很好,可以借鉴 博客地址: http://blog.csdn.net/jdsjlzx/article/details/43489395 我们都 ...
- android 海浪动画,android自定义波浪加载动画的实现代码
本文实例为大家分享了android自定义波浪加载动画的具体代码,供大家参考,具体内容如下 效果图 1.自定义控件 WaveView package com.example.wh.myapplicati ...
- android 自定义加载动画效果,Android自定义View实现loading动画加载效果
项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. ...
- Xamarin.Android 实现正在加载动画效果
通过添加不同帧数的图片,来实现自己想要的动画效果正在加载... 第一步: Resources/drawable 目录下添加每一帧的图片,我设定了18帧 第二步:实现动画效果,drawable下新建页面 ...
- 环形动画加载视图AnimatedCircleLoadingView
2019独角兽企业重金招聘Python工程师标准>>> 环形动画加载视图AnimatedCircleLoadingView AnimatedCircleLoadingView是基于A ...
- 环形动画加载视图AnimatedCircleLoadingView
环形动画加载视图AnimatedCircleLoadingView AnimatedCircleLoadingView是基于Android手表动画android-watch-loading-anima ...
最新文章
- zip压缩多个文件,解压时不包含目录层级
- 空间刚架matlab_Matlab绘制空间几何图
- Qt在linux下无法输入中文,Ubuntu使用集成开发环境QT无法输入中文的解决方法
- Java学习——Java运算符
- OpenCV探索之路(二十五):制作简易的图像标注小工具
- 英语学习笔记2019-10-11
- java编写一个彩票开奖的模拟程序.游戏共有两种玩法,一种是21选5,即玩家输入5个1到21内的不重复的数。另外一种玩法是6+1玩法,即要求玩家输入7个整数,代表所购买的彩票号码,最后一个是特码。
- C语言 — 运算符的优先级与结合性
- 【script】python 调用阿里云解析 DNS API 实现 DDNS(动态域名解析)
- python如何进行数据挖掘_如何使用python实现文本数据挖掘?
- css float与学习骑自行车
- 蓝桥杯之单片机学习(三)——共阳数码管的静态显示
- Emacs+Muse 使用
- 【pytorch】 grad、grad_fn、requires_grad()、with torch.no_grad() 、net.train()、net.eval():记录一次奇怪的debug经历
- JAVA实现模板word文档导入,Java依据word模板生成word文档之后台解析和实现及部分代码(一)...
- Java反射系列--Type接口及其子接口
- C# 制作Excel报表
- IBM Personal System/2 —— 25年的PC历史
- Emqtt -- 03 -- 用户密码认证
- win10同步服务器文件夹在哪里找,Win10 iTunes备份文件在什么位置|win10 itunes备份文件如何查看...