android 图片拉伸模糊 android启动图片拉伸

转载

mob64ca14196783 2023-09-15 12:24:10

文章标签 android 图片拉伸模糊 android xml 启动图 文章分类 Android 移动开发

Android - 启动图拉伸优化

App 在启动时会有短暂的白屏或者黑屏，我们往往会在启动 Activity 的设置 windowBackground，然而 Android 手机各种尺寸都有，因此会出现启动图拉伸的情况。

为了避免启动图拉伸，造成图片变形，目前业界有三种方案：

使用 layer-list 来配置启动图，如皮皮虾。
使用 layer-list 并结合 bitmap 标签的 tileMode ，如微信读书。
使用 .9 图，如咸鱼 App。

layer-list

以皮皮虾的启动图为例，首先配置启动的 Activity 的 Theme：

<activity
            android:name=".module.LauncherActivity"
            android:theme="@style/splash">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

/res/valuse/styles.xml 文件中的 splash 主题的配置：

<style name="splash" parent="android:Theme.NoTitleBar.Fullscreen">
        <item name="android:windowBackground">@drawable/splash</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

/res/drawable/splash.xml 配置如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item android:top="170.0dip">
        <bitmap
            android:gravity="center|top"
            android:src="@drawable/launcher_center" />
    </item>

    <item android:bottom="35.0dip">
        <bitmap
            android:gravity="bottom|center"
            android:src="@drawable/launcher_bottom" />
    </item>

</layer-list>

图片 launcher_bottom ：

android 图片拉伸模糊 android启动图片拉伸_android 图片拉伸模糊

图片 launcher_center ：

android 图片拉伸模糊 android启动图片拉伸_android 图片拉伸模糊_02

这样图片不会被拉伸，但在全面屏上，皮这一下很开心这张图片会向上偏移，不过效果可以接受。

layer-list 结合 tileMode

首先看下微信读书的启动页在全面屏的效果图：

android 图片拉伸模糊 android启动图片拉伸_android_03

样式 style ：

<style name="AppStartLoad" parent="android:Theme.NoTitleBar.Fullscreen">
        <item name="android:windowBackground">@drawable/app_launcher_layout</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>

app_launcher_layout.xml 为 :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_launch" />
    <item android:top="88.0dip">
        <bitmap
            android:gravity="center|top"
            android:src="@drawable/img_launcher_title" />
    </item>
</layer-list>

bg_launch.xml 为：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" />
    <item>
        <bitmap
            android:src="@drawable/img_launcher"
            android:tileMode="repeat" />
    </item>
</layer-list>

其中图片 img_launcher_title.web 为:

android 图片拉伸模糊 android启动图片拉伸_android_04

图片 img_launcher.webp 放入 drawable-xhdpi:

android 图片拉伸模糊 android启动图片拉伸_android 图片拉伸模糊_05

使用 .9 图

咸鱼在全面屏手机启动 App 的时候，启动图没有拉伸，看了下它的实现方式，发现是使用 .9 图。如下图为咸鱼的启动图:

android 图片拉伸模糊 android启动图片拉伸_xml_06

图片下载后给美工看下，就能看到左侧拉伸区域。

AndroidStudio 在拉伸比较大的图时，非常难用，所以我准备好了教程给美工，让他切图。

代码中使用

主题中直接引用 .9 图片即可：

<style name="splash" parent="android:Theme.NoTitleBar.Fullscreen">
        <item name="android:windowBackground">@drawable/xianyu</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>