仿今日头条启动页效果

UI同事给我们app设计新版的启动图跟今日头条风格一模一样，都知道为了app启动不出现空白页一般都会用theme给SplashActivity设置背景，因为考虑到适配，和保证图片不失真，我一般都让UI切不同部位的图片，然后自己新建一个layer-list进行设置。
先说下需求

截屏2021-05-31 上午10.09.06.png

三个部分，两个带文字的图片，一个背景图（背景图没有下面白色部分）。实现的难点其实就是下面的文字Logo如何在空白区域居中。
直接上代码

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@color/white">
    </item>
    <item android:bottom="108dp">
        <bitmap
            android:src="@drawable/splash_bg" />
    </item>

    <item android:top="168dp" android:gravity="center_horizontal" android:height="93dp" android:width="214dp" >
        <bitmap
            android:src="@drawable/splash_slogan" />
    </item>

    <item  android:bottom="40dp"  android:gravity="center_horizontal|bottom" android:width="126dp" android:height="28dp">
        <bitmap
            android:src="@drawable/splash_logo" />
    </item>
</layer-list>

上面的文字图片，直接设置距离顶部的位置就行。然后背景图要设置距离底部的位置bottomLength，技巧就是下面文字logo 设置bottom的值为
（bottomLength- 文字logo的高度）/2
如代码上就是
（108-28）/2=40
原理想一下就行，就是文字logo 在背景图留出来的空白区域在空白区域上下都是40 的margin值。
这样设置之后，出现了一个问题，因为使用的是windowBackground，所以默认是整个window的背景，有的手机下面有导航栏没有开启全屏的话，会不适配，因为计算的时候，是按照屏幕计算的，不管你有没有导航栏。

解决方案
直接先上代码

<style name="RceSplashTheme" parent="@android:style/Theme.Light.NoTitleBar.Fullscreen">
        <item name="android:windowBackground">@drawable/rce_bg_splash</item>
    </style>

我们之前用的是NoActionBar会出现不适配，改成@android:style/Theme.Light.NoTitleBar.Fullscreen">这个就行，改完后项目报了一个错误，原来SplashActivity继承的AppCompatActivity不能使用@android:style/Theme.Light.NoTitleBar.Fullscreen 这个主题，把AppCompatActivity改成Activity就行。
总结：其实没啥涉及到技术上的东西，都是业务实现，但是既然UI提了，总要研究下怎么实现，不然，人家会问，为啥XX能实现的功能，我们就实现不了呢 😒。
因为这不属于高频问题，只是特殊业务的实现，所以一开始还有点没思路，后来花时间去思考了一下这个，记录一下，只是希望其他的小伙伴遇到这样的需求，不至于没有思路。

最后编辑于：2021.05.31 10:44:43