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 = 0;
                //show the dialog
                dialog.Show();
                //do some things
                Task task = new Task(() =>
                {
                    for (int i = 0; i < 100; 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