Android - 启动图拉伸优化

你的名字 2022-12-27 07:13 602阅读 0赞

### Android - 启动图拉伸优化 ###

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

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

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

--------------------

### layer-list ###

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

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

/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 ：  
![format_png][]

图片 launcher\_center ：  
![a483058bc18f1cd5e0f033f26e9ba7ba][]

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

--------------------

### layer-list 结合 tileMode ###

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

![60c2ad38cee84647d44776fb5531f28e][]

样式 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 为:  
![f98ced4302a9e230e6acd118cb8f41e4][]

图片 img\_launcher.webp 放入 drawable-xhdpi:  
![f68e679fdc7e675d662387ee2bc492d3][]

--------------------

### 使用 .9 图 ###

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

![57c5a638fa889287c27e26468025210e][]

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

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

--------------------

### 代码中使用 ###

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

--------------------

### 报错 ###

.9 图引入工程后，如果编译报错：

aapt error: check logs for details

1.  检查下 .9 图的文件命名。
2.  .9 图缺少黑边，四条黑边都不能少。

--------------------

### .9 图最终解决方案 ###

迫于不够靓仔，指挥不动美工，于是还是决定自己制作 .9 图。点九图格式规定由左侧和上侧来控制图片的拉伸，右侧和下侧控制文字的显示区域。

首先对于长图而言，我们选择适当的 Zoom，然后移动滑块，能看到透明色块即可。

Mac 电脑操作

1.  点击 1px 透明色块后色块变黑，鼠标悬停在黑色色块右侧，会出现灰色区域，此时可以拖动灰色区域，创建黑色边。
2.  鼠标悬停在透明色块，按下 command 后拖动鼠标，可快速创造黑色边。
3.  鼠标悬停在黑色色块，按下 shift 后拖动鼠标，可快速清除黑色色块。
4.  如果发现左侧无法点击，隐藏点 IDE 左侧的导航栏，导航栏会影响点击，Mac 下按 command + 1 按钮。
5.  黑色的边越长，拉伸的越狠。

--------------------

### 给美工的文档 ###

> https://ask.dcloud.net.cn/article/37365  
> https://www.jianshu.com/p/0c1f887ab82a

[format_png]: /images/20221120/f943268863394969b91827e8aed255fc.png
[a483058bc18f1cd5e0f033f26e9ba7ba]: /images/20221120/9cd1f3bbefe14e0e93ecc4d223090d6a.png
[60c2ad38cee84647d44776fb5531f28e]: /images/20221120/e676648d312544529d6761f0c79ec089.png
[f98ced4302a9e230e6acd118cb8f41e4]: http://img.hi-cat.cn/f98ced4302a9e230e6acd118cb8f41e4
[f68e679fdc7e675d662387ee2bc492d3]: http://img.hi-cat.cn/f68e679fdc7e675d662387ee2bc492d3
[57c5a638fa889287c27e26468025210e]: https://img.hi-cat.cn/57c5a638fa889287c27e26468025210e