美文网首页优化
如何优雅解决App启动黑白屏?一篇文章解决

如何优雅解决App启动黑白屏?一篇文章解决

作者: Z_萧晓 | 来源:发表于2020-02-04 19:50 被阅读0次

    为什么会有黑白屏

    在桌面点击应用图标后,在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可以做什么

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

    最后对于程序员来说,要学习的知识内容、技术有太多太多,要想不被环境淘汰就只有不断提升自己,从来都是我们去适应环境,而不是环境来适应我们!

    这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司19年的面试题,把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包含知识脉络 + 诸多细节,由于篇幅有限,这里以图片的形式给大家展示一部分。

    相信它会给大家带来很多收获:

    上述【高清技术脑图】以及【配套的架构技术PDF】可以 关注我 【主页简介】 或者【简信】免费获取

    Android学习PDF+架构视频+面试文档+源码笔记

    当程序员容易,当一个优秀的程序员是需要不断学习的,从初级程序员到高级程序员,从初级架构师到资深架构师,或者走向管理,从技术经理到技术总监,每个阶段都需要掌握不同的能力。早早确定自己的职业方向,才能在工作和能力提升中甩开同龄人。

    相关文章

      网友评论

        本文标题:如何优雅解决App启动黑白屏?一篇文章解决

        本文链接:https://www.haomeiwen.com/subject/rzjdxhtx.html