美文网首页我要实现
仿今日头条启动页效果

仿今日头条启动页效果

作者: And__ | 来源:发表于2021-05-31 10:36 被阅读0次

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

    相关文章

      网友评论

        本文标题:仿今日头条启动页效果

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