如何优雅解决App启动黑白屏

4,378

为什么会有黑白屏

在桌面点击应用图标后,在app进程没有创建的情况下,需要时间创建app进程,初始化资源,以及启动首页Activity的(这里讨论的首页是指AndroidManifest里面标志的启动页),这就意味点击图标不能马上看到启动页。为了不让用户有卡顿的感觉,谷歌有了Preview Window,在启动页没有绘制完成时,会先初始化一个Window,我们通常看到的黑屏或白屏,就是这个预览窗口。

怎么知道是黑屏还是白屏?

黑白屏是预加载的窗口,这个窗口的一些属性可以在theme里更改。新建一个项目,会在AndroidManifest的application所属标签里面的内容看到android:theme="@style/AppTheme",这个是默认的theme。查看这个AppTheme,找到name="android:windowBackground"这个属性,查看属性下的内容,就能知道是黑屏还是白屏,这个属性就是设置预览窗口的背景。无论是黑屏还是白屏,给用户的体验都不好,所以就有了把背景设为透明或者用一张图片来作为启动背景的解决办法。这些只是很基本的解决办法,而且存在一定的弊端,既然我们要让用户体验更好,就应该处理得更加优雅一些。

如何优雅的解决黑白屏

解决黑白屏,需要和启动页结合起来。现在的APP基本上都有闪屏页,有些是为了加载广告,有些是为了通过闪屏页初始化App的一些资源,本篇文章就讨论有闪屏的启动页,以网易云音乐对预加载窗口和闪屏页的处理来举例。来看看网易云的预加载页和启动页。

预加载页
闪屏页
第一张是预加载页,第二张是闪屏页,闪屏页只比预加载页多了底部的图标和网易云音乐这四个字(其实是一整体,一张图片),而且给人的感觉是一直是预加载页,不过底部的图标和文字会慢慢出现,这样的处理比单独的显示图片或者设置为透明更让人能够接受。下面我们就来看看代码。

styles文件自定义Theme

<style name="AppTheme.lanuchTheme" >
      <item name="android:windowBackground">@drawable/launch_layout</item>
      <item name="android:windowFullscreen">true</item>
      <item name="android:windowNoTitle">true</item>
      <item name="android:windowContentOverlay">@null</item>

launch_layout,代码中的top_img,是“音乐的力量”四个字的图片。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/holo_red_dark"/>
  <item android:top="150dp">
      <bitmap android:gravity="top" android:src="@mipmap/top_img" />
  </item>
</layer-list>

SplashActivity的布局文件为

<?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">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/bottom_imag"//bottom_imag为底部的图标和文字
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        />
</RelativeLayout>

最后在AndroidManifest里将lanuchTheme设置给闪屏页(下文用SplashActivity表示),就大功告成了。

写以上布局需要注意:由于没有给SplashActivity的布局设置背景色,也就是透明色,而两个页面的区别只有底部加了一张图片,所以在SplashActivity的布局中就不需要再把预加载页的内容再写一次。

总结

黑白屏的解决是为了让用户觉得点击图标就得到了响应,App启动很顺畅,这个过程能在视觉上给人美感,那就更好了。不同的应用场景可以有不同的解决办法,不一定是有闪屏页,也不一定要和网易云音乐一样,也可以在闪屏页写一个动画或其它效果。想弄懂黑白屏,可以先做做以下功课

  • 本篇网易云音乐解决方案的原理
  • 明白为什么自定义theme,并且单独设置给Activity
  • 了解layer_list可以做什么

弄明白这几个问题,解决黑白屏就不是什么难事了。