实现网络请求时特定的加载动画

第一篇博客，有点小小的激动。有些做过的东西当时可能记得很清楚，但是时间久了就会慢慢忘记，所以才决定开始记录一些。先写个最简单的加载动画。

首先来看一下效果图，就如中间哪里书翻页的效果。此动画是用帧动画来实现的。

帧动画是顺序播放一组预先定义好的图片，类似与电影播放。系统提供了AnimationDrawable来使用帧动画。帧动画的使用也比较简单接下来看一下它的使用吧。

1.首先通过XML来定义一个AnimationDrawable。在你的drawable文件中新建一个名字为progress_alert_layout.xml的xml文件。如下所示，动画的图片就需要你的UI设计师来提供了。注意避免使用过多尺寸较大的图片。

<?xml version="1.0" encoding="utf-8"?><!--
03.    根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
04.    根标签下，通过item标签对动画中的每一个图片进行声明
05.    android:duration 表示展示所用的该图片的时间长度
06. -->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/new_progress1"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress2"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress3"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress4"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress5"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress6"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress7"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress8"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress9"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress10"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress11"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress12"
        android:duration="70" />

    <item
        android:drawable="@drawable/new_progress13"
        android:duration="70" />

    <item
        android:drawable="@drawable/new_progress14"
        android:duration="70" />
    <item
        android:drawable="@drawable/new_progress15"
        android:duration="70" />

</animation-list>

2.这个动画我是用Dialog显示出来，为了方便使用我就写了一个继承Dialog的加载动画类。

public class ProgressAnimAlert extends Dialog {

    private String text;
    private AnimationDrawable animationDrawable;

    public ProgressAnimAlert(Context context) {
        super(context, R.style.Translucent_NoTitle);
    }

    public ProgressAnimAlert(Context context, String text) {
        super(context, R.style.Translucent_NoTitle);  //这里设置了Dialog的Style让其背景为透明的，并且没有title，具体代码就不贴了
        this.text = text;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.progress_alert_layout);
        //按空白处不能取消动画
        setCanceledOnTouchOutside(false);
        if (text!= null){
            TextView textView = (TextView) findViewById(R.id.progress_text);
            textView.setText(text);
        }
        ImageView progressImageView = (ImageView) findViewById(R.id.progress_image); //在ImageView上使用帧动画
        animationDrawable = (AnimationDrawable) getContext().getResources().getDrawable(R.drawable.progress_alert_anim); //帧动画的初始化
        progressImageView.setImageDrawable(animationDrawable); //将动画设置在ImageView上
    }

    /**
     * 开始帧动画
     */
    @Override
    protected void onStart() {
        animationDrawable.start();
        super.onStart();
    }

    /**
     * 停止帧动画
     */
    @Override
    protected void onStop() {
        animationDrawable.stop();
        super.onStop();
    }

3.Dialog的progress_alert_layout布局文件如下，这里可以根据自己的需求定义自己需要的布局样式

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ffffff">

    <RelativeLayout
        android:id="@+id/progress_bg"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:layout_centerInParent="true"
        android:background="@drawable/progress_alert_circle">

        <ImageView
            android:id="@+id/progress_image"
            android:layout_width="90dp"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:paddingTop="10dp"
            android:scaleType="fitCenter" />

        <TextView
            android:id="@+id/progress_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/progress_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-10dp"
            android:text="努力加载中..."
            android:textColor="#999999"
            android:textSize="12sp" />
    </RelativeLayout>
</RelativeLayout>

4.最后就是在代码中使用就可以了

ProgressAnimAlert progressAnimAlert = new ProgressAnimAlert(getView(), "正在加载中...");

通过调用Dialog的show()和dismiss()来控制加载动画的显示和消失。

实现网络请求时特定的加载动画

猜你喜欢