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
참고 : XXXHDPI 준비는 필요하지 않으며 9 패치 이미지의 반복 영역 때문에 XXHDPI 크기도 준비 할 수 있습니다. 반면에 세로 크기 만 사용하면 앱 크기가 더 작을 수 있습니다. 더 많은 사진은 더 많은 공간이 필요함을 의미합니다.
주의
모든 기기의 정확한 크기는 없다고 생각합니다. 저는 Xperia Z 5 "를 사용합니다. 크로스 플랫폼 웹뷰 앱을 개발한다면 많은 것을 고려해야합니다 (화면에 소프트 키 탐색 버튼이 있는지 여부 등). 따라서 적절한 솔루션은 하나 뿐이라고 생각합니다. 해결책은 다음 과 같습니다. 9 패치 스플래시 화면을 준비합니다 ( How to design a new splash screen아래 제목 찾기 ).
- 위의 화면 크기에 대한 스플래시 화면을 9-patch로 만듭니다. .9.png 접미사로 파일 이름 지정
- config.xml 파일에 아래 행을 추가하십시오.
- 필요한 경우 스플래시 화면 플러그인을 추가하십시오.
- 프로젝트를 실행하십시오.
그게 다야!
Cordova 특정 코드
9 패치 스플래시 화면을 위해 config.xml에 행 추가
<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>
-9 패치가 아닌 스플래시 화면을 사용할 때 config.xml에 줄을 추가하려면
<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 (x-large) 화면을 설계한다고 가정합니다. 예를 들어 아래에 작성했습니다.
Photoshop에서 : 파일-> 새 대화 상자 창에서 화면 설정
너비 : 720 픽셀 높이 : 1280 픽셀
위의 크기는 해상도가 320 픽셀 / 인치임을 의미합니다. 그러나 대화 창에서 해상도 값을 320으로 변경할 수 있는지 확인하십시오. 이 경우에 Pixels / Inch = DPI
축하합니다 ... 720dp x 1280dp 스플래시 화면 템플릿이 있습니다.
9 패치 스플래시 화면을 생성하는 방법
스플래시 화면을 디자인 한 후 9 패치 스플래시 화면을 디자인하려면 모든면에 1 픽셀 간격을 삽입해야합니다. 따라서 캔버스 크기의 너비와 높이를 +2 픽셀로 늘려야합니다 (이제 이미지 크기는 722 x 1282).
아래의 지시에 따라 모든면에 공백 1 픽셀 간격을 두었습니다.
Photoshop을 사용하여 캔버스 크기 변경 :
-Photoshop에서 스플래시 화면 png 파일을 엽니 다
.-레이어 필드의 '배경'이름 옆에있는 잠금 아이콘을 클릭합니다. 아래 : -이미지 메뉴에서 캔버스 크기를 변경합니다 (너비 : 720 픽셀에서 722 픽셀, 높이 : 1280 픽셀에서 1282 픽셀). 이제 스플래시 화면 이미지의 모든면에 1 픽셀 간격이 표시되어야합니다.
그런 다음 C : \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat를 사용하여 9 패치 파일을 변환 할 수 있습니다. 이를 위해 draw9patch 앱에서 시작 화면을 엽니 다. 로고와 확장 가능한 영역을 정의해야합니다. 다음 예제 스플래시 화면의 검은 색 선을 확인하십시오. 검은 선의 두께는 1px입니다.) 왼쪽 및 위쪽 검은 선은 스플래시 화면의 필수 표시 영역을 정의합니다. 정확히 당신이 디자인 한대로. 오른쪽 및 아래쪽 선은 추가 및 제거 가능한 영역 (자동으로 반복되는 영역)을 정의합니다.
그냥
하세요 : draw9patch 애플리케이션에서 이미지의 상단 가장자리를 확대하세요. 마우스를 클릭하고 드래그하여 선을 그립니다. 그리고 Shift + 클릭하고 마우스를 드래그하여 선을 지 웁니다.
크로스 플랫폼 앱 (예 : Cordova / PhoneGap)을 개발하는 경우 거의 모든 mabile OS 스플래시 화면 크기에서 다음 주소를 찾을 수 있습니다. Windows Phone , WebOS , BlackBerry , Bada-WAC 및 Bada 시작 화면 크기를 보려면 클릭하십시오 .
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
IOS, Android 등 앱 아이콘 크기가 필요한 경우 여기 를 방문하세요 .
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