uniapp中如何自定义开屏首图(.9patch)

2,626 阅读3分钟

android自定义首屏图

配置

首先点开manifest.json找到App启动页面配置,勾选自定义启动图。然后选择你的图片。

建议每个分辨率都设计一张.9.png图片。

image.png

图片自适应

android下在不同分辨率下,首图会不有同程度的拉伸,导致图片变形。android推出了一种.9.png(9patch)的图片用来处理这方面的困扰,可以自定义拉伸区域,保持图片显示区域正常。

制作9patch图片

下载android studio

下载地址,选择你需要的版本下载即可。

安装步骤跟着操作提示走就可以,基本上除了你需要选择自定义安装位置之外不用做其他特别处理。

image.png

开始制作

创建一个新项目,然后将你的图片放入 res/drawable/ 目录下。双击图片进行编辑

图片后缀必须要以.9.png格式,这样才能编辑。

image.png

图片需要有1px的透明白边才能进行描边绘制,切记切记,否则无法识别进行描边处理。鼠标左键在白边上按下并拖动即可画出黑色边,黑边的大小和位置决定你的图片以何种方式进行拉伸缩放。

image.png

四条边的含义

顶部:在水平拉伸的时候,保持其他位置不动,只在这个点的区域做无限的延伸(拷贝)

左边:在竖直拉伸的时候,保持其他位置不动,只在这个点的区域做无限的延伸(拷贝)

底部:在水平拉伸的时候,指定图片里的内容显示的区域

右边:在竖直拉伸的时候,指定图片里的内容显示的区域

在白色区域鼠标左侧点击拉伸后就会出现黑边,拖动黑边 就可设置区域。

image.png

设置后的黑边

image.png

控制栏说明

Zoom 调整绘图区域中图形的缩放级别

Patch scale 调整预览区域中图像的比例

Show lock 在鼠标悬停时可视化图形的不可绘制区域

Show content 突出显示预览图像中的内容区域(紫色是允许内容的区域)

Show patches 在绘图区域中预览可伸展的修补程序(粉红色是可伸缩的修补程序)

Show bad patches 在补丁区域周围添加红色边框,在拉伸时可能会在图形中产生伪影。如果消除所有不良补丁,将保持拉伸图像的视觉一致性。

一般只需要勾选 show patches 即可

image.png

绘制完毕

右侧是预览图,经过拉伸后依然保持中间核心区域完整显示 当你每次编辑时就已经在保存了,所以没有保存按钮。只需要打开文件夹就可看到修改后的图片,直接使用即可。

image.png

前后对比,可以清晰的看出黑边

image.png

image.png

注意事项

uniapp打包时,对.9.png图片有校验,如果你设置的图片不符合规则就会打包失败。需要重新设计黑边。 四条边都需要绘制。

绘制后的.9图片不要进行压缩和分辨率修改进行适配,打包编译可能会失败。

参考资料

uniapp启动界面设置

.9patch文章

.9patch制作视频