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
标题如下)。
- 为上述屏幕尺寸创建启动屏幕,如下所示9-patch。给你的文件命名.9.png后缀
- 将以下行添加到您的 config.xml 文件中
- 如果需要,添加启动屏幕插件。
- 运行您的项目。
就是这样!
科尔多瓦特定代码
将行添加到 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:
- 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