首页 文章

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

提问于
浏览
200

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

9 回答

  • 9

    免责声明

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

    这是tl / dr版本

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

    • xlarge(xhdpi):640x960

    • 大(hdpi):480x800

    • medium(mdpi):320x480

    • small(ldpi):240x320

    • 在Android开发人员指南中阅读9-patch image introduction

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

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

    tl;博士全面发布

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

    适合所有尺码

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

    您的用户是否真的想看到闪屏?

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

    屏幕密度; 4节课

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

    • 低密度(ldpi~120dpi)

    • 中密度(mdpi~160dpi)

    • 高密度(hdpi~240dpi)

    • 超高密度(xhdpi~320dpi)(这些dpi值是近似值,因为自定义构建的设备将具有不同的dpi值)

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

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

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

    9 -patch image

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

    一些基本规则

    • 您可以在photoshop中制作这些图像(或任何可以准确创建透明png的图像编辑软件) .

    • 1像素边框必须完全透明 .

    • 1像素透明边框必须在您的图像周围,而不仅仅是顶部走了 .

    • 您只能在此区域中绘制黑色(#000000)像素 .

    • 顶部和左侧边框(定义图像拉伸)只能有一个点(1px x 1px),两个点(均为1px x 1px)或一条连续线(宽度x 1px或1px x高度) .

    • 如果选择使用2个点,图像将按比例展开(因此每个点将轮流展开,直到达到最终宽度/高度)

    • 1px边框必须是预期的基本文件尺寸的补充 . 所以100x100 9补丁图像实际上必须有102x102(顶部,底部,左侧和右侧100x100 1px)

    • 9补丁图像必须以* .9.png结尾

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

    示例

    这是一个9补丁图像,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 Launcher 图像,每个图像用于不同的密度集 . 为确保不会发生收缩,您应该为每个密度类别设计最低的通用分辨率 . 缩小是不可取的,因为9-patch仅考虑拉伸,因此在缩小的过程中,小文本和其他元素可能会失去易读性 .

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

    • xlarge(xhdpi):640x960

    • 大(hdpi):480x800

    • medium(mdpi):320x480

    • small(ldpi):240x320

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

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

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

  • 16

    肖像模式

    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

  • 388

    PORTRAIT

    LDPI:200x320px

    MDPI:320x480px

    HDPI:480x800px

    XHDPI:720px1280px

    LANDSCAPE

    LDPI:320x200px

    MDPI:480x320px

    HDPI:800x480px

    XHDPI:1280x720px

  • 3

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

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

  • 2

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

    这将有助于您平滑和加快您的性能,并使用.9补丁图像 .

  • 27
    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
    
  • 2

    就我而言,我在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 . 我希望它有所帮助

  • 11

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

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

    Link1: dimensions.xlsx

    Link2: dimensions.xlsx

  • 101

    如果你在看了解所有主要设备的屏幕细节

    go to material.io

相关问题