Android应用SplashScreen出现居中裁剪问题技术求助

问题描述 #

使用LayerList实现启动页，设置纯色背景+居中矢量图标，预期背景铺满屏幕、图标居中显示，但实际出现图标被居中裁剪的异常效果。

当前实现代码 #

splash_screen.xml（LayerList 背景资源） #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/grey_700" />
    <item
        android:drawable="@drawable/splash_foreground"
        android:gravity="center" />
</layer-list>

style.xml（启动页主题） #

...

<style name="Theme.SplashScreen" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:statusBarColor">@color/grey_900</item>
    <item name="android:windowBackground">@drawable/splash_screen</item>
</style>

...

AndroidManifest.xml（启动页配置） #

...

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:theme="@style/Theme.SplashScreen"
    android:screenOrientation="portrait"
    tools:ignore="LockedOrientationActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

...

资源示例 #

• 前景矢量图：
• 实际错误效果：

修复方案 #

问题根源是LayerList直接引用矢量图时，系统会将其拉伸填充item区域，导致裁剪。通过以下两种方式修复：

方案1：用Bitmap标签包裹矢量图 #

修改splash_screen.xml，将前景图标用<bitmap>标签包裹，确保保持原始比例并居中：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/grey_700" />
    <item>
        <bitmap
            android:src="@drawable/splash_foreground"
            android:gravity="center" />
    </item>
</layer-list>

方案2：为Item指定固定尺寸 #

如果需要限制图标大小，可给前景Item添加宽高属性，再嵌套Bitmap：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/grey_700" />
    <item
        android:width="180dp"
        android:height="180dp"
        android:gravity="center">
        <bitmap android:src="@drawable/splash_foreground" />
    </item>
</layer-list>

原理说明 #

VectorDrawable作为可拉伸Drawable，直接放在LayerList的Item中时，会自动适配Item的尺寸（即屏幕大小），导致图标被拉伸或边缘裁剪。使用Bitmap标签包裹后，系统会按图标原始尺寸渲染，再通过gravity=center实现居中，同时背景色正常铺满屏幕。

内容的提问来源于stack exchange，提问作者Sidharth Mudgil