uni-app Android平台启动图使用.9.png图片

发布于 1周前 作者 eggper 来自 uni-app

uni-app Android平台启动图使用.9.png图片

概述

目前HBuilder|HBuilderX中仅定义几种标准分辨率的启动图配置，而实际上存在很多不同分辨率的手机，导致启动图会进行拉伸或压缩引起变形，Android平台为了解决此问题就出现了可以适配各种尺寸的一种图片格式“.9.png”。这是一种特殊的图片格式，它可以指定特定的区域进行拉伸而不失真。

使用.9.png的优点：

  1. 避免在非标准分辨率手机上缩放变形
  2. 可以只配置1张或多张图片适配更多分辨率，减少apk的体积（推荐至少配置1080P高分屏启动图片）

.9.png图片和普通png图片的差异

  1. .9.png图片和一般图片的区别在于.9.png图片有四条黑边，而一般的图片没有，这四条黑边就是用来拉伸和指定显示位置的。
  2. 使用.9.png图片后，整个图片应该是包裹着你想要显示的内容的，而没有使用的话整个图片将会被拉伸。

制作.9.png图片

工具

  1. 在Android sdk目录下的tools目录下，有一个叫做draw9patch.bat的文件，双击打开就可以使用（最新android SDK该文件已经不存在，若电脑不没有安装android studio，可下载附件工具编辑.9.png图片）
  2. 使用android studio，因为android studio已经集成.9.png制作工具，只需选中需要生成的png文件，然后右键，点击create 9-patch file 选项。

使用方法及问题解决方案

详细制作步骤可参考链接：Android中.9图片的含义及制作教程

可以使用在线.9.png生成工具：http://inloop.github.io/shadow4android/

.9.png配置使用

HBuilderX配置提交云端打包

在HBuilderX中打开manifest.json文件，切换到“App启动图配置”项，在“Android启动图片设置”栏中选择需要设置的.9.png图片（图片尺寸请按照提示尺寸对应上传），保存后提交云端打包即可。

HBuilderX配置

注意：请更新HBuilderX为1.5.0及以上版本

注意：不同尺寸的启动图是为了适配不同分辨率的手机，所以提交打包时请务必上传不同尺寸的启动图，切忌上传多张同尺寸启动图

在插件市场有开发者做好的.9样例工程。

离线打包配置

离线打包配置需将图片命名为splash.9.png放置于res目录下的drawable-ldpi、drawable-xhdpi等目录下，如下图所示，运行到手机即可。

离线打包配置

温馨提示：请勿在本贴下频繁刷广告，一经发现，直接封号。

开发环境与版本信息

项目创建方式 版本号
HBuilderX 1.5.0及以上

下载 draw9png.zip


Harmonyos Next教程
1 回复

在uni-app中，为了在Android平台上使用.9.png图片作为启动图，你需要进行一些特定的配置和代码调整。.9.png图片是一种Android特有的图片格式，它允许图片在拉伸时保持边缘清晰，常用于按钮背景和启动图等场景。

以下是一个在uni-app项目中配置.9.png作为Android启动图的示例步骤：

  1. 准备.9.png图片： 首先，你需要有一张制作好的.9.png启动图。假设文件名为launch_image.9.png。

  2. 将图片放置到资源目录： 将launch_image.9.png文件放置到项目的static目录下，或者你可以根据需要放置在其他静态资源目录中。

  3. 修改manifest.json文件： 在manifest.json文件中，你需要配置Android平台的启动图路径。由于.9.png是Android特有的格式，这里需要特别指定。

    {
  "mp-weixin": {},
  "app-plus": {
    "distribute": {},
    "android": {
      "splashscreen": {
        "autoVerticalCenter": true,
        "autoFullScreen": true,
        "drawable": "/static/launch_image.9.png" // 指定.9.png图片路径
      }
    }
  }
}

    注意：这里的路径是相对于static目录的。如果你的图片放在其他目录，需要相应调整路径。

  4. 条件编译（可选）： 如果你只想在Android平台上使用.9.png启动图，而在其他平台上使用不同的图片，你可以使用条件编译。例如，在pages.json中配置不同平台的启动图路径（虽然启动图主要在manifest.json中配置，但这里仅作为示例）。

    {
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {},
  "condition": { // 条件编译
    "current": {},
    "conversations": {
      "mp-weixin": {},
      "app-plus": {
        "launch_screen": "/static/android_launch.png" // Android特定启动图（实际应在manifest中配置）
      }
    }
  }
}

    注意：实际上，启动图路径主要在manifest.json中配置，上面的condition部分仅作为条件编译的示例，并不直接用于设置启动图。

  5. 构建并运行项目： 完成上述配置后，使用HBuilderX或其他支持uni-app的开发工具构建并运行你的项目。在Android设备上启动应用时，你应该能看到使用.9.png格式的启动图。

通过上述步骤，你可以在uni-app项目中为Android平台配置并使用.9.png格式的启动图。

回到顶部