Android利用自定义样式Progressbar实现炫酷动画弹窗

2017-2-23 liuyingcong 安卓开发

用过农业银行app的都见过这种等待加载的视图(实际小绿人是动的,原谅我不会截动图),具体是怎么实现的,我们来一点点分析:

Screenshot_20170223-133240.jpg

首先来说,这是一个对话框,只是将窗体背景换成了透明色,代码如下:


AlertDialog alertDialog = new AlertDialog.Builder(this).create(); 
   alertDialog.show(); 
    alertDialog.setCanceledOnTouchOutside(false); 
   Window window = alertDialog.getWindow();  
    window.setContentView(R.layout.dialog_wait);



布局文件  dialog_wait.xml:

  <?xml version="1.0" encoding="utf-8"?> 
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
           android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background="@color/transparent"
          android:orientation="vertical">   

       <ProgressBar  style="@style/mProgress_circle"
              android:indeterminateBehavior="repeat" 
               android:layout_width="140dp"  
               android:layout_height="140dp"
              android:layout_gravity="center_horizontal"/>  
   </LinearLayout>


  其次,动画是用Progressbar实现的,是根据自定义的一个style实现的,代码如下:
    <style name="mProgress_circle">
        <item name="android:indeterminateDrawable">@drawable/progressbar_circle_gif</item>
        <item name="android:minWidth">25dp</item>
        <item name="android:minHeight">25dp</item>
        <item name="android:maxWidth">60dp</item>
        <item name="android:maxHeight">60dp</item>
    </style>
 注意,上面这段代码是在styles文件中。
 代码中包含一个动画文件@drawable/progressbar_circle_gif的引用,由这个文件使窗口中的小人动了起来,代码:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="false">
    <item android:drawable="@drawable/loading1"  android:duration="30" />
    <item android:drawable="@drawable/loading2"  android:duration="30" />
    <item android:drawable="@drawable/loading3"  android:duration="30" />
    <item android:drawable="@drawable/loading4"  android:duration="30" />
    <item android:drawable="@drawable/loading5"  android:duration="30" />
    <item android:drawable="@drawable/loading6"  android:duration="30" />
    <item android:drawable="@drawable/loading7"  android:duration="30" />
    <item android:drawable="@drawable/loading8"  android:duration="30" />
    <item android:drawable="@drawable/loading9"  android:duration="30" />
    <item android:drawable="@drawable/loading10" android:duration="30" />
    <item android:drawable="@drawable/loading11" android:duration="30" />
    <item android:drawable="@drawable/loading12" android:duration="30" />
    <item android:drawable="@drawable/loading13" android:duration="30" />
    <item android:drawable="@drawable/loading14" android:duration="30" />
    <item android:drawable="@drawable/loading15" android:duration="30" />
    <item android:drawable="@drawable/loading16" android:duration="30" />
    <item android:drawable="@drawable/loading17" android:duration="30" />
    <item android:drawable="@drawable/loading18" android:duration="30" />
    <item android:drawable="@drawable/loading19" android:duration="30" />
    <item android:drawable="@drawable/loading20" android:duration="30" />
    <item android:drawable="@drawable/loading21" android:duration="30" />
    <item android:drawable="@drawable/loading22" android:duration="30" />
    <item android:drawable="@drawable/loading23" android:duration="30" />
    <item android:drawable="@drawable/loading24" android:duration="30" />
</animation-list>
   其中loading1~24是从农行app的apk文件解压得来的,对应gif动画中的一帧。这样就能动起来了。

   最后,我们来看@drawable/progressbar_circle_gif这个文件,它是一个描述动画的文件。
我们可以更改这个文件来实现各种类型的动画,实现不同的动画效果。






网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2017 www.elight.cn, All Rights Reserved