智能手机 XAML 移动应用新手开发 C#

添加启动画面（第 2 部分）

Abu_yanal

5.00/5 (4投票s)

2017年2月28日

CPOL

4分钟阅读

9852

添加启动画面

启动屏对于任何移动应用程序都非常重要，它能第一时间吸引用户的注意力。

什么是启动屏？

启动屏是一种图形控件，它包含一个窗口，其中显示图像、徽标和软件的当前版本。启动屏通常在游戏或程序启动时出现。

由于 Xamarin.Forms 不像支持页面那样支持从一个地方添加启动屏，因此您需要进入每个平台项目 - 在我们的例子中是 iOS 和 Android - 为每个项目添加启动屏。

iOS

在我们的解决方案中，您需要进入 PuzzlersJordan.iOS 项目并按照以下简单步骤操作

在 **解决方案资源管理器** 中，双击 LaunchScreen.storyboard 进行编辑。
确保 **Size Class** 设置为 **any:any**，**View As** 设置为 **Generic**。
通过打开 **属性** 面板 - **widget** 选项卡，然后是 **background** 属性，来设置主视图的背景颜色。
从 **工具箱** 中将一个 **Image View** 拖到设计界面，并将其放置在屏幕中央。
在 **属性管理器** 中设置 **Image** 的源（作为添加到项目中的 Asset Catalog 中的图像），并根据需要重新定位和调整图像大小。
添加必要的 **约束** 以将图像保持在屏幕中央，约束包括
- 垂直对齐
- 水平对齐
保存对 Storyboard 的更改。

我使用此方法是因为我只有徽标（而不是整个图像）。如果您有完整的 **图像**，您可以按照 xamarinhelp.com 提供的说明进行操作：xamarinhelp.com

创建以下尺寸的启动屏图像
- 320—480
- 640—960
- 640—1136
转到 **Properties** > **iOS Application** > **iPhone Launch Images** 并导入图像。它会自动将它们添加到 iOS 项目的 _Resources_ 文件夹中。
向下滚动 **properties** 页面，为 iPad 应用程序添加图像。
如果您在图像显示方面遇到问题，可能有几个原因。LaunchScreen.storyboard 可能是问题所在。您可以打开它并进行更正，甚至尝试删除它。完成此操作后，重新生成您的应用程序并重置您的 iOS Simulator 或从您的 iPhone 中删除，因为 iOS 在此区域有广泛缓存的倾向。

Android

对于 Android，情况有所不同。有不同的方法来实现启动屏。我遇到了一种最简单快捷的方法。

我们所需要做的就是创建一个自定义主题，并将其应用于显示启动屏的 Activity。当 Activity 渲染时，它会加载主题，并将主题引用的可绘制资源应用于 Activity 的背景。这种方法避免了创建布局文件的需要。

应用程序启动后，启动屏 Activity 会启动主 Activity，并从应用程序的后退栈中移除自身。

请跟随我一起为 Android 创建一个精彩的启动屏

创建一个 **drawable** 资源用于启动屏，以适应以下分辨率（我个人会让设计师来做），这个 drawable 就是我们想在屏幕中央显示的徽标，将其命名为‘splash_logo’，因为我们稍后会引用它。
- drawable-hdpi
- drawable-ldpi
- drawable-mdpi
- drawable-xhdpi
- drawable-xxhdpi
- drawable-xxxhdpi
注意：为了显示图像，必须使用位图图像（如 PNG 或 JPG）。

在此步骤中，我们创建两个文件

为了在下一步中引用颜色，我们需要在 _values_ 文件夹内创建一个新的资源 XML 文件，名为 _colors.xml_。
```
<?xml version=“1.0“ encoding=“utf–8“?>
	<resources>
	  <color name=“splash_background“>#A7CD38</color>
	</resources>
```

为了将启动屏图像居中显示在应用程序中，我将使用一个 Layer List。以下代码片段是使用 layer-list 的 drawable 资源的示例。

<?xml version=“1.0“ encoding=“utf–8“?>
	<layer-list xmlns:android=“http://schemas.android.com/apk/res/android“>
	  <item>
	    <color android:color=“@color/splash_background“/>
	  </item>
	  <item>
	    <bitmap
	        android:src=“@drawable/splash_logo“
	        android:tileMode=“disabled“
	        android:gravity=“center“/>
	  </item>
	</layer–list>

此 layer-list 将启动屏图像 splash_logo.png 居中显示在一个由我们在步骤 a 中创建的 @color/splash_background 资源指定的背景上。

为启动屏 Activity 创建自定义主题，编辑（或添加）文件 _values/styles.xml_ 并为启动屏创建一个新的样式元素。下面是一个示例 _values/style.xml_ 文件，其中有一个名为 splashscreen 的样式。

<?xml version=“1.0“ encoding=“UTF–8“?>
	<resources>
	    <style name=“splashscreen“ parent=“MyTheme.Base“>
	        <item name=“android:windowBackground“>@drawable/splash_screen</item>
	        <item name=“android:windowNoTitle“>true</item>
	        <item name=“android:windowIsTranslucent“>false</item>
	        <item name=“android:windowIsFloating“>false</item>
	        <item name=“android:backgroundDimEnabled“>true</item>
	        <item name=“android:colorPrimaryDark“>#85A42C</item>
	    </style>
	…
	</resources>

我们需要一个名为 SplashActivity 的新 Activity 来启动，该 Activity 包含我们的启动图像并执行任何启动任务。以下代码是完整的启动屏实现的示例。
```
using Android.App;
	using Android.OS;
	using Android.Support.V7.App;

	namespace PuzzlersJordan.Droid
	{
	    [Activity(Label = “Puzzlers Jordan“, Icon = “@drawable/icon“, 
         Theme = “@style/splashscreen“, MainLauncher = true, NoHistory = true)]
	    public class SplashActivity : AppCompatActivity
	    {
	        protected override void OnCreate(Bundle savedInstanceState)
	        {
	            base.OnCreate(savedInstanceState);
	            this.StartActivity(typeof(MainActivity));
	        }
	    }
	}
```
从上面的实现中可以看出，我们将之前创建的 splashscreen 主题分配给了这个 Activity，并确保将这个 Activity 设置为 **Main Launcher**，这样当应用程序启动时，它应该首先触发这个 Activity。

另外，请注意，我们将此 Activity 属性设置为 NoHistory 为 true，这意味着该 Activity 不会留下历史记录。它不会保留在任务的 Activity 堆栈中，因此用户将无法返回到它。

注意：您必须从 MainActivity 中删除 MainLauncher 属性。