ChatGPT解决这个技术问题 Extra ChatGPT

适合所有设备的 Android 初始屏幕图像大小

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

我想创建一个启动画面...
@verybadalloc 它可能更深入,但我可以向你保证,它没有帮助 OP 解决他的问题,因为它发布得太晚了大约一年:p
是的,我很确定这对他没有帮助。在尝试自己找出答案时发现了这个主题,并决定发布另一个答案以帮助人们在我之后经历同样的事情。
我回答了类似类型的问题可能会有所帮助stackoverflow.com/questions/30494811/…

L
Lucas Cerro

免责声明

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

这是 tl/dr 版本

创建 4 张图像,每个屏幕密度一张: xlarge (xhdpi): 640x960 large (hdpi): 480x800 medium (mdpi): 320x480 small (ldpi): 240x320

超大(xhdpi):640x960

大(hdpi):480x800

中等(mdpi):320x480

小(ldpi):240x320

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

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

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

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

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

适合所有尺寸

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

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

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

屏幕密度; 4班

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

低密度 (ldpi ~ 120dpi) 中密度 (mdpi ~ 160dpi) 高密度 (hdpi ~ 240dpi) 超高密度 (xhdpi ~ 320dpi) (这些 dpi 值是近似值,因为定制设备会有不同的 dpi 值)

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

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

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

9 补丁图像

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

一些基本规则

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

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

例子

这是一个 9 补丁图像,102x102 像素(最终尺寸为 100x100,用于应用目的):

https://i.stack.imgur.com/AZv2V.png

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

https://i.stack.imgur.com/KD99c.png

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

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

https://i.stack.imgur.com/2cH0F.png

如果扩展到 460x140,这就是它想要的效果:

https://i.stack.imgur.com/9Ol8e.png

最后一件事要考虑。这些图像在您的显示器屏幕和大多数手机上可能看起来不错,但如果设备具有非常高的图像密度 (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 呈现的相同特定颜色不同)。

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


你用这个救了我的命,非常感谢你的回答。
我在实践中发现的东西。如果您使用 9-patch 图像,它需要小于您将支持的最小屏幕。看起来图像会放大,但不会缩小,导致剪裁......而且似乎需要为fitXY设置..
感谢您的评论,CleverCoder。您能否详细说明避免任何问题的理想尺寸是多少?我假设宽度和高度小 2px 就足够了?
您说“xlarge (xhdpi): 640x960”,但 documentation 说 xlarge 至少为 960dp x 720dp,所以 xlarge 屏幕的 xhdpi 密度应该是 1920px x 1440px . 密度和大小是不同的概念。
@LucasCerro:您应该考虑在第一行对这个原本很好的答案进行编辑,说答案已过时,并且从 Android 3.2 开始,根据可用的屏幕宽度,现在有 6 个组。
A
Ajmal Salim

肖像模式

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 作为初始屏幕


伟大的!正在寻找这个
最有用的解决方案
这些值似乎不正确。 XXHDPI 应该是 1920x1080。
是的!谢谢,这就是我要找的!太感谢了!
请问平板电脑尺寸怎么样?
J
JRE.exe

肖像

低密度脂蛋白:200x320 像素

MDPI:320x480像素

HDPI:480x800 像素

XHDPI:720px1280px

景观

低密度脂蛋白:320x200 像素

MDPI:480x320像素

HDPI:800x480像素

XHDPI:1280x720像素


物理屏幕尺寸和分辨率是独立的概念。以像素为单位的图像大小是两者的乘积。
告诉我XXHDPI、XXXHDPI的大小?
此答案中的值似乎与此处提供的信息不成比例: stackoverflow.com/a/19661363/1617737 。我认为接受的答案虽然较旧,但更有可能是正确的。
A
Amit K. Saha

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

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


P
Peter Mortensen

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

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


R
Richard de Wit
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

M
Matt

就我而言,我在 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文件。我希望这有帮助。


如果您的背景图像太大,它会拉伸
谢谢,很好用!
V
Vlad

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

https://i.stack.imgur.com/cxZbX.png

Link1: dimensions.xlsx

Link2: dimensions.xlsx

https://i.stack.imgur.com/3PWLV.png


q
quealegriamasalegre

编辑的解决方案将使您的 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)。每当相关设备运行与可绘制文件夹 see this link 中的 -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>

https://i.stack.imgur.com/hJPNc.png

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

https://i.stack.imgur.com/sSNX0.png


M
Midhun Vijayakumar

https://i.stack.imgur.com/zulhT.png

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

go to material.io


V
Victoria Gonda

根据 this answer from Lucas Cerro,我使用 the Android docs 中的比率计算尺寸,并使用答案中的基线。我希望这可以帮助其他人来这篇文章!

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)