查看原文
其他

一个精美的加载动画就是如此简单—手把手教你撸一个dialog加载动画

2017-08-02 想你依然心痛 终端研发部


前言介绍

一个精美的加载动画

想你依然心痛的博客地址:

http://blog.csdn.net/u014727709/article/details/54584894

正文 

首先我们来看一下效果图:

 

做开发的时候,为了让用户体验比较好一点,app启动的时候会有一个启动欢迎页,那么进入到app以后,用户浏览页面,首先会进行网络请求,然后服务器响应数据回来,最后展示到页面上,用户才能看到丰富的页面。那么问题就来了,用户的网络有2G、3G、4G,现在一般是4G,但是用户的网络是不一样的,有些地方网络好,有些比较慢,加载网络数据的时候,网络太慢了就会显示一篇空白,这给用户的体验是非常不好的,所以就到了本节的内容,加载网络数据并且数据还会返回的时候给用户显示一个Loading动画,当然,Android自带的有,这里我们自定义一个Load动画。

下面我们来看一下代码部分,首先是自定义的SysLoading.Java:

 public class SysLoading extends LinearLayout{
   private
View view;//自定义动画
   private AnimationDrawable mAnimation;//加载失败视图
   private RelativeLayout sys_loading_dialog_fail;//加载中图片
   private ImageView sys_loading_dialog_img;//加载中文本
   private TextView sys_loading_dialog_tv;//加载失败文本
   private TextView sys_loading_dialog_fail_tv;//加载时文本
   private String loadingText;
   
   public SysLoading(Context context)
{    
       super(context);    }
   public SysLoading(Context context, AttributeSet attrs) {    
       super(context, attrs);        LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);        view = layoutInflater.inflate(R.layout.sys_loading_dialog, this);    //加载失败视图        sys_loading_dialog_fail = (RelativeLayout) view.findViewById(R.id.sys_loading_dialog_fail);    //加载时图片        sys_loading_dialog_img = (ImageView) view.findViewById(R.id.sys_loading_dialog_img);    //加载时文本        sys_loading_dialog_tv = (TextView) view.findViewById(R.id.sys_loading_dialog_tv);        sys_loading_dialog_fail_tv = (TextView) view.findViewById(R.id.sys_loading_dialog_fail_tv);    }
   public void showAnim(String loadingText){  
         this.loadingText = loadingText;    //设置动画特效          initData();    }
   public void stopAnim(){        mAnimation.stop();    }
   public void initData() {    //设置文本        sys_loading_dialog_tv.setText(loadingText);    //设置显示        view.setVisibility(View.VISIBLE);    //设置加载时图片显示        sys_loading_dialog_img.setVisibility(View.VISIBLE);    //设置加载时文本显示        sys_loading_dialog_tv.setVisibility(View.VISIBLE);    //设置失败视图隐藏        sys_loading_dialog_fail.setVisibility(View.GONE);    //获取动画        sys_loading_dialog_img.setBackgroundResource(R.drawable.sys_loading);    //通过ImageView拿到AnimationDrawable        mAnimation = (AnimationDrawable) sys_loading_dialog_img.getBackground();    //为了防止只显示第一帧        sys_loading_dialog_img.post(new Runnable() {        
           @Override        public void run() {            mAnimation.start();        }    });    }
  //加载失败调用的方法
public void fialLoad(String failStr, View.OnClickListener listener){    //动画停止    if(null != mAnimation && mAnimation.isRunning()){        mAnimation.stop();    }    //失败视图显示    sys_loading_dialog_fail.setVisibility(View.VISIBLE);    //设置失败事件监听    sys_loading_dialog_fail.setOnClickListener(listener);    //设置失败文本    sys_loading_dialog_fail_tv.setText(failStr);    //设置加载时图片隐藏    sys_loading_dialog_img.setVisibility(View.GONE);    //设置加载时文本隐藏    sys_loading_dialog_tv.setVisibility(View.GONE);  } }

然后是sys_loading.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:layout_width=”match_parent” android:layout_height=”match_parent” android:layout_marginBottom=”30dp” android:gravity=”center” >
< !–加载中视图图片 –>
< ImageView android:id=”@+id/sys_loading_dialog_img”    android:layout_centerHorizontal=”true” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:contentDescription=”@null”/>
< !–加载中视图文本 –> < TextView android:id=”@+id/sys_loading_dialog_tv”    android:layout_width=”match_parent” android:layout_height=”wrap_content” android:textStyle=”normal” android:layout_marginTop=”15dp” android:textSize=”14sp” android:textColor=”@color/black2”    android:layout_below=”@id/sys_loading_dialog_img”    android:gravity=”center”/>
< !–加载失败布局视图–>
   < RelativeLayout android:id=”@+id/sys_loading_dialog_fail”    android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:gravity=”center” android:visibility=”gone”>
< !–加载失败图片 –>
   < ImageView android:id=”@+id/sys_loading_dialog_fail_img”    android:layout_centerHorizontal=”true” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@drawable/sys_loading_dialog_fail”    android:contentDescription=”@null”/>
< !–加载失败文本 –>
   < TextView android:id=”@+id/sys_loading_dialog_fail_tv”    android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_below=”@id/sys_loading_dialog_fail_img”    android:layout_marginTop=”15dp” android:textSize=”14sp” android:textColor=”@color/black2”    android:gravity=”center”/>
< /RelativeLayout>
< /RelativeLayout>

最后drawable文件就不贴出来了,这里直接给出主要的使用代码:

public class MainActivity extends Activity { private Button btnLoading; //自定义加载框 private SysLoading sysLoading; private boolean flag = true; private Handler handler = new Handler() { public void handleMessage(Message msg) { switch (msg.what) { case 100: Toast.makeText(MainActivity.this, “加载成功”, Toast.LENGTH_SHORT).show(); //隐藏加载框 sysLoading.setVisibility(View.GONE);    break;      
default:            
   break;        }    }; };
@Override
protected void onCreate(Bundle savedInstanceState) {  
   super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    btnLoading = (Button) findViewById(R.id.btn_loading);    //获取加载视图    sysLoading = (SysLoading) findViewById(R.id.sysLoading);    Message msg = handler.obtainMessage();    msg.what = 100;    sysLoading.showAnim("正在加载...");    
   handler.sendMessageDelayed(msg, 2000); }
public void Loading(View view) {    sysLoading.initData();    //加载失败    sysLoading.fialLoad("加载失败...", new OnClickListener() {        
       @Override        public void onClick(View v) {            Message msg = handler.obtainMessage();            msg.what = 100;            sysLoading.showAnim("正在加载...");          
           handler.sendMessageDelayed(msg, 2000);            }    }); } }

demo地址:

http://download.csdn.net/detail/u014727709/9739898


博客地址:


http://blog.csdn.net/u014727709/article/details/54584894

终端研发部提倡 没有做不到的,只有想不到的。

在这里获得的不仅仅是技术! 


让心,在阳光下学会舞蹈

让灵魂,在痛苦中学会微笑

—终端研发部—



如果你觉得此文对您有所帮助,欢迎入群 QQ交流群 :232203809   

微信公众号:终端研发部


            

这里学到的不仅仅技术


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存