Android的闪屏图像尺寸,以适应所有设备图像、尺寸、设备、以适应

2023-09-11 12:23:01 作者:等风来

我有一个全屏幕的PNG我希望显示在飞溅。只有一个错误,我不知道 什么尺寸摆在每一个绘制文件夹(LDPI , MDPI 华电国际和 xhdpi )。我的应用程序应该运行良好,美观上的所有手机和平板电脑。是什么尺寸(像素),我应该创造这样的飞溅显示不错在所有屏幕上?

I have a full screen PNG I want to display on splash. Only one error there, and I have no idea what size to put in every drawable folder (ldpi, mdpi, hdpi, and xhdpi). My application is supposed to run good and beautiful on all phones and tablets. What sizes (in pixels) should I create so the splash displays nice on all screens?

推荐答案

这个答案是从2013年开始,是严重过时。由于安卓3.2的,现在有6组的屏幕密度。这个答案将尽快我可以更新,但没有ETA。请参阅官方文档所有密度的时刻(虽然在特定的像素大小的信息是一如既往很难找到)。

Disclaimer

This answer is from 2013 and is seriously outdated. As of Android 3.2 there are now 6 groups of screen density. This answer will be updated as soon as I am able, but with no ETA. Refer to the official documentation for all the densities at the moment (although information on specific pixel sizes is as always hard to find).

创建4张图片,每个屏幕像素密度:

Create 4 images, one for each screen density: XLARGE(xhdpi):640×960 大(华电国际):480×800 在介质(MDPI):小320x480 小(LDPI):240×​​320

阅读 9补丁的Andr​​oid开发者指南图像介绍

通过这一点,Android将选择适当的文件作为设备的图像密度,那么它会根据9补丁标准拉伸图像。

With this, Android will select the appropriate file for the device's image density, then it will stretch the image according to the 9-patch standard.

我回答了关于这个问题的设计相关的方面。我不是一个开发者,所以我不能提供code执行许多提供的解决方案中。唉,我的目的是帮助谁正在为丢失的,因为我是当我帮助开发我的第一个Android应用程序设计师。

I am answering in respect to the design-related aspect of the question. I am not a developer, so I won't be able to provide code for implementing many of the solutions provided. Alas, my intent is to help designers who are as lost as I was when I helped develop my first Android App.

使用Android的,公司可以开发自己的手机,几乎任何大小的表,几乎任何他们想要的分辨率。正因为如此,没有正确的图像大小闪屏,因为没有固定的屏幕分辨率。这提出了一个问题,人们希望实现闪屏。

With Android, companies can develop their mobile phones and tables of almost any size, with almost any resolution they want. Because of that, there is no "right image size" for a splash screen, as there are no fixed screen resolutions. That poses a problem for people that want to implement a splash screen.

(在一个侧面说明,闪屏有点之间的可用性人劝阻。有人认为,用户已经知道了什么​​应用程序,他敲了几下,并配有闪屏品牌的形象是没有必要的,因为它仅中断与一个广告的用户体验。然而,应当使用,在需要一段相当加载应用程序时初始化(5S +),包括游戏和这样,使得用户不会卡住知道如果应用程序崩溃或不)

(On a side note, splash screens are somewhat discouraged among the usability guys. It is argued that the user already knows what app he tapped on, and branding your image with a splash screen is not necessary, as it only interrupts the user experience with an "ad". It should be used, however, in applications that require some considerable loading when initialized (5s+), including games and such, so that the user is not stuck wondering if the app crashed or not)

因此​​,考虑到这么多不同的屏幕在市场上手机的分辨率,谷歌实施了一些替代品和漂亮的解决方案,可以提供帮助。你必须知道的第一件事是,Android的分体的所有的屏幕为4个不同的屏幕密度:

So, given so many different screen resolutions in the phones on the market, Google implemented some alternatives and nifty solutions that can help. The first thing you have to know is that Android separates ALL screens into 4 distinct screen densities:

在低密度(LDPI〜120DPI) 中密度(MDPI〜160dpi) 在高密度(华电国际〜240dpi) 在超高密度(xhdpi〜320dpi) (这些DPI值是近似的,因为定制的设备会有不同的DPI值) Low Density (ldpi ~ 120dpi) Medium Density (mdpi ~ 160dpi) High Density (hdpi ~ 240dpi) Extra-High Density (xhdpi ~ 320dpi) (These dpi values are approximations, since custom built devices will have varying dpi values)

什么,你(如果你是一个设计师)需要知道这是Android的4图像基本上选择显示,根据设备。所以,你基本上要设计出4种不同的图像(虽然更可以为不同的格式,如宽屏,人像/风景模式等进行开发)。

What you (if you're a designer) need to know from this is that Android basically chooses from 4 images to display, depending on the device. So you basically have to design 4 different images (although more can be developed for different formats such as widescreen, portrait/landscape mode, etc).

考虑到这一点知道这一点:除非你设计的屏幕为采用的是Android的每一个的分辨率,图像将拉伸以适应屏幕大小。除非你的形象基本上是一个渐变或模糊,你会得到的拉伸一些不需要的失真。所以,你基本上有两种选择:每个屏幕尺寸/密度的组合,生成图像,或者创建四个9,补片图像

With that in mind know this: unless you design a screen for every single resolution that is used in Android, your image will stretch to fit screen size. And unless your image is basically a gradient or blur, you'll get some undesired distortion with the stretching. So you have basically two options: create an image for each screen size/density combination, or create four 9-patch images.

最难的解决方案是设计一个不同的启动画面的每一个解决方案。您可以通过以下表格中的决议案此页面年底开始(有更多的例:960×720没有被列入其中)。假设你有一些小细节的形象,如小文,你要设计一个以上的屏幕,每个分辨率。例如,正在显示一个480x800的图像中的中等屏幕看起来不错,但在一个较小的屏幕(高密度/ DPI)的标识可能会变得太小,或者一些文本可能变得不可读。

The hardest solution is to design a different splash screen for every single resolution. You can start by following the resolutions in the table at the end of this page (there are more. Example: 960 x 720 is not listed there). And assuming you have some small detail in the image, such as small text, you have to design more than one screen for each resolution. For example, a 480x800 image being displayed in a medium screen might look ok, but on a smaller screen (with higher density/dpi) the logo might become too small, or some text might become unreadable.

另一个解决方案是创建9片图像。它基本上是一个图像周围1象素透明边框,在这个边界,您可以定义图像的部分将被允许舒展的顶部和左侧区域绘制黑色像素。我不会去到如何9补丁图像工作的细节,但在短期,这对准在顶部和左侧区域的标记的像素将被反复拉伸图像的像素。

The other solution is to create a 9-patch image. It is basically a 1-pixel-transparent-border around your image, and by drawing black pixels in the top and left area of this border you can define which portions of your image will be allowed to stretch. I won't go into the details of how 9-patch images work but, in short, the pixels that align to the markings in the top and left area are the pixels that will be repeated to stretch the image.

您可以在Photoshop这些图像(或任何图像编辑软件,它可以准确地创建透明的PNG图像)。 的1个像素的边框已经是全透明的。 的1像素的透明边框已经成为各地的图像,而不只是上边和左边。 您只能画在这方面的黑色(#000000)像素。 的顶部和左侧边框(其中定义图像拉伸)只能有一个点(1 x 1像素),两个点(包括1 x 1像素),或一个连续的行(宽x 1像素或1像素×高)。 如果您选择使用2个点,图像将被按比例扩大(所以每个点会轮流扩大,直到最后的宽度/高度实现) 的1px的边框已经成为除了预期的基本文件尺寸。因此100×100 9-补丁图像具有实际上具有102x102(100×100 + 1像素进行上,下,左,右) 9,补片图像必须要以* .9.png

所以,你可以将1个点上您的标志两侧(在顶部边框),以及1个点的上方和下方(左侧边框),而这些标记的行和列将是唯一的像素伸展。

So you can place 1 dot on either side of your logo (in the top border), and 1 dot above and below it (on the left border), and these marked rows and columns will be the only pixels to stretch.

下面是一个9片图像,102x102px(100×100的最终尺寸,为应用程序的目的):

Here's a 9-patch image, 102x102px (100x100 final size, for app purposes):

下面是相同的图像的200%缩放:

Here's a 200% zoom of the same image:

注意在顶部和左侧的说法哪些行/列将扩大1px的痕迹。

Notice the 1px marks on top and left saying which rows/columns will expand.

下面是这个图片是什么样子的100x100的内部应用程序:

Here's what this image would look like in 100x100 inside the app:

下面是它会喜欢什么,如果扩大到460x140:

And here's what it would like if expanded to 460x140:

最后一件事要考虑。这些图像看起来精致显示器屏幕上,并在大多数手机,但如果该设备具有非常高的图像密度(DPI),图像会显得过小。也许仍清晰可辨,但与1920×1200分辨率的平板电脑,图像会出现在中间的一个非常小的方形。那么,有什么解决办法?设计4个不同的9贴片发射器的图像,每一个用于一个不同的密度集。为了确保不发生收缩,你应该设计为每个类别的密度最低的共同决议。收缩是不可取的,因为在这里的9补丁只占拉伸,所以在收缩过程小文和其他元素可能会失去可读性。

One last thing to consider. These images might look fine on your monitor screen and on most mobiles, but if the device has a very high image density (dpi), the image would look too small. Probably still legible, but on a tablet with 1920x1200 resolution, the image would appear as a very small square in the middle. So what's the solution? Design 4 different 9-patch launcher images, each for a different density set. To ensure that no shrinking will occur, you should design in the lowest common resolution for each density category. Shrinking is undesirable here because 9-patch only accounts for stretching, so in a shrinking process small text and other elements might lose legibility.

下面是对每个类别的密度最小,最常见的分辨率列表:

Here's a list of the smallest, most common resolutions for each density category:

XLARGE(xhdpi):640×960 大(华电国际):480×800 在介质(MDPI):小320x480 小(LDPI):240×​​320

因此​​,在上述决议案设计四溅屏幕,展开图像,把1px的透明边框的画布四周,标志着该行/列会拉伸。请记住,这些图像将用于的任意的设备密度类,所以你LDPI图像(240×320)可能会被拉伸至1024×600的超大平板电脑的小图像密度(〜120 DPI )。所以9个补丁是用于拉伸,只要你不想要的照片或复杂的图形启动画面的最佳解决方案(记住这些限制为您创建的设计)。

So design four splash screens in the above resolutions, expand the images, putting a 1px transparent border around the canvas, and mark which rows/columns will be stretchable. Keep in mind these images will be used for ANY device in the density category, so your ldpi image (240 x 320) might be stretched to 1024x600 on an extra large tablet with small image density (~120 dpi). So 9-patch is the best solution for the stretching, as long as you don't want a photo or complicated graphics for a splash screen (keep in mind these limitations as you create the design).

此外,对于该拉伸不会发生的唯一方法就是设计一个屏幕每个分辨率(或者每个分辨率密度的组合,如果你想避免图像变得过小/大高/低密度器件)或者告诉图像不拉伸,有一个背景颜色出现的地方伸展会出现(还记得一个特定颜色的是Android引擎渲染可能会看,因为颜色配置文件来自同一个特定的颜色Photoshop所提供的不同)。

Again, the only way for this stretching not to happen is to design one screen each resolution (or one for each resolution-density combination, if you want to avoid images becoming too small/big on high/low density devices), or to tell the image not to stretch and have a background color appear wherever stretching would occur (also remember that a specific color rendered by the Android engine will probably look different from the same specific color rendered by photoshop, because of color profiles).

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

I hope this made any sense. Good luck!

 
精彩推荐
图片推荐