Android实用视图动画及工具系列之三：表情加载动画和失败加载动画，人物加载动画

来源：互联网发布：帝国cms写进销存系统编辑：程序博客网时间：2024/05/18 01:09

实现效果

功能说明

网速慢时，加载网络数据时，界面怎么处理才美观？载入失败或网络丢包时，如何让界面显得更和谐？这一直是开发人员和美工人员不绝于耳的问题，为了达到功能和UI的完美交互，我们不得不做一些基本的美化操作，本文就编写举例一个Android载入显示和载入失败的小Demo供大家参考。

这篇Blog主要实现了自定义有趣的动画载入视图，适用于各种网络及数据库数据载入UI界面显示，主要有载入动画和载入失败动画两种效果，主要功能原理利用了安卓逐帧动画和多视图布局原理，适用于新手及新学习Android的码友们，老玩家当然也可以看看，这个还是挺简单挺实用的，在后面会简略介绍实现方法及源代码，同时博客的最后还提供源代码和图片等资源github下载地址。

这篇文章的逐帧动画实现就不做详细介绍，前面的文章我有详细的介绍：

--------------------------------------------------------------------------------------------------------------------

Android实用视图动画及工具系列之一：简单的载入视图和载入动画：

http://blog.csdn.net/jaikydota163/article/details/52098833

Android实用视图动画及工具系列之二：Toast对话框和加载载入对话框：

http://blog.csdn.net/jaikydota163/article/details/52098841

--------------------------------------------------------------------------------------------------------------------

实现步骤

步骤一：添加逐帧动画资源和帧布局Drawable

顾名思义，逐帧动画就是一帧一帧的播放，在Android原生组件不主持gif的情况下，我们要实现逐帧动画只能使用一张一张图片来逐帧播放以达到效果，如下面的几张图（其他图片资源在源代码内，需要的自行下载）：

将所有帧图片导入到Android项目目录的drawable文件夹下：

在drawable目录下新建face_progressbar_default.xml，和face_progressbar_failed.xml，输入如下代码（附属性说明）：

animation-list：Android动画列表；oneshot：true播放一次，false循环播放；item：每项动画；android:drawable：图片索引；android:duration：每帧持续时间。

新建face_progressbar_default.xml：

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false" >    <item android:duration="100" android:drawable="@drawable/global_face_loading1"></item>    <item android:duration="100" android:drawable="@drawable/global_face_loading2"></item></animation-list>

新建face_progressbar_failed.xml文件：

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false" >    <item android:duration="100" android:drawable="@drawable/global_face_loadfail1"></item>    <item android:duration="100" android:drawable="@drawable/global_face_loadfail2"></item></animation-list>

步骤二：自定义动画类

新建类FaceImageView，代码如下，此类主要继承自ImageView，实现了基本动画播放，暂停和停止功能，注意包名改为自己的：

package com.jaiky.test.faceloadingview;import android.content.Context;import android.graphics.drawable.AnimationDrawable;import android.util.AttributeSet;import android.widget.ImageView;/** * Loading Faceview * @author Jaiky * @date Jul 4, 2016 * PS: Not easy to write code, please indicate. */public class FaceImageView extends ImageView{    private AnimationDrawable loadingDrawable;    private AnimationDrawable failedDrawable;    public FaceImageView(Context context) {        super(context);        init();    }    public FaceImageView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public FaceImageView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    public void init(){        setImageResource(R.drawable.face_progressbar_default);        loadingDrawable = (AnimationDrawable) getDrawable();        failedDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.face_progressbar_failed);        loadingDrawable.start();    }    /**     * 设置载入失败     */    public void setFailed() {        setImageDrawable(failedDrawable);        failedDrawable.start();    }    /**     * 设置正在载入     */    public void setloading() {        setImageDrawable(loadingDrawable);        loadingDrawable.start();    }    public void startAnimation(){        AnimationDrawable anim = (AnimationDrawable) getDrawable();        anim.start();    }    public void stopAnimation(){        AnimationDrawable anim = (AnimationDrawable) getDrawable();        //停留在第一针        anim.setVisible(true, true);        anim.stop();    }    public void pauseAnimation(){        AnimationDrawable anim = (AnimationDrawable) getDrawable();        anim.stop();    }}

新建类FaceImageView，此类主要用于控制帧动画的显示，隐藏，以及失败等，代码如下：

package com.jaiky.test.faceloadingview;import android.content.Context;import android.graphics.Color;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.Gravity;import android.view.View;import android.widget.FrameLayout;import android.widget.TextView;/** * Loading Faceview * @author Jaiky * @date Jul 4, 2016 * PS: Not easy to write code, please indicate. */public class FaceLoadingView extends FrameLayout{    private TextView tvInfo;    private FaceImageView faceView;    public FaceLoadingView(Context context) {        super(context);        init(context);    }    public FaceLoadingView(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    public FaceLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    public void init(Context context){        //设置动画视图        faceView = new FaceImageView(context);        DisplayMetrics dm = getResources().getDisplayMetrics();        //int widthHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 220, dm);        LayoutParams faceLayout = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);        faceLayout.gravity = Gravity.CENTER;        faceView.setLayoutParams(faceLayout);        //设置显示文本        tvInfo = new TextView(context);        LayoutParams tvLayout = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        tvLayout.gravity = Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM;        tvLayout.bottomMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, dm);        tvLayout.leftMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, dm);        tvInfo.setLayoutParams(tvLayout);        tvInfo.setText("努力加载中...");        tvInfo.setTextColor(Color.parseColor("#757575"));        tvInfo.setTextSize(TypedValue.COMPLEX_UNIT_SP, 11);        //添加到布局        addView(faceView);        addView(tvInfo);    }    public void setFailed() {        setVisibility(View.VISIBLE);        faceView.setFailed();        tvInfo.setText("载入失败，请刷新尝试...");    }    public void setFailedWithMsg(String msg) {        setVisibility(View.VISIBLE);        faceView.setFailed();        tvInfo.setText(msg);    }    public void setloading() {        setVisibility(View.VISIBLE);        faceView.setloading();        tvInfo.setText("努力加载中...");    }    public void setloadingWithMsg(String msg) {        setVisibility(View.VISIBLE);        faceView.setloading();        tvInfo.setText(msg);    }    /**     * 隐藏视图     */    public void hiddenView(){        setVisibility(View.GONE);    }    /**     * 显示视图     */    public void show(){        setVisibility(View.VISIBLE);    }    /**     * 设置加载消息内容     *     * @param msg     */    public void setMsg(String msg) {        tvInfo.setText(msg);    }}

步骤三：Demo测试修改布局和主类

修改activity_main.xml内容如下（注意自定义控件包名）：

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.jaiky.test.faceloadingview.MainActivity">    <Button        android:id="@+id/btn1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="载入成功"/>    <Button        android:id="@+id/btn2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="载入失败"/></LinearLayout>

新建布局文件activity_list.xml：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.jaiky.test.faceloadingview.MainActivity">    <com.jaiky.test.faceloadingview.FaceLoadingView        android:id="@+id/faceView"        android:layout_width="220dp"        android:layout_height="220dp"        android:layout_centerInParent="true"/>    <TextView        android:id="@+id/mTextView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="显示加载后的数据\nShow loaded Data"        android:background="@color/colorAccent"        android:textColor="#ffffff"        android:gravity="center"        android:textSize="25sp"/></RelativeLayout>

修改MainActiivty类内容如下（注意包名）：

package com.jaiky.test.faceloadingview;import android.content.Intent;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;public class MainActivity extends AppCompatActivity {    Button btn1, btn2;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btn1 = (Button) findViewById(R.id.btn1);        btn2 = (Button) findViewById(R.id.btn2);        btn1.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Intent intent = new Intent(MainActivity.this, ListActivity.class);                intent.putExtra("isFail", false);                startActivity(intent);            }        });        btn2.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Intent intent = new Intent(MainActivity.this, ListActivity.class);                intent.putExtra("isFail", true);                startActivity(intent);            }        });    }}

新建ListAcitivity类，用于测试：

package com.jaiky.test.faceloadingview;import android.os.Bundle;import android.os.Handler;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.TextView;public class ListActivity extends AppCompatActivity {    TextView mTextView;    FaceLoadingView mFaceLoadingView;    boolean isFail;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_list);        mFaceLoadingView = (FaceLoadingView) findViewById(R.id.faceView);        mTextView = (TextView) findViewById(R.id.mTextView);        mTextView.setVisibility(View.GONE);        isFail = getIntent().getBooleanExtra("isFail", false);        //Simulate get data        if (isFail) {            new Handler().postDelayed(new Runnable() {                @Override                public void run() {                    mFaceLoadingView.setFailed();                }            }, 5000);        }        else {            new Handler().postDelayed(new Runnable() {                @Override                public void run() {                    mFaceLoadingView.hiddenView();                    mTextView.setVisibility(View.VISIBLE);                }            }, 5000);        }    }}

最后是在AndroidManifest文件加入新的Activity：

<activity android:name=".ListActivity"></activity>

--------------------------------------------------------------------------------------------------------------------

获取源代码及资源文件：

https://github.com/jaikydota/Android-FaceLoadingView

--------------------------------------------------------------------------------------------------------------------

声明

欢迎转载，但请保留文章原始出处
作者：Jaiky_杰哥
出处：http://blog.csdn.net/jaikydota163/article/details/52098851

17 2