Xamarin.Android之给我们的应用加点过渡效果

零、前言

试想一下，我们的应用正在请求一些数据，假设网络不是很好，要花比较长的时间等待，这个时候界面什么反应也没有，

一动不动，用户可能就会认为应用挂掉了，这么久都没反应的，说不定下一分钟用户就把它卸载了。

这样就造成了十分不好的用户的体验。为此，我们可以在这个过程中加上那么点过渡效果，告诉用户正在加载数据。

稍微改善一下用户体验，至少能让用户知道我们的app在干嘛！

本文使用的是自定义ProcessDialog来实现过渡效果，准备了三张图片资源

       

一、写个自定义的ProcessDialog

 using Android.App;
 using Android.Content;
 using Android.Graphics.Drawables;
 using Android.Views;
 using Android.Widget;
 namespace Catcher.AndroidDemo.LoadingAnimationDemo.Extensions
 {
     public class CustomProgressDialog : Dialog
     {
         private static CustomProgressDialog customProgressDialog;
 
         public CustomProgressDialog(Context context):base(context)
         {
         }
         public CustomProgressDialog(Context context, int themeResId):base(context,themeResId)
         {
         }
         /// <summary>
         /// create the dialog
         /// </summary>
         /// <param name="context">the context</param>
         /// <returns>the instance of the customize dialog</returns>
         public static CustomProgressDialog CreateDialog(Context context)
         {
             customProgressDialog = new CustomProgressDialog(context, Resource.Style.CustomProgressDialog);
             //set the view
             customProgressDialog.SetContentView(Resource.Layout.loading);
             //set the gravity
             customProgressDialog.Window.Attributes.Gravity = GravityFlags.Center;
             return customProgressDialog;
         }
         /// <summary>
         /// called whenever the window focus changes
         /// </summary>
         /// <param name="hasFocus">whether the window now has focus</param>
         public override void OnWindowFocusChanged(bool hasFocus)
         {
             base.OnWindowFocusChanged(hasFocus);
             if (customProgressDialog == null)
             {
                 return;
             }
             ImageView imageView = customProgressDialog.FindViewById<ImageView>(Resource.Id.loadingImageView);
             AnimationDrawable animationDrawable = (AnimationDrawable)imageView.Background;
             //start the animation
             animationDrawable.Start();
         }
     }
 }  

比较简单，就是写了个创建的方法和重写了Dialog的OnWindowFocusChanged方法

二、新建一个loading.xml

loading.xml可以放在Resources下面的drawable文件夹，也可放在新建的anim文件夹。

 <?xml version="1.0" encoding="utf-8" ?>
 <animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
     <item
         android:drawable="@drawable/loading0"
         android:duration="120"/>
     <item
         android:drawable="@drawable/loading1"
         android:duration="120"/>
     <item
         android:drawable="@drawable/loading2"
         android:duration="120"/>
 </animation-list>  

这个就是设置我们的动画图片。

三、给自定义Dialog写个简单的布局loading.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical">
     <ImageView
         android:id="@+id/loadingImageView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@anim/loading" />
     <TextView
         android:id="@+id/tv_loadingmsg"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:textSize="12sp"
         android:text="loading....." />
 </LinearLayout>  

一个ImageView用来显示动画，一个TextView用来显示loading

四、编写Main.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <Button
         android:id="@+id/go"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="go!go!go!" />
 </LinearLayout>  

五、在MainActivity中使用自定义的Dialog

 using Android.App;
 using Android.Content;
 using Android.OS;
 using Android.Widget;
 using Catcher.AndroidDemo.LoadingAnimationDemo.Extensions;
 using System.Threading.Tasks;
 namespace Catcher.AndroidDemo.LoadingAnimationDemo
 {
     [Activity(Label = "Catcher.AndroidDemo.LoadingAnimationDemo", MainLauncher = true, Icon = "@drawable/icon")]
     public class MainActivity : Activity
     {
         CustomProgressDialog dialog;
         protected override void OnCreate(Bundle bundle)
         {
             base.OnCreate(bundle);
             SetContentView(Resource.Layout.Main);
             //create a new dialog
             dialog = CustomProgressDialog.CreateDialog(this);
             dialog.OnWindowFocusChanged(true);
 
             Button btnGO = FindViewById<Button>(Resource.Id.go);
             btnGO.Click += (s,e) =>
             {
                 int result = ;
                 //show the dialog
                 dialog.Show();
                 //do some things
                 Task task = new Task(() =>
                 {
                     for (int i = ; i < ; i++)
                     {
                         result += i;
                     }
                 });
                 task.ContinueWith(t =>
                 {
                     Intent intent = new Intent(this, typeof(LastActivity));
                     intent.PutExtra("name", result.ToString());
                     StartActivity(intent);
                 });
                 task.Start();
             };
         }
         protected override void OnResume()
         {
             base.OnResume();
             if(dialog.IsShowing)
             {
                 dialog.Dismiss();
             }
         }
     }
 }  

在这里没有真正的用网络请求，而是用计算累加和来代替。

五、编写last.axml和LastActivity

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:id="@+id/tv_show"
         android:textSize="50sp"
         android:gravity="center"
         android:layout_marginTop="20dp" />
 </LinearLayout>  

 using Android.App;
 using Android.Content;
 using Android.OS;
 using Android.Widget;
 namespace Catcher.AndroidDemo.LoadingAnimationDemo
 {
     [Activity(Label = "LastActivity")]
     public class LastActivity : Activity
     {
         protected override void OnCreate(Bundle savedInstanceState)
         {
             base.OnCreate(savedInstanceState);
             // Create your application here
             SetContentView(Resource.Layout.last);
             TextView tvShow = FindViewById<TextView>(Resource.Id.tv_show);
             tvShow.Text = Intent.GetStringExtra("name");
         }
     }
 }  

取出结果放到TextView中。

六、效果图

示例代码下载：

https://github.com/hwqdt/Demos/tree/master/src/Catcher.AndroidDemo/Catcher.AndroidDemo.LoadingAnimationDemo