自定义加载loading view动画组件的使用。
在github上找的一个有点酷炫的loading动画https://github.com/Fichardu/CircleProgress
我写写使用步骤
自定义view(CircleProgress )的代码
package com.hysmarthotel.view; import com.hysmarthotel.roomcontrol.R;
import com.hysmarthotel.util.EaseInOutCubicInterpolator; import android.animation.TimeInterpolator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AnimationUtils; public class CircleProgress extends View { private static final int RED = 0xFFE5282C;
private static final int YELLOW = 0xFF1F909A;
private static final int BLUE = 0xFFFC9E12;
private static final int COLOR_NUM = 3;
private int[] COLORS;
private TimeInterpolator mInterpolator = new EaseInOutCubicInterpolator(); private final double DEGREE = Math.PI / 180;
private Paint mPaint;
private int mViewSize;
private int mPointRadius;
private long mStartTime;
private long mPlayTime;
private boolean mStartAnim = false;
private Point mCenter = new Point(); private ArcPoint[] mArcPoint;
private static final int POINT_NUM = 15;
private static final int DELTA_ANGLE = 360 / POINT_NUM;
private long mDuration = 3600; public CircleProgress(Context context) {
super(context);
init(null, 0);
} public CircleProgress(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
} public CircleProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
} private void init(AttributeSet attrs, int defStyle) {
mArcPoint = new ArcPoint[POINT_NUM]; mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL); TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CircleProgress, defStyle, 0);
int color1 = a.getColor(R.styleable.CircleProgress_color1, RED);
int color2 = a.getColor(R.styleable.CircleProgress_color2, YELLOW);
int color3 = a.getColor(R.styleable.CircleProgress_color3, BLUE);
a.recycle(); COLORS = new int[]{color1, color2, color3};
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int defaultSize = getResources().getDimensionPixelSize(R.dimen.default_circle_view_size);
int width = getDefaultSize(defaultSize, widthMeasureSpec);
int height = getDefaultSize(defaultSize, heightMeasureSpec);
mViewSize = Math.min(width, height);
setMeasuredDimension(mViewSize, mViewSize);
mCenter.set(mViewSize / 2, mViewSize / 2); calPoints(1.0f);
} @Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.translate(mCenter.x, mCenter.y); float factor = getFactor();
canvas.rotate(36 * factor);
float x, y;
for (int i = 0; i < POINT_NUM; ++i) {
mPaint.setColor(mArcPoint[i].color);
float itemFactor = getItemFactor(i, factor);
x = mArcPoint[i].x - 2 * mArcPoint[i].x * itemFactor;
y = mArcPoint[i].y - 2 * mArcPoint[i].y * itemFactor;
canvas.drawCircle(x, y, mPointRadius, mPaint);
} canvas.restore(); if (mStartAnim) {
postInvalidate();
}
} private void calPoints(float factor) {
int radius = (int) (mViewSize / 3 * factor);
mPointRadius = radius / 12; for (int i = 0; i < POINT_NUM; ++i) {
float x = radius * -(float) Math.sin(DEGREE * DELTA_ANGLE * i);
float y = radius * -(float) Math.cos(DEGREE * DELTA_ANGLE * i); ArcPoint point = new ArcPoint(x, y, COLORS[i % COLOR_NUM]);
mArcPoint[i] = point;
}
} private float getFactor() {
if (mStartAnim) {
mPlayTime = AnimationUtils.currentAnimationTimeMillis() - mStartTime;
}
float factor = mPlayTime / (float) mDuration;
return factor % 1f;
} private float getItemFactor(int index, float factor) {
float itemFactor = (factor - 0.66f / POINT_NUM * index) * 3;
if (itemFactor < 0f) {
itemFactor = 0f;
} else if (itemFactor > 1f) {
itemFactor = 1f;
}
return mInterpolator.getInterpolation(itemFactor);
} public void startAnim() {
mPlayTime = mPlayTime % mDuration;
mStartTime = AnimationUtils.currentAnimationTimeMillis() - mPlayTime;
mStartAnim = true;
postInvalidate();
} public void reset() {
stopAnim();
mPlayTime = 0;
postInvalidate(); } public void stopAnim() {
mStartAnim = false;
} public void setInterpolator(TimeInterpolator interpolator) {
mInterpolator = interpolator;
} public void setDuration(long duration) {
mDuration = duration;
} public void setRadius(float factor) {
stopAnim();
calPoints(factor);
startAnim();
} static class ArcPoint {
float x;
float y;
int color; ArcPoint(float x, float y, int color) {
this.x = x;
this.y = y;
this.color = color;
}
} }
EaseInOutCubicInterpolator是自定义view(CircleProgress )中要是用的一个工具
package com.hysmarthotel.util; import android.animation.TimeInterpolator; public class EaseInOutCubicInterpolator implements TimeInterpolator { @Override
public float getInterpolation(float input) {
if ((input *= 2) < 1.0f) {
return 0.5f * input * input * input;
}
input -= 2;
return 0.5f * input * input * input + 1;
} }
在activity中的调用(还有一些其他用法可以自己看看github上的源代码)
mProgressView = (CircleProgress)findViewById(R.id.progress_vie);
mProgressView.startAnim(); //开始 mProgressView.stopAnim(); //结束 mProgressView.setRadius(factor); //半径 mProgressView.reset(); //复原
在xml文件中的布局
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:circleprogress="http://schemas.android.com/apk/res/com.hysmarthotel.roomcontrol" //这个地方记得要加 //包名
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg1" > <com.hysmarthotel.view.CircleProgress //类名
android:id="@+id/progress_vie"
android:layout_x="350.5px"
android:layout_y="150.0px"
android:layout_width="1140.0px"
android:layout_height="700.0px"
circleprogress:color1="@android:color/holo_red_light" //这些参数就是通过xmlns:circleprogress,和attrs文件相关联的
circleprogress:color2="@android:color/holo_green_light" circleprogress:color3="@android:color/holo_blue_light" />
自己在values目录中新建的attrs文件,这是与自定义view中自定义参数相关的
<declare-styleable name="CircleProgress">
<attr name="color1" format="reference|color"/>
<attr name="color2" format="reference|color"/>
<attr name="color3" format="reference|color"/>
</declare-styleable>
自己在values目录中新建的dimens文件,这个只是几个颜色参数
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="default_circle_view_size">200dp</dimen>
</resources>
自定义加载loading view动画组件的使用。的更多相关文章
- 页面预加载loading动画,再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
- Android 自定义View修炼-自定义加载进度动画XCLoadingImageView
一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...
- [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- html自定义加载动画
整体代码 HTML 实现自定义加载动画,话不多说如下代码所示: <!DOCTYPE html> <html lang="en"> <head> ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 简易仿ios菊花加载loading图
原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...
- 一个很酷的加载loading效果--IT蓝豹
一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 ...
- Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果
1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...
随机推荐
- 收集的React.JS资料
主页 http://facebook.github.io/react/ https://github.com/facebook/react 中文站 http://www.reactjs.cn/ h ...
- Android开发之Toast
第一次在博客园发布文章,就把我刚弄明白的关于Android开发中的提示设置,分享给大家. Toast是Android中经常用到的一个方法,用于简单的用户提示,经过摸索我发现了Toast的两种使用方式, ...
- 将 instance 连接到 second_local_net - 每天5分钟玩转 OpenStack(85)
今天是 local network 的最后一个小节,我们将验证两个local network 的连通性. launch 新的 instance “cirros-vm3”,网络选择 second_loc ...
- 把DATATABLE,DS中的内容用HTML的方式显示
前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...
- iOS开发之使用XMPPFramework实现即时通信(二)
上篇的博客iOS开发之使用XMPPFramework实现即时通信(一)只是本篇的引子,本篇博客就给之前的微信加上即时通讯的功能,主要是对XMPPFramework的使用.本篇博客中用到了Spark做测 ...
- 1Z0-053 争议题目解析501
1Z0-053 争议题目解析501 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 501.Note the output of the following query; SQL&g ...
- 移动端(h5)开发笔记
1.禁止缩放+禁止缓存 <head> <meta charset="UTF-8" /> <meta name="viewport" ...
- Cesium应用篇:1快速搭建
范例中所有范例可以在Github中搜索:ExamplesforCesium Cesium ['siːzɪəm]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二 ...
- Apple的LZF算法解析
有关LZF算法的相关解析文档比较少,但是Apple对LZF的开源,可以让我们对该算法进行一个简单的解析.LZFSE 基于 Lempel-Ziv ,并使用了有限状态熵编码.LZF采用类似lz77和lzs ...
- 基于 Hive 的文件格式:RCFile 简介及其应用
转载自:https://my.oschina.net/leejun2005/blog/280896 Hadoop 作为MR 的开源实现,一直以动态运行解析文件格式并获得比MPP数据库快上几倍的装载速度 ...