好看的Dialog加载动画

简介: 好看的Dialog加载动画

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


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

aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwMTE3MTcwMTE0NDk0.png



下面我们来看一下代码部分,首先是自定义的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



欢迎start,欢迎评论,欢迎指正




相关文章
|
8月前
mui 左右滑动效果
mui 左右滑动效果
142 0
|
4月前
|
C++
C++ Qt开发:ProgressBar进度条组件
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍`ProgressBar`进度条组件的常用方法及灵活运用。ProgressBar(进度条)是在Qt中常用的用户界面组件之一,用于显示任务的完成进度。它通常以一个水平或垂直的条形图形式展示,表示任务已完成的比例。进度条组件提供了一种直观的方式来显示任务的进度,让用户清晰地了解任务的完成情况。其还可根据需要在水平或垂直方向上显示,以适应不同的界面布局。
52 0
|
容器
利用CustomScrollView实现更有趣的滑动效果
本篇介绍了 CustomScrollView 的基本用法以及 SliverAppBar 的使用,通过 SliverAppBar 可以让导航栏的滑动更有趣。
713 0
利用CustomScrollView实现更有趣的滑动效果
Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果
上次实现的自定义的Button功能是用的自定义的Rectangle来实现的,在慢慢的接触了QML之后,发现QML有自己定义的Button
477 0
Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果
超酷Loading进度条
在线演示 本地下载
962 0
|
Android开发 数据格式 XML
自定义Dialog样式
前言 平时项目开发总要自定义dialog满足产品的设计需求,但系统提供Dialog和AlertDialog用起来不是很方便,所以自己封装一个好用的Dialog基类是再好不过了。
1019 0
|
Android开发 Kotlin 数据格式
ScrollView滑动—仿微博主页标题栏渐变悬浮及Fragment实现多个内容页面切换
作为一名热爱学习的Android开发工程si,刷微博的时候居然还想着技术呢,觉得自己也是够够了........哈哈哈 image.png 进入今天的正题,微博主页大家肯定是看过的,先看一下微博的效果。
1972 0
|
Android开发
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片预览和图片切换
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片的单选、限数量的多选和不限数量的多选。支持图片预览和图片文件夹的切换。支持图片单选并剪裁。 先上效果图: 1、引入依赖 在Project的build.gradle在添加以下代码 allprojects { repositories { ... maven { url 'https://jitpack.io' } // 如果你使用的是1.4.0或更早的版本,这句可以不用。
5995 0