适合所有设备的 Android 启动画面图像大小

标签 android png screen drawable splash-screen

我有一个全屏 PNG,我想在启动时显示。只有一个错误,我不知道
在每个可绘制文件夹( ldpimdpihdpixhdpi )中放入什么尺寸。我的应用程序应该在所有手机和平板电脑上运行良好且美观。我应该创建什么尺寸(以像素为单位),以便在所有屏幕上都能很好地显示启动画面?

最佳答案

免责声明

这个答案是从 2013 年开始的,已经严重过时了。从 Android 3.2 开始,现在有 6 组屏幕密度。我会尽快更新此答案,但没有预计到达时间。引用 official documentation对于目前所有的密度(尽管关于特定像素大小的信息总是很难找到)。

这是 tl/dr 版本

  • 创建 4 个图像,每个屏幕密度一个:
  • 超大 (xhdpi):640x960
  • 大 (hdpi):480x800
  • 中等 (mdpi):320x480
  • 小 (ldpi):240x320
  • 阅读 9-patch image introduction在 Android 开发者指南中
  • 设计具有可以安全拉伸(stretch)的区域而不影响最终结果的图像

  • 这样,Android 将为设备的图像密度选择合适的文件,然后它会根据 9-patch 标准拉伸(stretch)图像。

    tl 结束;博士。完整的帖子在前面

    我正在回答问题的与设计相关的方面。我不是开发人员,因此我无法提供用于实现所提供的许多解决方案的代码。唉,我的目的是帮助那些像我帮助开发我的第一个 Android 应用程序时一样迷茫的设计师。

    适合所有尺寸

    使用 Android,公司可以开发几乎任何尺寸的手机和 table ,几乎可以使用他们想要的任何分辨率。因此,启动画面没有“正确的图像大小”,因为没有固定的屏幕分辨率。这给想要实现启动画面的人带来了问题。

    您的用户真的想看到启动画面吗?

    (顺便说一句,可用性人员在某种程度上不鼓励启动画面。有人认为用户已经知道他点击了哪个应用程序,并且没有必要用启动画面标记您的图像,因为它只会中断用户体验一个“广告”。但是,它应该用于初始化时需要大量加载的应用程序(5s+),包括游戏等,这样用户就不会想知道应用程序是否崩溃了)

    屏幕密度; 4类

    因此,鉴于市场上手机的屏幕分辨率如此之多,谷歌实现了一些可以提供帮助的替代方案和漂亮的解决方案。您首先要知道的是,Android 将所有屏幕分为 4 种不同的屏幕密度:
  • 低密度 (ldpi ~ 120dpi)
  • 中密度 (mdpi ~ 160dpi)
  • 高密度 (hdpi ~ 240dpi)
  • 超高密度 (xhdpi ~ 320dpi)
    (这些 dpi 值是近似值,因为定制设备将具有不同的 dpi 值)

  • 您(如果您是设计师)需要从中了解的是,Android 基本上会根据设备从 4 个图像中进行选择。因此,您基本上必须设计 4 个不同的图像(尽管可以为不同的格式开发更多图像,例如宽屏、纵向/横向模式等)。

    请记住这一点:除非您为 Android 中使用的每个分辨率设计一个屏幕,否则您的图像将拉伸(stretch)以适应屏幕尺寸。除非您的图像基本上是渐变或模糊,否则拉伸(stretch)时会出现一些不希望有的失真。所以你基本上有两个选择:为每个屏幕尺寸/密度组合创建一个图像,或者创建四个 9 块图像。

    最难的解决方案是为每个分辨率设计不同的启动画面。您可以按照 this page 末尾的表格中的解决方案开始。 (还有更多。示例:960 x 720 未在此处列出)。假设您在图像中有一些小细节,例如小文本,您必须为每个分辨率设计多个屏幕。例如,在中等屏幕上显示的 480x800 图像可能看起来不错,但在较小的屏幕上(具有更高的密度/dpi),徽标可能会变得太小,或者某些文本可能会变得不可读。

    9 片图像

    另一种解决方案是create a 9-patch image .它基本上是围绕图像的 1 像素透明边框,通过在此边框的顶部和左侧区域绘制黑色像素,您可以定义允许拉伸(stretch)图像的哪些部分。我不会详细介绍 9-patch 图像的工作原理,但简而言之,与顶部和左侧区域中的标记对齐的像素是将重复以拉伸(stretch)图像的像素。

    一些基本规则
  • 您可以在 photoshop(或任何可以准确创建透明 png 的图像编辑软件)中制作这些图像。
  • 1 像素边框必须完全透明。
  • 1 像素的透明边框必须围绕您的图像,而不仅仅是顶部和左侧。
  • 您只能在该区域绘制黑色 (#000000) 像素。
  • 上边框和左边框(定义图像拉伸(stretch))只能有一个点(1px x 1px)、两个点(均为 1px x 1px)或一条连续线(宽度 x 1px 或 1px x 高度)。
  • 如果您选择使用 2 个点,图像将按比例扩展(因此每个点将轮流扩展,直到达到最终的宽度/高度)
  • 1px 边框必须是预期的基本文件尺寸的补充。所以一个 100x100 的 9-patch 图像实际上必须有 102x102(100x100 +1px 上、下、左和右)
  • 9-patch 图片必须以 *.9.png 结尾

  • 因此,您可以在徽标的两侧(顶部边框中)放置 1 个点,在其上方和下方放置 1 个点(在左边框中),这些标记的行和列将是唯一要拉伸(stretch)的像素。

    示例

    这是一个 9-patch 图像,102x102px(100x100 最终尺寸,用于应用程序):

    9-patch image, 102x102px

    这是同一图像的 200% 缩放:

    the same image, magnified 2x for clarity

    注意顶部和左侧的 1px 标记表示哪些行/列将展开。

    以下是该图像在应用程序内 100x100 的外观:

    rendered into 100x100

    如果扩展到 460x140,效果如下:

    rendered into 460x140

    最后要考虑的一件事。这些图像在您的显示器屏幕和大多数移动设备上可能看起来不错,但如果设备具有非常高的图像密度 (dpi),图像就会显得太小。可能仍然清晰可辨,但在分辨率为 1920x1200 的平板电脑上,图像会在中间显示为一个非常小的正方形。那么有什么解决办法呢?设计 4 个不同的 9-patch 启动器图像,每个图像用于不同的密度集。为确保不会发生收缩,您应该为每个密度类别以最低的公共(public)分辨率进行设计。收缩在这里是不可取的,因为 9-patch 只考虑拉伸(stretch),所以在收缩过程中,小文本和其他元素可能会失去易读性。

    以下是每个密度类别的最小、最常见分辨率的列表:
  • 超大 (xhdpi):640x960
  • 大 (hdpi):480x800
  • 中等 (mdpi):320x480
  • 小 (ldpi):240x320

  • 因此,按照上述分辨率设计四个启动画面,展开图像,在 Canvas 周围放置一个 1px 的透明边框,并标记哪些行/列将是可拉伸(stretch)的。请记住,这些图像将用于密度类别中的任何设备,因此您的 ldpi 图像 (240 x 320) 可能会在具有小图像密度 (~120 dpi) 的超大平板电脑上拉伸(stretch)至 1024x600。所以 9-patch 是拉伸(stretch)的最佳解决方案,只要您不想要照片或复杂图形用于启动画面(在创 build 计时请记住这些限制)。

    同样,这种拉伸(stretch)不会发生的唯一方法是为每个分辨率设计一个屏幕(或者为每个分辨率-密度组合设计一个屏幕,如果您想避免图像在高/低密度设备上变得太小/太大),或者告诉图像不会拉伸(stretch)并在发生拉伸(stretch)的地方显示背景颜色(还请记住,由于颜色配置文件,Android 引擎呈现的特定颜色可能与 photoshop 呈现的相同特定颜色看起来不同)。

    我希望这有意义。祝你好运!

    关于适合所有设备的 Android 启动画面图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10574363/

    相关文章:

    Android 复杂 View : manually create or using layout xml file?

    android - 如何定义调用其他应用程序的 Intent?

    android - 为什么 `PRIORITY_BALANCED_POWER_ACCURACY` 比 `PRIORITY_HIGH_ACCURACY` 消耗更多电池?

    iphone - 旋转 PNG 文件

    windows - 一个类似ImageOptim的windows图像压缩工具(of mac)

    android - 如何在网页上保持屏幕打开

    android - 如何在 web 模式下将 flutter_web_view 转换为 HtmlElementView

    c++ - 在加载和保存期间缺少 DirectX 中 PNG 纹理的某些颜色?

    interface - 使用眼动追踪跟踪窗口焦点? (窗口管理器)

    java - 获取屏幕高度返回比物理屏幕可以显示的更大的屏幕