android 启动页

1,410 阅读3分钟

启动页白屏一段时间

网上搜到的资料讲启动页时,常常都是从App启动时白屏或黑屏一段时间开始讲。 白屏原因为App在启动Application,再到定位到启动页,并为启动页面setContentView过程中,需要耗时,这段时间内App显示为白屏。

网上见到说法,黑屏是由于在Manifest中设置了Application的theme为dark模式,模拟器测试后并未出现黑屏现象,仍显示为白屏。

另一说法是在低版本的手机上会出现黑屏,该说法未经测试。

为解决该问题,可以为启动页设置一个theme,并为该主题设置一个background,在Application启动过程中,页面将直接显示theme所设置的背景。

在manifest.xml和styles.xml中设置如下。

<activity android:name=".ui.activity.SplashActivity"
    android:theme="@style/Splash">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
</activity>

 <style name="Splash" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowBackground">@drawable/splash</item>
</style>

drawable中使用layer-list排列所需图片。

layer-list的没有布局功能,开屏页还是尽可能简单为上。解压了淘宝的Apk包,淘宝开屏页一共是2张图,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--整体背景颜色-->
    <item
        android:drawable="@android:color/white"
        android:gravity="fill" />
    <!--图片在屏幕中心显示后再向上偏移72dp-->
    <item android:bottom="72dp">
        <!--屏幕中心显示-->
        <bitmap
            android:gravity="center"
            android:src="@mipmap/taobao_launch_center" />
    </item>
    <!--底部淘宝logo-->
    <item android:bottom="24dp">
        <bitmap
            android:gravity="bottom|center"
            android:src="@mipmap/taobao_launch_logo" />
    </item>
</layer-list>

这里建议让UI将所需的图片裁剪成几个元素放上去,并尽可能简洁,毕竟layer-list的排列和图片显示并不是很愉快,特别是图片尺寸不合适情况下的拉伸、裁剪更是麻烦。

在实际测试过程中,上述代码只解决了全屏(无导航栏)和普通导航栏的情况,还有一种为虚拟导航栏。在这种情况下,半透明的导航栏会遮挡部分底部logo。一种方法可以简单的把logo的bottom值调大,当然这样大概率就不符合UI的设计了。另外可以在style中增加一行:

<item name="android:windowDrawsSystemBarBackgrounds">false</item>

将windowDrawsSystemBarBackgrounds设为false的意思是指在绘制内容窗口时,不延伸到状态栏和导航栏区域。

启动页动画或广告

启动页动画可以参考百度地图。

首先是重设主题,可以在style中新增一个继承自Splash的主题,重设它的背景图片,一般而言保留底部logo,去掉居中的大图,以保证切换主题过程中底部的logo不发生变化。然后在SplashActivity的onCreate方法中setTheme重置主题。

<style name="Splash.logo" parent="Splash">
    <item name="android:windowBackground">@drawable/splash_logo</item>
</style>

当日如果logo上方的内容全覆盖了原有的启动页,也可以忽略上一步骤,直接在splash.xml中开始正常的绘制即可。