ldpi、mdpi、hdpi、xhdpi 显示的 Android 初始屏幕尺寸? - 例如:ldpi 为 1024X768 像素

2023-12-31

我必须使用phonegap 为Android 应用程序设计启动屏幕(加载时适合屏幕的图像)。我必须设计适合 ldpi、mdpi、hdpi、xhdpi 等 4 种屏幕的 4 种尺寸图像。谁能告诉我这些屏幕的确切像素尺寸,以便我可以按该尺寸进行设计?

答案示例:

ldpi - 1024X768 px
mdpi  - 111 X 156 px  

 We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.

<gap:splash src="splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="splash/android/mdpi.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" />

Android 的启动屏幕尺寸

同时适用于 Cordova(又名 Phonegap)、React-Native 和所有其他开发平台

Format : 9-Patch PNG (recommended)

Dimensions

 - LDPI:
    - Portrait: 200x320px
    - Landscape: 320x200px
 - MDPI:
    - Portrait: 320x480px
    - Landscape: 480x320px
 - HDPI:
    - Portrait: 480x800px
    - Landscape: 800x480px
 - XHDPI:
    - Portrait: 720px1280px
    - Landscape: 1280x720px
 - XXHDPI
    - Portrait: 960x1600px
    - Landscape: 1600x960px
 - XXXHDPI 
    - Portrait: 1280x1920px
    - Landscape: 1920x1280px

Note:不需要准备 XXXHDPI,而且由于 9 块图像的重复区域,也可能需要准备 XXHDPI 大小。另一方面,如果仅使用纵向尺寸,则应用程序尺寸可能会更小。更多图片意味着需要更多空间。

注意

我认为所有设备都没有确切的尺寸。我使用 Xperia Z 5"。如果你开发一个跨平台的 webview 应用程序,你应该考虑很多事情(屏幕是否有软键导航按钮等)。因此,我认为只有一种合适的解决方案。解决方案是准备一个9 块闪屏 http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch (find How to design a new splash screen标题如下)。

  1. 为上述屏幕尺寸创建启动屏幕,如下所示9-patch。给你的文件命名.9.png后缀
  2. 将以下行添加到您的 config.xml 文件中
  3. 如果需要,添加启动屏幕插件。
  4. 运行您的项目。

就是这样!

科尔多瓦特定代码
将行添加到 config.xml 中以用于 9 补丁启动屏幕

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
    <splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
    <splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
    <splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
    <splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/> 
</platform>

使用时要在 config.xml 中添加行non-9 块闪屏

<platform name="android">
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

如何设计新的启动画面

我将描述一种使用这种方式创建正确的启动屏幕的简单方法。假设我们正在设计 1280dp x 720dp - xhdpi(超大)屏幕。为了举例,我写了下面的内容;

  • 在 Photoshop 中:文件 -> 在新对话框窗口中新建设置屏幕

    宽度:720 像素 高度:1280 像素

    我猜上面的尺寸意味着分辨率是 320 像素/英寸。但要确保您可以在对话框窗口中将分辨率值更改为 320。在这种情况下像素/英寸 = DPI

    恭喜...您拥有 720dp x 1280dp 启动画面模板。

如何生成 9 块启动画面

After you designed your splash screen, if you want to design 9-Patch splash screen, you should insert 1 pixel gap for every side. For this reason you should increase +2 pixel your canvas size's width and height ( now your image sizes are 722 x 1282 ).

I've left the blank 1 pixel gap at every side as directed the below.
Changing the canvas size by using Photoshop:
- Open a splash screen png file in Photoshop
- Click onto the lock icon next to the 'Background' name in the Layers field (to leave blank instead of another color like white) if there is like the below:
enter image description here
- Change the canvas size from Image menu ( Width: 720 pixels to 722 pixels and Height: 1280 pixels to 1282 pixels). Now, should see 1 pixel gap at every side of the splash screen image.

Then you can use C:\Program Files (x86)\Android\android-studio\sdk\tools\draw9patch.bat to convert a 9-patch file. For that open your splash screen on draw9patch app. You should define your logo and expandable areas. Notice the black line the following example splash screen. The black line's thickness is just 1 px ;) Left and Top sides black lines define your splash screen's must display area. Exactly as your designed. Right and Bottom lines define the addable and removable area (automatically repeating areas).

只要这样做:在draw9patch应用程序上缩放图像的顶部边缘。单击并拖动鼠标来绘制线条。然后按 Shift + 单击并拖动鼠标以擦除线条。

如果您开发跨平台应用程序(如 Cordova/PhoneGap),您可以找到以下地址几乎所有移动操作系统启动屏幕尺寸。点击查看Windows 手机 https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes#windows-phone, WebOS https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes#webos, 黑莓 https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes#blackberry, Bada-WAC https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes#bada-wac and Bada https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes#bada启动画面尺寸。

https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes

如果您需要 IOS、Android 等应用程序图标大小,您可以访问这里 https://github.com/phonegap/phonegap/wiki/App-Icon-Sizes.

IOS

Format : PNG (recommended)

Dimensions

 - Tablet (iPad)
   - Non-Retina (1x)
     - Portrait: 768x1024px
     - Landscape: 1024x768px
   - Retina (2x)
     - Portrait: 1536x2048px
     - Landscape: 2048x1536px
 - Handheld (iPhone, iPod)
   - Non-Retina (1x)
     - Portrait: 320x480px
     - Landscape: 480x320px
   - Retina (2x)
     - Portrait: 640x960px
     - Landscape: 960x640px
 - iPhone 5 Retina (2x)
   - Portrait: 640x1136px
   - Landscape: 1136x640px
 - iPhone 6 (2x)
   - Portrait: 750x1334px
   - Landscape: 1334x750px
 - iPhone 6 Plus (3x)
   - Portrait: 1242x2208px
   - Landscape: 2208x1242px
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ldpi、mdpi、hdpi、xhdpi 显示的 Android 初始屏幕尺寸? - 例如:ldpi 为 1024X768 像素 的相关文章

随机推荐