版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】怎么在android中自定义一个波浪加载动画
这篇文章给大家介绍怎么在android中自定义一个波浪加载动画，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Android是一种基于Linux内核的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由美国Google公司和开放手机联盟领导及开发。1.自定义控件WaveViewpackage
com.example.wh.myapplication;
import
android.content.Context;
import
android.content.res.TypedArray;
import
android.graphics.Canvas;
import
android.graphics.Color;
import
android.graphics.Paint;
import
android.graphics.Path;
import
android.support.annotation.Nullable;
import
android.support.v4.content.ContextCompat;
import
android.util.AttributeSet;
import
android.view.View;
import
java.text.DecimalFormat;
public
class
WaveView
extends
View
{
/**
*
默认波浪1长度
*/
private
final
int
WAVE_LENGTH1
=
600;
/**
*
默认波浪1高度
*/
private
final
int
WAVE_HEIGHT1
=
30;
/**
*
波浪1高度
*/
private
int
mWaveHeight1
=
WAVE_HEIGHT1;
/**
*
波浪1长度
*/
private
int
mWaveLenght1
=
WAVE_LENGTH1;
/**
*
默认波浪1颜色
*/
private
final
int
WAVE_COLOR1
=
Color.parseColor("#0000ff");
/**
*
默认边框颜色
*/
private
final
int
BORDER_COLOR
=
Color.parseColor("#800000ff");
/**
*
默认文字颜色
*/
private
final
int
DEFAULT_TEXT_COLOR
=
Color.parseColor("#ff0000");
/**
*
默认文字大小
*/
private
final
int
DEFAULT_TEXT_SIZE
=
30;
/**
*
文字颜色
*/
private
int
mTextColor
=
DEFAULT_TEXT_COLOR;
/**
*
文字大小
*/
private
int
mTextSize
=
DEFAULT_TEXT_SIZE;
/**
*
波浪1颜色
*/
private
int
mWaveColor1
=
WAVE_COLOR1;
/**
*
默认每一次重绘时波峰1的移动的距离，实现移动效果
*/
private
final
int
WAVE_OFFSET1
=
8;
/**
*
每一次重绘时波峰1的移动的距离，实现移动效果
*/
private
int
mOffset1
=
WAVE_OFFSET1;
/**
*
默认边框宽度
*/
private
final
int
BORDER_WIDTH
=
2;
/**
*
边框颜色
*/
private
int
mBorderColor
=
BORDER_COLOR;
/**
*
边框宽度
*/
private
int
mBorderWidth
=
BORDER_WIDTH;
/**
*
绘制的高度，百分比。0表示内有高度，1表示全部高度
*/
private
float
mPrecent
=
0.5f;
/**
*
形状枚举，暂时只支持矩形和圆形，可扩展
*/
public
enum
ShowShape
{
RECT
}
/**
*
形状默认矩形
*/
private
ShowShape
mShape
=
ShowShape.RECT;
/**
*
默认两次重绘之间间隔的时间，5毫秒
*/
private
final
int
DEFAULT_TIME
=
5;
/**
*
两次重绘之间间隔的时间，毫秒。
*/
private
int
mTime
=
DEFAULT_TIME;
/**
*
设置两次重绘之间的间隔时间，毫秒
*
*
@param
time
*
@return
*/
public
WaveView
setTime(int
time)
{
this.mTime
=
time;
return
this;
}
/**
*
波浪1画笔
*/
private
Paint
mWavePaint1;
/**
*
边框画笔
*/
private
Paint
mBorderPaint;
/**
*
文字画笔
*/
private
Paint
mTextPaint;
/**
*
波浪1路径
*/
private
Path
mWavePath2;
/**
*
定义数字格式转行类
*/
private
DecimalFormat
mFormat;
/**
*
控件的宽度
*/
private
int
mWidth;
/**
*
控件的高度
*/
private
int
mHeight;
/**
*
水位上升时不断变化的
y
坐标
*/
private
float
mChangeY;
/**
*
水位最终的高度，通过控件的高度和百分比计算出来
*/
private
float
mFinalY;
/**
*
波峰的个数
*/
private
int
mWaveCount
=
8;
/**
*
重置标记，开始为重置状态
*/
private
boolean
isReset
=
true;
/**
*
当前百分比
*/
private
float
mCurrentPrecent
=
0.0f;
/**
*
重绘值波峰移动距离的和
*/
private
int
mMoveSum1;
/**
*
能够绘制标记位，开始不能绘制
*/
private
boolean
invalidateFlag
=
false;
/**
*
百分比改变监听
*/
private
PrecentChangeListener
mPrecentChangeListener;
/**
*
百分比改变监听接口
*/
public
interface
PrecentChangeListener
{
/**
*
百分比发生改变时调用的方法
*
*
@param
precent
当前的百分比，格式
0.00
范围
[0.00
,
1.00]
*/
void
precentChange(double
precent);
}
public
WaveView(Context
context)
{
this(context,
null);
}
public
WaveView(Context
context,
@Nullable
AttributeSet
attrs)
{
this(context,
attrs,
0);
}
public
WaveView(Context
context,
@Nullable
AttributeSet
attrs,
int
defStyleAttr)
{
super(context,
attrs,
defStyleAttr);
initAttrs(context,
attrs);
//
获取布局文件中dingy9i的属性
init();
}
//获取布局中的初始属性
private
void
initAttrs(Context
context,
AttributeSet
attrs)
{
TypedArray
typedArray
=
context.obtainStyledAttributes(attrs,
R.styleable.WaveView);
mWaveLenght1
=
typedArray.getInteger(R.styleable.WaveView_wave1Length,
WAVE_LENGTH1);
mWaveHeight1
=
typedArray.getInteger(R.styleable.WaveView_wave1Height,
WAVE_HEIGHT1);
mWaveColor1
=
typedArray.getColor(R.styleable.WaveView_wave1Color,
WAVE_COLOR1);
mOffset1
=
typedArray.getInteger(R.styleable.WaveView_wave1Offset,
WAVE_OFFSET1);
mBorderWidth
=
typedArray.getDimensionPixelSize(R.styleable.WaveView_borderWidth,
BORDER_WIDTH);
mBorderColor
=
typedArray.getColor(R.styleable.WaveView_borderColor,
BORDER_COLOR);
mTime
=
typedArray.getInteger(R.styleable.WaveView_intervalTime,
DEFAULT_TIME);
mPrecent
=
typedArray.getFloat(R.styleable.WaveView_precent,
0.5f);
/**
*
绘制的高度，百分比。0表示内有高度，1表示全部高度
*/
int
shapeValue
=
typedArray.getInteger(R.styleable.WaveView_showShape,
0);
mShape
=
ShowShape.RECT;
typedArray.recycle();
}
private
void
init()
{
mWavePaint1
=
new
Paint(Paint.ANTI_ALIAS_FLAG);
mBorderPaint
=
new
Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint
=
new
Paint(Paint.ANTI_ALIAS_FLAG);
mWavePath2
=
new
Path();
mWavePaint1.setColor(mWaveColor1);
mWavePaint1.setStyle(Paint.Style.FILL);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStrokeWidth(mBorderWidth);
mBorderPaint.setStyle(Paint.Style.STROKE);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
//
定义数字显示个格式
mFormat
=
new
DecimalFormat("###,###,##0.00");
}
@Override
protected
void
onSizeChanged(int
w,
int
h,
int
oldw,
int
oldh)
{
super.onSizeChanged(w,
h,
oldw,
oldh);
mWidth
=
w;
mHeight
=
h;
mChangeY
=
mHeight;
//
计算波峰个数，为了实现移动效果，保证至少绘制两个波峰
mFinalY
=
(1
-
mPrecent)
*
mHeight;
//
计算水位最终高度
}
@Override
protected
void
onDraw(Canvas
canvas)
{
mWavePath2.reset();
if
(mBorderWidth
>
0)
{
//
边框大于0,表示需要绘制边框
if(mShape
==
ShowShape.RECT)
{
canvas.drawRect(0,
0,
mWidth,
mHeight,
mBorderPaint);
}
}
mWavePath2.moveTo(-mWaveLenght1,
mChangeY);
if
(!isReset)
{
//
判断重置标记
//
利用贝塞尔曲线绘制波浪
for
(int
i
=
0;
i
<
mWaveCount;
i++)
{
//
绘制波浪1的曲线
mWavePath2.quadTo((-mWaveLenght1
*
3
/
4)
+
(i
*
mWaveLenght1)
+
mMoveSum1,
mChangeY
+
mWaveHeight1,
(-mWaveLenght1
/
2)
+
(i
*
mWaveLenght1)
+
mMoveSum1,
mChangeY);
mWavePath2.quadTo((-mWaveLenght1
*
1
/
4)
+
(i
*
mWaveLenght1)
+
mMoveSum1,
mChangeY
-
mWaveHeight1,
(i
*
mWaveLenght1)
+
mMoveSum1,
mChangeY);
}
//
不断改变高度，实现逐渐水位逐渐上涨效果
mChangeY
-=
1;
if
(mChangeY
<
mFinalY)
mChangeY
=
mFinalY;
//
波峰1往右移动，波峰2往左移动
mMoveSum1
+=
mOffset1;
if
(mMoveSum1
>=
mWaveLenght1)
mMoveSum1
=
0;
//
填充矩形，让上涨之后的水位下面填充颜色
mWavePath2.lineTo(mWidth,
mHeight);
mWavePath2.lineTo(0,
mHeight);
mWavePath2.close();
canvas.drawPath(mWavePath2,
mWavePaint1);
}
else
{
//
是重置
canvas.drawColor(Color.TRANSPARENT);
}
//
计算当前的百分比
mCurrentPrecent
=
1
-
mChangeY
/
mHeight;
//
格式化数字格式
String
format1
=
mFormat.format(mCurrentPrecent);
//
绘制文字，将百分比绘制到界面。此处用的是
"50%"
的形式，可以根据需求改变格式
double
parseDouble
=
Double.parseDouble(format1);
canvas.drawText((int)
(parseDouble
*
100)
+
"
%",
(mWidth
-
mTextPaint.measureText(format1))
/
2,
mHeight
/
5,
mTextPaint);
//
监听对象不为null并且没有达到设置高度时，调用监听方法
if
(mPrecentChangeListener
!=
null
&&
mChangeY
!=
mFinalY)
{
mPrecentChangeListener.precentChange(parseDouble);
}
//高度到达设置高度
if
(mChangeY
==
mFinalY){
canvas.drawColor(ContextCompat.getColor(getContext(),
R.color.bowencolor));
}
//
判断绘制标记
if
(invalidateFlag)
postInvalidateDelayed(mTime);
}
/**
*
设置边框宽度
*
*
@param
borderWidth
*
@return
*/
public
WaveView
setBorderWidth(int
borderWidth)
{
this.mBorderWidth
=
borderWidth;
return
this;
}
/**
*
设置波浪1颜色
*
*
@param
waveColor1
*
@return
*/
public
WaveView
setWaveColor1(int
waveColor1)
{
this.mWaveColor1
=
waveColor1;
return
this;
}
/**
*
设置边框颜色
*
*
@param
borderColor
*
@return
*/
public
WaveView
setBorderColor(int
borderColor)
{
this.mBorderColor
=
borderColor;
return
this;
}
/**
*
设置文字颜色
*
*
@param
textColor
*
@return
*/
public
WaveView
setTextColor(int
textColor)
{
this.mTextColor
=
textColor;
return
this;
}
/**
*
设置百分比
*
*
@param
precent
*
@return
*/
public
WaveView
setPrecent(float
precent)
{
this.mPrecent
=
precent;
return
this;
}
/**
*
设置文字大小
*
*
@param
textSize
*
@return
*/
public
WaveView
setTextSize(int
textSize)
{
this.mTextSize
=
textSize;
return
this;
}
/**
*
设置当前显示形状
*
*
@param
shape
*
@return
*/
public
WaveView
setShape(ShowShape
shape)
{
this.mShape
=
shape;
return
this;
}
/**
*
开始
*/
public
void
start()
{
invalidateFlag
=
true;
isReset
=
false;
postInvalidateDelayed(mTime);
}
/**
*
暂停
*/
public
void
stop()
{
invalidateFlag
=
false;
isReset
=
false;
}
/**
*
重置
*/
public
void
reset()
{
invalidateFlag
=
false;
isReset
=
true;
mChangeY
=
mHeight;
postInvalidate();
}
}2.attrs<?xml
version="1.0"
encoding="utf-8"?>
<resources>
<!--自定义水波纹效果属性-->
<declare-styleable
name="WaveView">
<!--波浪1的长度、高度、颜色和每次重绘的偏移量-->
<attr
name="wave1Length"
format="integer"
/>
<attr
name="wave1Height"
format="integer"
/>
<attr
name="wave1Color"
format="color"
/>
<attr
name="wave1Offset"
format="integer"
/>
<!--边框的宽度和颜色-->
<attr
name="borderWidth"
format="dimension"
/>
<attr
name="borderColor"
format="color"
/>
<!--文字的大小和颜色-->
<attr
name="textColor"
format="color"
/>
<attr
name="textSize"
format="dimension"
/>
<!--水位高度的百分比-->
<attr
name="precent"
format="float"
/>
<!--两次重绘的间隔时间-->
<attr
name="intervalTime"
format="integer"
/>
<!--控件的显示形状，rect矩形、circle圆形-->
<attr
name="showShape"
format="enum">
<enum
name="rect"
value="0"
/>
<enum
name="circle"
value="1"
/>
</attr>
</declare-styleable>
</resources>3.布局<?xml
version="1.0"
encoding="utf-8"?>
<LinearLayout
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.wh.myapplication.MainActivity">
<com.example.wh.myapplication.WaveView
android:id="@+id/waveview1"
android:layout_width="200dp"
android:layout_height="200dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="horizontal">
<Button
android:id="@+id/bt_start"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="开始"/>
<Button
android:id="@+id/bt_stop"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="暂停"/>
<Button
android:id="@+id/bt_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="重置"/>
</LinearLayout>
</LinearLayout>4.MainActivitypackage
com.example.wh.myapplication;
import
android.graphics.Color;
import
android.support.v7.app.AppCompatActivity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.Button;
public
class
MainActivity
extend
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 我国医药科技企业的技术经营
- 四下基层主动践行一线工作法辅导讲稿
- 工业三废处理方法应急预案
- 客运企业船岸应急预案方案
- 高中自我陈述报告范文600字（14篇）
- 领导述职报告范文（30篇）
- 银行实习报告（30篇）
- 酒店前台人员年终工作总结（5篇）
- 甘肃省古浪县重点名校2024年中考考前最后一卷物理试卷含解析
- 车辆报废处理请示（10篇）
- AQ-T 1089-2020 煤矿加固煤岩体用高分子材料
- Unit5Whydoyoulikepandas？-七年级英语下册单元速记巧练（人教版）
- 期中培优检测卷（四）-2023-2024学年语文四年级下册统编版
- 2024-2030年中国汽车驾陪服务市场竞争格局分析及投资方向研究报告
- 小班语言《好饿的小蛇》课件
- 《做个“开心果”》(完美版)课件教学课件
- 《个变化中的世界》课件
- 2024吉林省民航机场集团有限公司招聘笔试参考题库附带答案详解
- 土木工程及岩土专业词汇
- 《槟榔的危害》课件
- 银行诉讼业务培训课件
评论
0/150
提交评论