UI同事給我們app設(shè)計(jì)新版的啟動(dòng)圖跟今日頭條風(fēng)格一模一樣互躬,都知道為了app啟動(dòng)不出現(xiàn)空白頁一般都會(huì)用theme給SplashActivity設(shè)置背景惠险,因?yàn)榭紤]到適配诡蜓,和保證圖片不失真诽表,我一般都讓UI切不同部位的圖片,然后自己新建一個(gè)layer-list進(jìn)行設(shè)置诗舰。
先說下需求
三個(gè)部分警儒,兩個(gè)帶文字的圖片,一個(gè)背景圖(背景圖沒有下面白色部分)眶根。實(shí)現(xiàn)的難點(diǎn)其實(shí)就是 下面的文字Logo如何在空白區(qū)域居中蜀铲。
直接上代碼
<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>
上面的文字圖片,直接設(shè)置距離頂部的位置就行属百。然后背景圖要設(shè)置距離底部的位置bottomLength记劝,技巧就是 下面文字logo 設(shè)置bottom的值為
(bottomLength- 文字logo的高度)/2
如代碼上就是
(108-28)/2=40
原理想一下就行,就是 文字logo 在背景圖留出來的空白區(qū)域 在空白區(qū)域上下都是40 的margin值族扰。
這樣設(shè)置之后厌丑,出現(xiàn)了一個(gè)問題定欧,因?yàn)槭褂玫氖莣indowBackground,所以默認(rèn)是整個(gè)window的背景怒竿,有的手機(jī)下面有導(dǎo)航欄沒有開啟全屏的話砍鸠,會(huì)不適配,因?yàn)橛?jì)算的時(shí)候愧口,是按照屏幕計(jì)算的睦番,不管你有沒有導(dǎo)航欄类茂。
解決方案
直接先上代碼
<style name="RceSplashTheme" parent="@android:style/Theme.Light.NoTitleBar.Fullscreen">
<item name="android:windowBackground">@drawable/rce_bg_splash</item>
</style>
我們之前用的是NoActionBar會(huì)出現(xiàn)不適配耍属,改成@android:style/Theme.Light.NoTitleBar.Fullscreen">這個(gè)就行,改完后項(xiàng)目報(bào)了一個(gè)錯(cuò)誤巩检,原來SplashActivity繼承的AppCompatActivity不能使用@android:style/Theme.Light.NoTitleBar.Fullscreen 這個(gè)主題厚骗,把AppCompatActivity改成Activity就行。
總結(jié):其實(shí)沒啥涉及到技術(shù)上的東西兢哭,都是業(yè)務(wù)實(shí)現(xiàn)领舰,但是既然UI提了,總要研究下怎么實(shí)現(xiàn)迟螺,不然冲秽,人家會(huì)問,為啥XX能實(shí)現(xiàn)的功能矩父,我們就實(shí)現(xiàn)不了呢 ??锉桑。
因?yàn)檫@不屬于高頻問題,只是特殊業(yè)務(wù)的實(shí)現(xiàn)窍株,所以一開始還有點(diǎn)沒思路民轴,后來花時(shí)間去思考了一下這個(gè),記錄一下球订,只是希望其他的小伙伴遇到這樣的需求后裸,不至于沒有思路。