태그 보관물: pixel-density

pixel-density

ldpi, mdpi, hdpi, xhdpi 디스플레이의 안드로이드 스플래시 화면 크기? -예 : ldpi의 경우 1024X768 픽셀 가지 크기의 이미지를 디자인해야합니다.

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아래 제목 찾기 ).

  1. 위의 화면 크기에 대한 스플래시 화면을 9-patch로 만듭니다. .9.png 접미사로 파일 이름 지정
  2. config.xml 파일에 아래 행을 추가하십시오.
  3. 필요한 경우 스플래시 화면 플러그인을 추가하십시오.
  4. 프로젝트를 실행하십시오.

그게 다야!

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 + 클릭하고 마우스를 드래그하여 선을 지 웁니다.

9 패치 디자인 샘플

크로스 플랫폼 앱 (예 : 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 등)입니다.