224

我有一个全屏 PNG，我想在启动画面上显示。只有一个错误，我不知道在每个可绘制文件夹（、、、和）中放置ldpi什么大小。我的应用程序应该在所有手机和平板电脑上运行良好且美观。我应该创建什么尺寸（以像素为单位）才能使启动画面在所有屏幕上都显示得很好？mdpihdpixhdpi

4

11 回答 11

406

免责声明

这个答案来自 2013 年，并且已经严重过时。从 Android 3.2 开始，现在有 6 组屏幕密度。这个答案会尽快更新，但没有预计到达时间。目前所有密度请参阅官方文档（尽管始终难以找到有关特定像素大小的信息）。

这是 tl/dr 版本

  • 创建 4 个图像，每个屏幕密度一个：

    • 超大（xhdpi）：640x960
    • 大（hdpi）：480x800
    • 中等（mdpi）：320x480
    • 小（ldpi）：240x320

  • 阅读Android 开发者指南中的9-patch 图片介绍

  • 设计具有可以安全拉伸而不影响最终结果的区域的图像

这样，Android 会根据设备的图像密度选择合适的文件，然后根据 9-patch 标准拉伸图像。

tl结束；博士。前面有完整的帖子

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

适合所有尺寸

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

您的用户真的想看到闪屏吗？

（附带说明一下，在可用性方面，启动屏幕有点不鼓励。有人认为用户已经知道他点击了哪个应用程序，并且没有必要用启动屏幕标记您的图像，因为它只会中断用户体验一个“广告”。然而，它应该用在初始化时（5s+）需要大量加载的应用程序中，包括游戏等，这样用户就不会想知道应用程序是否崩溃了）

屏幕密度；4班

因此，鉴于市场上手机的屏幕分辨率如此之多，谷歌实施了一些可以提供帮助的替代方案和巧妙的解决方案。您必须知道的第一件事是，Android 将所有屏幕分成 4 种不同的屏幕密度：

  1. 低密度 (ldpi ~ 120dpi)
  2. 中等密度 (mdpi ~ 160dpi)
  3. 高密度 (hdpi ~ 240dpi)
  4. 超高密度（xhdpi ~ 320dpi）（这些 dpi 值是近似值，因为定制设备会有不同的 dpi 值）

您（如果您是设计师）需要知道的是，Android 基本上会根据设备从 4 个图像中选择显示。因此，您基本上必须设计 4 种不同的图像（尽管可以为不同的格式开发更多图像，例如宽屏、纵向/横向模式等）。

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

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

9 补丁图像

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

一些基本规则

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

因此，您可以在徽标的任一侧（上边框）放置 1 个点，在其上方和下方（左边框）放置 1 个点，这些标记的行和列将是唯一要拉伸的像素。

例子

这是一个 9 补丁图像，102x102 像素（最终尺寸为 100x100，用于应用目的）：

9 补丁图像，102x102 像素

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

相同的图像，为清晰起见放大了 2 倍

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

以下是应用内 100x100 的图像：

渲染成 100x100

如果扩展到 460x140，这就是它想要的效果：

渲染成 460x140

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

以下是每个密度类别的最小、最常见分辨率的列表：

  • 超大（xhdpi）：640x960
  • 大（hdpi）：480x800
  • 中等（mdpi）：320x480
  • 小（ldpi）：240x320

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

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

我希望这有任何意义。祝你好运！

于 2013-04-01T13:27:39.093 回答
125

肖像模式

MDPI 为 320x480 dp = 320x480px (1x)

LDPI 为 0.75 x MDPI = 240x360px

HDPI 为 1.5 x MDPI = 480x720px

XHDPI 是 2 x MDPI = 640x960px

XXHDPI 是 3 x MDPI = 960x1440px

XXXHDPI 是 4 x MDPI = 1280x1920px

风景模式

MDPI 为 480x320 dp = 480x320px (1x)

LDPI 为 0.75 x MDPI = 360x240px

HDPI 是 1.5 x MDPI = 720x480px

XHDPI 是 2 x MDPI = 960x640px

XXHDPI 是 3 x MDPI = 1440x960px

XXXHDPI 是 4 x MDPI = 1920x1280px

编辑：

如果您在 2019 年以上阅读本文，我建议您使用Lottie作为启动画面

于 2016-01-11T16:18:50.263 回答
30

肖像

低密度脂蛋白：200x320 像素

MDPI：320x480像素

HDPI：480x800 像素

XHDPI：720px1280px

景观

低密度脂蛋白：320x200 像素

MDPI：480x320像素

HDPI：800x480像素

XHDPI：1280x720像素

于 2014-04-23T02:51:22.460 回答
17

我已经搜索了制作 9-patch 图像的最佳和最简单的答案。现在制作 9 个补丁图像是最简单的任务。

从https://romannurik.github.io/AndroidAssetStudio/index.html，您可以一键制作所有分辨率的 9 补丁图像 - XHDPI、HDPI、MDPI、LDPI。

于 2014-01-20T10:34:14.517 回答
12

使用 PNG 并不是一个好主意。实际上，就性能而言，它的成本很高。您可以使用可绘制的 XML 文件，例如Facebook 的 background。

这将帮助您平滑和加快您的性能，并为徽标使用 0.9 补丁图像。

于 2013-12-05T06:56:56.253 回答
10 
Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi
于 2015-09-03T15:59:07.540 回答
6

就我而言，我在 style.xml 中使用了可绘制列表。使用可绘制图层列表，您只需要一个适用于所有屏幕尺寸的 png。

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

和可绘制文件夹中的 flash_screen.xml。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

“background_noizi”是drawable文件夹中的一个png文件。我希望这有帮助。

于 2015-10-27T10:51:54.380 回答
4

前段时间我创建了一个支持尺寸的excel文件
希望这对某人有帮助

老实说，我失去了这个想法，但它将另一个屏幕功能称为尺寸（不仅仅是密度）
https://developer.android.com/guide/practices/screens_support.html
如有错误请告知

链接1：尺寸.xlsx

链接2：尺寸.xlsx

于 2016-10-04T03:47:46.370 回答
4

编辑的解决方案将使您的 SplashScreen 在所有 API（包括 API21 到 API23）上看起来都很棒

如果您只针对 APIs24+，您可以直接在其 xml 文件中按比例缩小矢量可绘制对象，如下所示：

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

在上面的代码中，我将在 640x640 画布上绘制的可绘制对象重新缩放为 240x240。然后我就像这样把它放在我的启动画面中，效果很好：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

我的代码实际上只是在底部的图片中绘制三角形，但在这里你可以看到你可以用它来实现什么。与使用位图时得到的像素化边缘相比，分辨率终于很好了。所以一定要使用可绘制的矢量（有一个名为 vectr 的网站，我用它来创建我的网站，而无需下载专门的软件）。

编辑以使其也适用于 API21-22-23

虽然上述解决方案适用于运行 API24+ 的设备，但在将我的应用程序安装到运行 API22 的设备后，我感到非常失望。我注意到启动画面再次试图填满整个视图并且看起来像狗屎。撕了半天的眉毛后，我终于凭借纯粹的意志力强行解决了。

您需要创建第二个文件，其名称与 splashscreen xml 完全相同（比如说 splash_screen.xml），并将其放入您将在 res/ 文件夹中创建的 2 个名为 drawable-v22 和 drawable-v21 的文件夹中（以便您查看它们必须将您的项目视图从 Android 更改为 Project）。这用于告诉您的手机在相关设备运行与可绘制文件夹中的 -vXX 后缀相对应的 API 时重定向到放置在这些文件夹中的文件，请参阅此链接。将以下代码放在您在这些文件夹中创建的 splash_screen.xml 文件的图层列表中：

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

这些是文件夹的外观

由于这些 API 的某些原因，您必须将您的可绘制对象包装在位图中以使其工作并喷射最终结果看起来相同。问题是您必须使用带有附加可绘制文件夹的方法，因为 splash_screen.xml 文件的第二个版本将导致您的启动屏幕在运行 API 高于 23 的设备上根本不显示。您可能还必须放置splash_screen.xml 的第一个版本到 drawable-v24 中，因为 android 默认为它可以找到资源的最近的 drawable-vXX 文件夹。希望这可以帮助

我的闪屏

于 2020-03-06T05:21:36.980 回答
3

** 如果您正在寻找各种主要设备的屏幕详细信息 **

去material.io

于 2017-06-29T06:57:21.653 回答
1

根据Lucas Cerro 的这个答案，我使用Android 文档中的比率计算尺寸，使用答案中的基线。我希望这可以帮助其他人来这篇文章！

  • xxxlarge (xxxhdpi): 1280x1920 (4.0x)
  • xxlarge (xxhdpi)：960x1440 (3.0x)
  • xlarge (xhdpi): 640x960 (2.0x)
  • 大 (hdpi)：480x800 (1.5x)
  • 中 (mdpi)：320x480（1.0x 基线）
  • 小 (ldpi)：240x320 (0.75x) 
于 2019-11-21T19:44:16.533 回答