phonegap을 사용하여 안드로이드 애플리케이션을위한 스플래시 화면 (로드 중 화면에 맞는 이미지)을 디자인해야합니다. 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" />
답변
안드로이드는 표준 크기가 설정되어 있지 않기 때문에 다양한 화면 크기가있을 수 있으므로 Google에서 제공하는 최소 화면 크기를 가이드로 사용할 수 있습니다.
Google의 통계에 따르면 대부분의 ldpi 디스플레이는 작은 화면이고 mdpi, hdpi, xhdpi 및 xxhdpi 디스플레이의 대부분은 보통 크기의 화면입니다.
- 초대형 화면은 최소 960dp x 720dp입니다.
- 큰 화면은 최소 640dp x 480dp입니다.
- 일반 화면은 최소 470dp x 320dp입니다.
- 작은 화면은 최소 426dp x 320dp입니다.
여기에서 사용할 수 있는 Google 대시 보드에서 기기의 상대적 크기에 대한 통계를 볼 수 있습니다 .
여러 화면에 대한 자세한 정보는 여기 에서 찾을 수 있습니다 .
9 패치 이미지
가장 좋은 해결책은 이미지의 정적 영역에 영향을주지 않고 이미지의 테두리가 화면 크기에 맞게 늘어나도록 나인 패치 이미지를 만드는 것입니다.
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
답변
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
답변
Android 모바일 장치의 경우
LDPI- icon-36×36, splash-426×320 (이제 올바른 값 사용)
MDPI- 아이콘 -48×48, 스플래시 -470×320
HDPI- 아이콘 72×72, 스플래시-640×480
XHDPI- 아이콘 -96×96, 스플래시-960×720
XXHDPI- 아이콘-144×144
모두 픽셀입니다.
Android 태블릿 장치의 경우
LDPI:
Portrait: 200x320px
Landscape: 320x200px
MDPI:
Portrait: 320x480px
Landscape: 480x320px
HDPI:
Portrait: 480x800px
Landscape: 800x480px
XHDPI:
Portrait: 720px1280px
Landscape: 1280x720px
답변
- LDPI : 세로 : 200 X 320px. 가로 : 320 X 200px.
- MDPI : 세로 : 320 X 480px. 가로 : 480 X 320px.
- HDPI : 세로 : 480 X 800px. 가로 : 800 X 480px.
- XHDPI : 세로 : 720 X 1280px. 가로 : 1280 X 720px.
- XXHDPI : 세로 : 960 X 1600px. 가로 : 1600 X 960px.
- XXXHDPI : 세로 : 1280 X 1920px. 가로 : 1920 X 1280px.
답변
- Xlarge 화면은 최소 960dp x 720dp입니다.
- 목록 항목 큰 화면은 최소 640dp x 480dp입니다.
- 목록 항목 일반 화면은 최소 470dp x 320dp입니다.
- 목록 항목 작은 화면은 최소 426dp x 320dp입니다.
이것을 사용하여 이미지를 만들고 특정 리소스 폴더에 넣습니다.
답변
이 웹 사이트를 사용하십시오 : http://ticons.fokkezb.nl 🙂
그것은 당신을 더 쉽게 만들고 올바른 크기를 직접 생성합니다.
답변
xlarge 화면은 최소 960dp x 720dp 레이아웃 -xlarge 10 인치 태블릿 (720×1280 mdpi, 800×1280 mdpi 등)입니다.
대형 화면은 최소 640dp x 480dp 트위너 태블릿 (예 : Streak (480×800 mdpi), 7 인치 태블릿 (600×1024 mdpi))입니다.
일반 화면은 최소 470dp x 320dp 레이아웃 일반 전화기 화면 (480×800 hdpi)입니다.
작은 화면은 최소 426dp x 320dp 일반 전화 화면 (240×320 ldpi, 320×480 mdpi 등)입니다.