android启动背景图实践

简介

创建app启动背景图，保证图片不会被拉伸变形，适配4.0及以上手机。

实现方案

使用 <layer-list />标签，将背景图切成多个小图，然后组合起来。

这种方案实现稍复杂，但背景图占用内存小，组合灵活，可以完成动画等复杂的需求。推荐使用这种。

这里详细分享一下方案二，后面会分析一下方案一的利弊。

示例：完成如下图所示启动背景图

该启动背景图由四张小图组合完成。由上往下数，第二张图（“找好投顾。。。。”）的宽度为屏幕的90%，UI图在1080x1920上面的宽度尺寸为972px。

要求是图片不能被拉伸，高保真。

注：由于公司规定，写的博客不得显示公司信息。

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:opacity="opaque"
    tools:ignore="MissingDefaultResource">
    <item>
        <color android:color="@color/white" />
    </item>
    <item android:bottom="250dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_icon_0" />
    </item>
    <item android:bottom="130dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_icon_1" />
    </item>

    <item android:bottom="60dp">
        <bitmap
            android:gravity="bottom"
            android:src="@drawable/splash_icon_2" />
    </item>
    <item android:bottom="40dp">
        <bitmap
            android:gravity="bottom"
            android:src="@drawable/splash_icon_ipv6" />
    </item>
</layer-list>

xml预览图

 

解析：通过UI图，下载启动背景图中的四张小图，然后通过 <layer-list />标签将四张图组装起来。使用<bitmap>标签来加载图片资源，通过gravity属性和bottom top 等属性来控制各图片间的位置关系。

<layer-list > 标签下面第一个子item 是 <color>标签，对应的是ColorDrawable，它只设置了一个白色背景；

第二个item 是 <bitmap>标签，对应的是 BitmapDrawable对象，也是上述图由下往下数的第一张图。它设置了android:gravity="center"  android:bottom="250dp" 两个属性，意思是该图显示在 以容器最中间为基准，向上250dp。

第三个item也是<bitmap>标签，它是“找好投顾。。。"这张图，它是显示在以容器中间向上130dp的位置。

。。。

最后一个item是显示在以容器底部为基准向上40dp。

 

适配：

1）系统适配。<item>标签在6.0及以上才有android:width  height属性，所以，要兼容6.0以下系统的话，解决方法有二：一、不能使用width height等属性，直接使用图片自适应宽高，如上述代码中的写法，这种会根据图片资源的尺寸和资源所在的目录，这种方法需要注意图片资源的尺寸，最好多切几套图，做到高保真；二、在drawable-v23和drawable两个目录下分别创建背景图的资源，在6.0及以上使用width height属性，6.0以下用图片自适应或用.9图等，这种方式也需要注意，像这种背景图，应用到的尺寸一般也是很大的，dp并不适合大尺寸适配，因此，使用width height属性和dp并不能做到与设计图一致，但是可以通过autoSize的适配方法来设置宽高，达到与设计图一致。

 

2）动画适配。如果背景图中需要有展示动画，且需要用到自定义Drawable，此时，需要注意，自定义drawable在xml中使用，在7.0及以上系统才能支持。

 

注意事项

在如上代码中设置 <bitmap>标签，且未设置width height属性，在设置图片资源时，图片尺寸和图片所在资源目录位置会决定 它最终显示在屏幕上的尺寸，这一点是需要注意的。如果想配置多套图，建议配置xhdpi xxhdpi  xxxhdpi三套图，如果只用一套图的话，建议选择xxhpdi。

如果大家有兴趣想了解只配一套xxhpdi图, 最终它在各手机终端显示的最终尺寸，可以查看android图片适配（图片大小与屏幕密度）Bitmap占用内存计算 了解一下。