DCloud_Android_zl
DCloud_Android_zl
  • 发布:2019-01-21 19:31
  • 更新:2024-11-02 18:14
  • 阅读:248791

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

分类:5+ SDK

概述

目前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为1.5.0及以上版本
注意:不同尺寸的启动图是为了适配不同分辨率的手机,所以提交打包时请务必上传不同尺寸的启动图,切忌上传多张同尺寸启动图

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

离线打包配置

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

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

24 关注 分享
Trust DCloud_Android_ST 老哥教教我 5***@qq.com 师大酸梅杨 喜欢技术的前端 DCloud_HB_WDL DCloud_Android_zl 7***@qq.com 3***@qq.com 1***@sina.com ___K wgtyvgxyusgxu 秋凡 清风未醉 3***@qq.com 前端JASON LRL啊 rysnone [已删除] s***@trans-cosmos.com.cn 1***@qq.com AutumnIllusion wangready

要回复文章请先登录注册

DCloud_App_Array

DCloud_App_Array

回复 素时锦年 :
.9.png是非常强大的,可以任意配置固定和扩展区域的。你说的中间延时、四周限定只是一种使用场景
2020-06-02 18:56
素时锦年

素时锦年

回复 DCloud_App_Array :
.9刚好是相反的思路。.9是选择中间部分延伸的,四周是限定不超出那个范围,在那个范围内扩展。开屏的大多中间是固定的,四周需要拉伸,你参考一下大多数APP默认开屏,几乎都是页面中间偏上位置显示logo+文字,背景是纯色的。
2020-06-02 18:17
苛学加

苛学加

.9.png图片的使用效果可查看https://ask.dcloud.net.cn/article/37365
2020-06-02 00:21
DCloud_App_Array

DCloud_App_Array

回复 素时锦年 :
通常图片不是所有背景区域颜色都相同的,很多效果无法通过配置背景颜色来实现,.9.png则可以解决这些问题。
2020-06-01 17:02
素时锦年

素时锦年

.9的图片是适合小控件比如button这种的背景图设计。而开屏图片往往是中间需要固定,两边需要延伸,跟.9的设计初衷刚好相反。官方为何不设置成,用户自己上传一张不铺满全屏的图,在启动页居中显示,不做拉伸即可,只要保证背景色不冲突即可,背景色给用户自己定义一下也可以啊。
2020-05-25 10:22
素时锦年

素时锦年

回复 zyk2019 :
是的啊。所以不知道官方怎么想的,启动图做.9我也是醉了,官方直接给我们上传以下 页面中间的图片就好了,背景用指定颜色铺满全屏,我们上传的图片居屏幕中间显示即可,搞的这么复杂。
2020-05-25 10:19
唐糖

唐糖

花了半小时, 总想做出来了, 就不知道行不行
2020-05-12 10:19
百克团队

百克团队

使用ps制作.9图片可以吗,四边的1像素包含再图片尺寸中吗?
2020-04-24 16:24
蹦豆儿

蹦豆儿

如果启动图片是那种切换式的多张图,怎么处理?
2020-04-17 15:16
Mike_Zheng

Mike_Zheng

这套点九图, 我们UI问了挺多人, 折腾了挺久
打包时报错 ...error: top-left corner pixel must be either opaque white or transparent. ..
这句话的字面意思是 "左上角像素必须是全透明或者不透明的白底"
就因为左上角那一个像素做成了黑边导致打包失败, 报这个错误, 改成透明终于可以正常使用, 且测试不变形了 :)

目前谷歌能搜到的安卓APP启动图点九图的示例图片几乎没有(特别是对于适配1080P以上全面屏手机的), 所以, 还是希望官方在此文档末尾能附上可供测试/对比参考的点九图套图 :)
2020-04-13 10:30