1、使用背景
一般我们安装App之后,第一次打开app都会有个初始化app数据的操作,这时候需要一个loding的动画增强用户与界面的交互。
2、制作方法
首先制作loding转圈动画,代码如下
package com.wlx.utils;
import com.example.hangzhouapp.R;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class WaitAnimAurfaceView extends View {
private Paint paint;
private float viewWidth = 80;
private float viewHeight = 80;
private float picWidth;
private float picHeight;
Bitmap bitmap;
public float angle = 90;
public WaitAnimAurfaceView(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
paint.setAntiAlias(true);
bitmap = BitmapFactory.decodeResource(context.getResources(),R.drawable.star);
picWidth = bitmap.getWidth();
picHeight = bitmap.getHeight();
}
@Override
public void onDraw(Canvas canvas)
{
paint.setColor(Color.WHITE);
float left=(viewWidth-picWidth)/2+80;
float top=(viewHeight-picHeight)/2+80;
Matrix m1=new Matrix();
m1.setTranslate(left,top);
Matrix m3=new Matrix();
m3.setRotate(angle, viewWidth/2+80, viewHeight/2+80);
Matrix mzz=new Matrix();
mzz.setConcat(m3, m1);
canvas.drawBitmap(bitmap, mzz, paint);
}
public void repaint()
{
//使当前页面无效,这样可以调用onDraw()函数重新绘画当前界面
this.invalidate();
}
}
onDraw()方法中先设置画笔颜色,然后用Canvas的对象开始绘制该矩阵,当获得左上侧点的坐标后,将Matrix平移到该坐标位置,然后设置旋转度,最后将两个Matrix对象计算并连接起来由Canvas开始绘制自定义的动画。
接下来我们要在欢迎界面上弹出AlertDialog显示loding的动画,代码如下:
package com.wlx.activity;
import com.example.hangzhouapp.R;
import com.wlx.utils.Constants;
import com.wlx.utils.WaitAnimAurfaceView;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.Window;
public class WelcomeActivity extends Activity {
Dialog dialog;
WaitAnimAurfaceView anim;
@SuppressLint("HandlerLeak")
Handler handler = new Handler(){
@Override
public void handleMessage(Message msg)
{
if(msg.what == Constants.WAIT_DIALOG_REPAINT)
{
anim.repaint();
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_welcome);
showDialog(Constants.WAIT_DIALOG);
}
@Override
public Dialog onCreateDialog(int id)
{
Dialog result = null;
if(id == Constants.WAIT_DIALOG)
{
AlertDialog.Builder waitDialog = new AlertDialog.Builder(this);
waitDialog.setItems(null, null);
waitDialog.setCancelable(false);
dialog = waitDialog.create();
result = dialog;
}
return result;
}
@Override
public void onPrepareDialog(int id,final Dialog dialog)
{
if(id != Constants.WAIT_DIALOG) return;
dialog.setContentView(R.layout.anim_loding);
anim = (WaitAnimAurfaceView) dialog.findViewById(R.id.anim);
new Thread(){
@Override
public void run()
{
for(int i = 0; i < 200; i++)
{
anim.angle += 5;
handler.sendEmptyMessage(Constants.WAIT_DIALOG_REPAINT);
try {
sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
dialog.cancel();
//在这里进行初始化app数据的操作
}
}.start();
}
}
上面的代码创建了Handler对象,重写handleMessage()方法用来接收重新绘图的信息。重写了OnCreateDialog()和onPrepareDialog()方法。当对话框第一次被请求的时候,调用onCreateDialog()方法,在这个方法中初始化对话框对象Dialog。在每次显示对话框之前,调用onPrepareDialog()方法加载动画。
以上代码中用到的layout文件的代码:
欢迎界面代码activity_welcome.xml,只有一个背景图片,非常简单。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WelcomeActivity"
tools:ignore="MergeRootFrame"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
/>
</LinearLayout>
对话框显示的界面anim_loding.xml,使用了自定义的view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.wlx.utils.WaitAnimAurfaceView
android:id="@+id/anim"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="110dp"
android:layout_marginTop="250dp"/>
</LinearLayout>
3、效果图