Android启动屏幕图像大小适合所有设备

问题描述 投票:204回答:9

我有一个全屏PNG,我想在飞溅中显示。那里只有一个错误,我不知道每个可绘制文件夹(ldpimdpihdpixhdpi)的大小。我的应用程序应该在所有手机和平板电脑上运行良好和美观。我应该创建什么尺寸(以像素为单位),以便在所有屏幕上显示漂亮的效果?

android png screen drawable splash
9个回答
390
投票

Disclaimer

这个答案是从2013年开始的,已经过时了。从Android 3.2开始,现在有6组屏幕密度。这个答案会尽快更新,但没有ETA。目前请参考official documentation了解所有密度(尽管有关特定像素大小的信息总是很难找到)。

Here's the tl/dr version

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

有了这个,Android将为设备的图像密度选择合适的文件,然后它将根据9补丁标准拉伸图像。

end of tl;dr. Full post ahead

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

适合各种尺寸

借助Android,公司可以开发几乎任何尺寸的手机和桌子,几乎可以达到他们想要的任何分辨率。因此,启动画面没有“正确的图像尺寸”,因为没有固定的屏幕分辨率。这对想要实现启动画面的人来说是一个问题。

Do your users really want to see a splash screen?

(另一方面,在可用性人员中,有些人不鼓励使用闪屏。有人认为用户已经知道他使用了什么应用程序,并且没有必要使用闪屏来标记您的图像,因为它只会中断用户体验但是,应该在初始化(5s +)时需要一些相当大的负载的应用程序中使用它,包括游戏等,这样用户就不会想知道应用程序是否崩溃了

屏幕密度; 4节课

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

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

您(如果您是设计师)需要知道的是,Android基本上从4个图像中选择显示,具体取决于设备。因此,您基本上必须设计4个不同的图像(尽管可以针对不同的格式开发更多图像,例如宽屏,纵向/横向模式等)。

考虑到这一点,请注意:除非您为Android中使用的每个分辨率设计屏幕,否则您的图像将拉伸以适合屏幕尺寸。除非您的图像基本上是渐变或模糊,否则拉伸会产生一些不希望的失真。因此,您基本上有两个选项:为每个屏幕尺寸/密度组合创建图像,或创建四个9补丁图像。

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

9补丁图像

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

A few ground rules

  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补丁图像实际上必须有102x102(顶部,底部,左侧和右侧100x100 + 1px)
  8. 9个补丁图像必须以* .9.png结尾

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

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

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

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

以下是此图片在应用内100x100中的样子:

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

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

以下是每种密度类别的最小,最常见分辨率列表:

  • xlarge(xhdpi):640x960
  • 大(hdpi):480x800
  • 中(mdpi):320x480
  • 小(ldpi):240x320

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

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

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


113
投票

肖像模式

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作为启动画面


28
投票

肖像

LDPI:200x320px

MDPI:320x480px

HDPI:480x800px

XHDPI:720px1280px

景观

LDPI:320x200px

MDPI:480x320px

HDPI:800x480px

XHDPI:1280x720px


16
投票

我搜索了最好和最简单的答案来制作9补丁图像。现在要制作9补丁图像是最简单的任务。

https://romannurik.github.io/AndroidAssetStudio/index.html,您只需点击一下即可为所有分辨率制作9个补丁图像 - XHDPI,HDPI,MDPI,LDPI。


11
投票

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

这将有助于您平滑和加快您的表现,以及徽标使用.9补丁图像。


9
投票
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

3
投票

就我而言,我在style.xml中使用了list drawable。使用图层列表可绘制,您只需要一个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>

和draw_screen.xml在drawable文件夹中。

<?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>

“background_noizi”是可绘制文件夹中的png。我希望它有所帮助


3
投票

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

说实话,我失去了主意,但它将另一个屏幕功能称为大小(不仅仅是密度) https://developer.android.com/guide/practices/screens_support.html 如果有错误请通知我

Link1: dimensions.xlsx

Link2: dimensions.xlsx


2
投票

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

go to material.io

© www.soinside.com 2019 - 2024. All rights reserved.