HarmonyOS 鸿蒙Next开发APP时图片资源尺寸应如何处理

HarmonyOS 鸿蒙Next开发APP时图片资源尺寸应如何处理 比如iOS中，分辨率的不同，需要的图片资源需要二倍和三倍图。举例100100px的大小，需要100100px,200200px, 300300px的三张图片。Android我不是很了解。那在鸿蒙中，默认的单位是vp。如果设计图是100*100px的图片，我应该引入多大尺寸的资源图片？我下载了一些官方的例子，发现比较混乱，有一倍的，有四倍的图的，还有不相关尺寸但是比例差不多的，貌似没有明确的一个规范。

9 回复

一般情况下，准备一套最大的图片，等比缩放就行了。ios那边是为了性能牺牲了体积（多准备了几套图，在不同的设备快速加载），android是支持和ios那边一样的配置，但大多数人为了节省选择牺牲体积，只准备一套图然后让系统针对设备在运行内存中进行剪裁处理。

总之 一套图适配所有手机，在理论上就是需要靠程序处理成对应的px（像素），在我看来牺牲的性能并不大，现在的手机都性能过剩了。所以准备一套图就够了。

所以问题的关键是准备一套多大的图，如果图太小了，进行放大处理（或者说是在高分辨率的设备里）图片会显得模糊。但图太大又影响app运行性能加载速度等。

因此，需要了解主流的设备有哪些，进行分析。

截至到今天，据我了解

  • 720p：1280 x 720像素，常见于入门级手机

  • 1080p：1920 x 1080像素，常见于中高端手机

  • 2K：2560 x 1440像素，常见于高端手机

  • 4K：3840 x 2160像素，目前仅少数高端手机支持

我的话会以2K（高2560 x 宽1440像素）做为目标机型。

因此，当设计图整体宽 750时，那么就当实际手机宽为1440px，

一个图标在设计图是100100，那么真实的图片应该就是（1440100）/750=192px*192px，这样图片在小手机一定不会模糊 ，在4K手机稍稍模糊 ，但肉眼一般看不太出来

更多关于HarmonyOS 鸿蒙Next开发APP时图片资源尺寸应如何处理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我现在就是拿iOS那边三倍图来使用的，设置死Image的宽高使用。

安装上面回答，似乎 @2x 能满足大部分设备了，3x 会影响性能吗？

请问各位，编辑器 DevEcho Studio 的代码提示、自动导入是否可以设置？

现在刚开始学习，什么提示都没有挺难受的。如果有对应的方案还望告知，先表达感谢！

我使用的 IDE 版本信息：

  • DevEco Studio 3.1.1 Release
  • Build Version: 3.1.0.501, built on June 20, 2023
  • Build #DS-223.8617.56.36.310501
  • Runtime version: 17.0.6+10-b829.5 x86_64
  • VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
  • macOS 14.0
  • GC: G1 Young Generation, G1 Old Generation
  • Memory: 1536M
  • Cores: 8
  • Metal Rendering is ON
  • Registry: external.system.auto.import.disabled=true

Preview

还有个问题，就是图片貌似只能放在media文件夹下，才能使用Resource的方式访问，哪怕在中间多增加一个文件夹都不行，无法访问。有遇到这情况的吗

感觉这是照着Android的设计来的，Android的图片就是只能放到指定文件夹，而不是像iOS或H5那样可以只要相对路径对就可以。

我也不太清楚，flutter的图片也可以自己创建文件夹存放的，但是这个HarmonyOS试了下不行，那这样的话，一个项目可能二三百个图片资源，感觉很混乱。

项目信息

  • 项目名称: 我的项目
  • 项目描述: 这是一个示例项目，用于展示如何将HTML内容转换为Markdown格式。

基本信息

  • 创建者: 张三
  • 创建日期: 2023-10-01

详细信息

  • 项目状态: 进行中
  • 项目目标: 展示HTML到Markdown的转换能力

在HarmonyOS鸿蒙Next开发APP时，图片资源的尺寸处理应遵循以下原则：

  1. 适配不同屏幕密度：HarmonyOS支持多种屏幕密度（如mdpi、hdpi、xhdpi、xxhdpi等）。开发者应提供不同密度的图片资源，确保在不同设备上显示效果一致。图片资源应放置在对应的资源目录中，如res/drawable-mdpi、res/drawable-hdpi等。

  2. 使用矢量图：建议使用矢量图（SVG格式）替代位图。矢量图可以无损缩放，适应不同分辨率的屏幕，减少资源文件的大小和数量。

  3. 图片压缩：在不影响视觉质量的前提下，对位图进行压缩处理，减少APK体积。可以使用工具如TinyPNG进行优化。

  4. 合理选择图片格式：根据图片内容选择合适的格式，如PNG适合带有透明背景的图片，JPEG适合照片类图片。

  5. 动态加载图片：对于大尺寸图片，建议使用异步加载或按需加载的方式，避免一次性加载过多图片导致内存占用过高。

  6. 使用Nine-Patch图片：对于需要拉伸的图片，如背景图或按钮图，使用Nine-Patch格式，确保拉伸时不会失真。

遵循这些原则，可以有效提升APP的图片资源管理和显示效果。

回到顶部