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能实现的功能,我们就实现不了呢 😒。
因为这不属于高频问题,只是特殊业务的实现,所以一开始还有点没思路,后来花时间去思考了一下这个,记录一下,只是希望其他的小伙伴遇到这样的需求,不至于没有思路。
网友评论