我要实现

仿今日头条启动页效果

2021-05-31  本文已影响0人  And__

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

上一篇下一篇

猜你喜欢

热点阅读