【xamarin + MvvmCross 从零开始】七、Android 如何实现启动界面

前言

前几篇主要讲了一下Xamarin和MvvmCross开发的一些基本知识以及常见问题，从这篇开始我们讲一下Android开发中一些知识点。

这一篇我说说如何通过MvvmCross实现启动界面。

什么是启动界面

要说起启动界面的历史那就很悠久了，在WinForm时期就已经存在了，那时的硬件落后，一个软件启动时往往要对主界面进行初始化、建立数据连接、加载数据，这个过程一般比较费时，为了不让用户认为系统已经挂掉，就在启动时先显示启动界面，并在界面上显示加载进度，以增加用户体验。

如何实现启动界面

那么在android中如何实现启动界面呢？这个就比较简单了，因为MvvmCross已经为我们封装好了启动界面，我只需要实现就可以，看代码：

namespace MvvmCross.Droid.Views
{
    [Register("mvvmcross.droid.views.MvxSplashScreenActivity")]
    public abstract class MvxSplashScreenActivity : MvxActivity, IMvxAndroidSplashScreenActivity
    {
        protected MvxSplashScreenActivity(int resourceId = 0);

        public MvxNullViewModel ViewModel { get; set; }

        public virtual void InitializationComplete();
        protected override void OnCreate(Bundle bundle);
        protected override void OnPause();
        protected override void OnResume();
        protected virtual void RequestWindowFeatures();
        protected virtual void TriggerFirstNavigate();
    }
}

这是MvvmCross中封装的SplashScreen对象，用于实现启动界面。MvxSplashScreenActivity继承于MvxActivity，也就是说这是一个标准的Activity。

我们先添加一个启动界面的布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="Hi! MvvmCross"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:layout_centerInParent="true"
        android:textSize="40dp" />
</RelativeLayout>

再添加启动界面的Activity：

using Android.App;
using Android.OS;
using MvvmCross.Droid.Views;

namespace MvxSample.Droid.Views
{
    [Activity(Name = "SplashScreenView", MainLauncher = true)]
    public class SplashScreenView : MvxSplashScreenActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.SplashScreenPage);
        }
    }
}

添加一个主窗口布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <TextView
        android:text="我是主窗口"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:layout_centerInParent="true"
        android:textColor="@android:color/holo_orange_light" />
</RelativeLayout>

添加主窗口Acvivity：

using Android.App;
using Android.OS;
using MvvmCross.Droid.Views;
using MvxSample.ViewModels;

namespace MvxSample.Droid.Views
{
    [Activity(Label = "MainView", MainLauncher = false)]
    public class MainView : MvxActivity<MainViewModel>
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.MainPage);

            // Create your application here
        }
    }
}

ok，到这里，我们的启动界面已经完成了，运行一下看看效果：

看起来效果还不错，达到了我们的目的。等等，启动时为什么不是先出现启动界面，而是先出现了一个白屏，这是什么鬼？

这是因为在系统加载App时，窗口显示布局还没有加载，所以会出现短暂的白屏。那我们就先给窗口一个样式，样式会跟随窗口一起创建，这样就不会只显示白屏了 Smile 。

我们先增加一个Resource：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <!-- 设置整个屏幕背景为白色 -->
  <item >
    <color android:color="@android:color/white"/>
  </item>
  <item>
    <!--显示一个图片在底部-->
    <bitmap
        android:layout_width="match_parent"
        android:gravity="bottom|center_horizontal|fill_horizontal"
        android:src="@drawable/phoenixtitle" />
  </item>

</layer-list>
  </item>
</selector>

再增加一个系统样式:

<?xml version="1.0" encoding="utf-8" ?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
  <style name="AppSplash" parent="android:Theme">
    <item name="android:windowBackground">@drawable/splashlayerlist</item>
    <item name="android:windowNoTitle">true</item>
  </style>
</resources>

最后，我们将启动窗口的样式设置为新建的样式：

using Android.App;
using Android.OS;
using MvvmCross.Droid.Views;

namespace MvxSample.Droid.Views
{
    [Activity(Label = "MvxTest", NoHistory =true, MainLauncher = true, Theme = "@style/AppSplash")]
    public class SplashScreenView : MvxSplashScreenActivity
    {
        public SplashScreenView() : base(Resource.Layout.SplashScreenPage)
        {
        }

    }
}

大功告成，让我们再看看效果：

我们看到当App启动时，当SplashScreen还没有出现时，先加载了样式，然后才显示出SplashScreen，随后显示主窗口。这样就不会一直显示白屏。

小结

本篇主要讲解了如何通过MvvmCorss显示SplashScreen，以及如何处理App启动时白屏的处理。

下次我们讲解一下Fragment在MvvmCross中如何使用的。

最好，代码奉上，看这里。