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

Question

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

Answer 1

放弃

这个答案是从2013年开始的,已经过时了.从Android 3.2开始,现在有6组屏幕密度.这个答案会尽快更新,但没有ETA.有关所有密度的信息,请参阅官方文档(尽管有关特定像素大小的信息始终难以找到).

这是tl/dr版本

• 创建4个图像,每个屏幕密度一个:

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

• 阅读Android开发者指南中的9补丁图像介绍

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

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

tl结束;博士 全程发布

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

适合各种尺寸

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

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

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

屏幕密度; 4节课

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

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

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

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

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

9补丁图像

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

一些基本规则

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呈现的相同特定颜色看起来不同).

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

Answer 2

肖像模式

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

Answer 3

肖像

LDPI:200x320px

MDPI:320x480px

HDPI:480x800px

XHDPI:720px1280px

景观

LDPI:320x200px

MDPI:480x320px

HDPI:800x480px

XHDPI:1280x720px

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

就我而言，我在 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>

和 flash_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>
</layer-list>

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

Answer 8

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

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

链接1：尺寸.xlsx

链接2：尺寸.xlsx