스플래시로 표시하려는 전체 화면 PNG가 있습니다. 하나가 오류, 나는 모든 당김 폴더에 넣어 아무 생각 어떤 크기의이 없다 ( ldpi, mdpi, hdpi, 및 xhdpi). 내 응용 프로그램은 모든 휴대 전화와 태블릿에서 좋고 아름답게 실행되어야합니다. 스플래시가 모든 화면에 잘 표시되도록하려면 어떤 크기 (픽셀)를 만들어야합니까?

부인 성명

이 답변은 2013 년부터이며 심각하게 구식입니다. Android 3.2부터는 6 가지 화면 밀도 그룹이 있습니다. 이 답변은 가능한 한 빨리 업데이트되지만 ETA는 없습니다. 현재 모든 밀도에 대한 공식 문서 를 참조하십시오 (특정 픽셀 크기에 대한 정보는 항상 찾기 어렵지만).

여기에 tl / dr 버전이 있습니다

• 각 화면 밀도마다 하나씩 4 개의 이미지를 만듭니다.

  • xlarge (xhdpi) : 640x960
  • 큰 (hdpi) : 480x800
  • 중간 (mdpi) : 320x480
  • 작은 (ldpi) : 240x320

• Android 개발자 안내서에서 9 패치 이미지 소개 읽기

• 최종 결과를 손상시키지 않으면 서 안전하게 늘일 수있는 영역이있는 이미지 디자인

이를 통해 Android는 기기의 이미지 밀도에 적합한 파일을 선택한 다음 9 패치 표준에 따라 이미지를 늘립니다.

tl의 끝; 박사. 전체 게시물 앞서

질문의 디자인 관련 측면에서 대답하고 있습니다. 저는 개발자가 아니므로 제공된 많은 솔루션을 구현하기위한 코드를 제공 할 수 없습니다. 아아, 내 의도는 내가 처음 Android 앱을 개발할 때 내가 잃어버린 디자이너를 돕는 것입니다.

모든 크기의 피팅

Android를 사용하면 회사는 거의 모든 크기의 휴대 전화와 테이블을 원하는 해상도로 개발할 수 있습니다. 이 때문에 고정 화면 해상도가 없기 때문에 스플래시 화면에 대한 "올바른 이미지 크기"는 없습니다. 스플래시 화면을 구현하려는 사람들에게는 문제가됩니다.

사용자가 실제로 스플래시 화면을보고 싶습니까?

참고로 스플래시 화면은 유용성 사용자들 사이에서 다소 낙담되어 있습니다. 사용자는 이미 탭한 앱을 알고 있으며 스플래시 화면으로 이미지를 브랜딩하는 것은 사용자 경험을 방해하기 때문에 필요하지 않습니다. 그러나 게임 등을 포함하여 초기화 될 때 (5s +) 상당한로드가 필요한 응용 프로그램에서 사용해야하므로 사용자가 응용 프로그램이 충돌했는지 궁금해하지 않아야합니다.

스크린 밀도; 4 교시

따라서 시중에서 판매되는 휴대 전화의 화면 해상도가 매우 다양하기 때문에 Google은 몇 가지 대안과 유용한 솔루션을 구현했습니다. 알아야 할 첫 번째 사항은 Android가 모든 화면을 4 개의 개별 화면 밀도로 분리한다는 것입니다 .

1. 저밀도 (ldpi ~ 120dpi)
2. 중간 밀도 (mdpi ~ 160dpi)
3. 고밀도 (hdpi ~ 240dpi)
4. 초 고밀도 (xhdpi ~ 320dpi)

당신이 (디자이너라면) 알아야 할 것은 안드로이드가 기본적으로 장치에 따라 표시 할 4 개의 이미지 중에서 선택한다는 것입니다. 따라서 기본적으로 4 개의 서로 다른 이미지를 디자인해야합니다 (와이드 스크린, 가로 / 세로 모드 등과 같은 다른 형식으로 더 많이 개발할 수 있음)

Android에서 사용되는 모든 단일 해상도에 대해 화면을 디자인하지 않으면 이미지가 화면 크기에 맞게 늘어납니다. 또한 이미지가 기본적으로 그라디언트 또는 흐림이 아닌 경우 스트레칭으로 인해 원치 않는 왜곡이 발생합니다. 따라서 기본적으로 두 가지 옵션이 있습니다. 각 화면 크기 / 밀도 조합에 대한 이미지를 만들거나 4 개의 9 패치 이미지를 만듭니다.

가장 어려운 해결책은 모든 단일 해상도에 대해 서로 다른 시작 화면을 디자인하는 것입니다. 이 페이지 의 끝에있는 표의 해상도를 따라 시작할 수 있습니다 (더 많은 것이 있습니다. 예 : 960 x 720이 표시되지 않음). 작은 텍스트와 같이 이미지에 작은 세부 묘사가 있다고 가정하면 각 해상도에 대해 둘 이상의 화면을 디자인해야합니다. 예를 들어, 중간 화면에 표시되는 480x800 이미지는 괜찮아 보이지만 작은 화면 (높은 밀도 / dpi)에서는 로고가 너무 작아 지거나 일부 텍스트를 읽을 수 없게 될 수 있습니다.

9 패치 이미지

다른 해결책은 9 패치 이미지 를 만드는 것 입니다. 기본적으로 이미지 주위의 1 픽셀 투명 테두리이며이 테두리의 위쪽과 왼쪽 영역에 검은 색 픽셀을 그려 이미지의 어느 부분을 늘릴 수 있는지 정의 할 수 있습니다. 9 패치 이미지의 작동 방식에 대한 자세한 내용은 다루지 않겠지 만 상단 및 왼쪽 영역의 표시와 일치하는 픽셀은 이미지를 늘리기 위해 반복되는 픽셀입니다.

몇 가지 기본 규칙

1. 이 이미지를 Photoshop (또는 투명 PNG를 정확하게 만들 수있는 이미지 편집 소프트웨어)에서 만들 수 있습니다.
2. 1 픽셀 테두리는 FULL TRANSPARENT 여야합니다.
3. 1 픽셀 투명 테두리는 위쪽과 왼쪽 만이 아니라 이미지 주위에 있어야합니다.
4. 이 영역에는 검은 색 (# 000000) 픽셀 만 그릴 수 있습니다.
5. 이미지 확장을 정의하는 위쪽 및 왼쪽 테두리에는 1 개의 점 (1px x 1px), 2 개의 점 (1px x 1px) 또는 1 개의 연속 선 (너비 x 1px 또는 1px x 높이) 만있을 수 있습니다.
6. 2 개의 점을 사용하도록 선택하면 이미지가 비례 적으로 확대됩니다 (따라서 최종 폭 / 높이에 도달 할 때까지 각 점이 회전합니다)
7. 1px 테두리는 기본 파일 크기에 추가되어야합니다. 따라서 100x100 9 패치 이미지에는 실제로 102x102가 있어야합니다 (상단, 하단, 왼쪽 및 오른쪽에 100x100 + 1px)
8. 9 패치 이미지는 * .9.png로 끝나야합니다.

따라서 로고의 양쪽 (상단 테두리)에 1 개의 점을 배치 할 수 있고 위 및 아래에 1 개의 점 (왼쪽 경계에있는)을 표시 할 수 있으며이 표시된 행과 열은 늘릴 수있는 유일한 픽셀이됩니다.

예

다음은 9 패치 이미지, 102x102px (앱 목적으로 100x100 최종 크기)입니다.

동일한 이미지의 200 % 확대 / 축소는 다음과 같습니다.

어떤 행 / 열이 확장 될 것인지를 나타내는 상단 및 왼쪽의 1px 표시를 확인하십시오.

이 이미지는 앱 내부의 100x100에서 다음과 같이 표시됩니다.

460x140으로 확장하면 다음과 같이됩니다.

마지막으로 고려해야 할 사항. 이러한 이미지는 모니터 화면과 대부분의 모바일에서 잘 보일 수 있지만 장치의 이미지 밀도 (dpi)가 너무 높으면 이미지가 너무 작아 보입니다. 여전히 읽을 수 있지만 1920x1200 해상도의 태블릿에서는 이미지가 중간에 매우 작은 사각형으로 나타납니다. 그래서 해결책은 무엇입니까? 각각 다른 밀도 세트에 대해 4 가지 9 패치 런처 이미지를 디자인하십시오. 수축이 발생하지 않도록하려면 각 밀도 범주에 대해 가장 낮은 공통 해상도로 설계해야합니다. 여기서 9- 패치는 스트레칭 만 설명하므로 축소는 바람직하지 않으므로 축소 과정에서 작은 텍스트 및 기타 요소는 가독성을 잃을 수 있습니다.

각 밀도 범주에 대한 가장 작고 가장 일반적인 해상도 목록은 다음과 같습니다.

• xlarge (xhdpi) : 640x960
• 큰 (hdpi) : 480x800
• 중간 (mdpi) : 320x480
• 작은 (ldpi) : 240x320

따라서 위의 해상도로 4 개의 스플래시 화면을 디자인하고 이미지를 확장하여 캔버스 주위에 1px 투명 테두리를 놓고 어떤 행 / 열을 늘릴 수 있는지 표시하십시오. 이 이미지는 밀도 범주의 모든 장치에 사용 되므로 이미지 밀도가 작은 (~ 120dpi) 초대형 태블릿에서 ldpi 이미지 (240 x 320)가 1024x600으로 늘어날 수 있습니다. 따라서 스플래시 화면을위한 사진이나 복잡한 그래픽을 원하지 않는 한 9 패치는 스트레칭에 가장 적합한 솔루션입니다 (디자인을 만들 때 이러한 제한 사항에 유의하십시오).

다시 말하지만,이 스트레칭이 발생하지 않는 유일한 방법은 각 해상도마다 하나의 화면을 디자인하거나 (고밀도 / 저밀도 장치에서 이미지가 너무 작거나 커지는 것을 방지하려는 경우 각 해상도 밀도 조합에 대해 하나씩) 또는 이미지가 늘어나지 않고 배경색이 늘어나는 위치에 나타납니다 (Android 엔진에서 렌더링 한 특정 색상은 색상 프로파일로 인해 Photoshop에서 렌더링 한 동일한 색상과 다르게 보일 수 있음을 기억하십시오).

나는 이것이 의미가 있기를 바랍니다. 행운을 빕니다!

인물 모드

MDPI는 320x480dp = 320x480px (1x)입니다.

LDPI는 0.75 x MDPI = 240x360px입니다.

HDPI는 1.5 x MDPI = 480x720px입니다.

XHDPI는 2 x MDPI = 640x960px입니다.

XXHDPI는 3 x MDPI = 960x1440px입니다.

XXXHDPI는 4 x MDPI = 1280x1920px입니다.

풍경 모드

MDPI는 480x320dp = 480x320px (1x)입니다.

LDPI는 0.75 x MDPI = 360x240px입니다.

HDPI는 1.5 x MDPI = 720x480 픽셀입니다.

XHDPI는 2 x MDPI = 960x640px입니다.

XXHDPI는 3 x MDPI = 1440x960px입니다.

XXXHDPI는 4 x MDPI = 1920x1280px입니다.

편집하다:

2019 이상에서 이것을 읽으면 스플래시 화면에 Lottie 를 사용하는 것이 좋습니다

초상화

LDPI : 200x320 픽셀

MDPI : 320x480 픽셀

HDPI : 480x800 픽셀

XHDPI : 720px1280px

경치

LDPI : 320x200 픽셀

MDPI : 480x320 픽셀

HDPI : 800x480 픽셀

XHDPI : 1280x720px

나는 9 패치 이미지를 만들기 위해 가장 좋고 가장 간단한 답변을 검색했습니다. 이제 9 패치 이미지를 만드는 것이 가장 쉬운 작업입니다.

에서 https://romannurik.github.io/AndroidAssetStudio/index.html 한 번의 클릭 XHDPI, HDPI, MDPI, LDPI - 당신은 모든 해상도 9 패치 이미지를 만들 수 있습니다.

PNG를 사용하는 것은 좋은 생각이 아닙니다. 실제로 성능에 관한 한 비용이 많이 듭니다. Drawable XML 파일 (예 : Facebook의 background) 을 사용할 수 있습니다 .

이렇게하면 성능을 부드럽게하고 속도를 높이고 로고를 사용하여 .9 패치 이미지를 사용할 수 있습니다.

Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi

얼마 전에 지원되는 크기의 Excel 파일을 만들었습니다.
이것이 누군가에게 도움이되기를 바랍니다.

솔직히 말하면 아이디어를 잃어 버렸지 만 다른 화면 기능을 크기 (밀도뿐만 아니라)로 나타냅니다.
https://developer.android.com/guide/practices/screens_support.html
실수가 있으면 알려주십시오

Link1 : 치수 .xlsx

Link2 : 치수 .xlsx

필자의 경우 style.xml에서 list drawable을 사용했습니다. 레이어리스트 드로어 블을 사용하면 모든 화면 크기에 대해 하나의 png가 필요합니다.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

드로어 블 폴더의 flash_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

"background_noizi"는 드로어 블 폴더에있는 png 파일입니다. 이게 도움이 되길 바란다.

** 모든 종류의 주요 장치에 대한 화면 세부 정보를 찾고 있다면 **

material.io로 이동

API21에서 API23을 포함한 모든 API에서 SplashScreen을 멋지게 보이도록 편집 된 솔루션

API를 24+로만 타겟팅하는 경우 다음과 같이 xml 파일에서 벡터 드로어 블을 직접 축소 할 수 있습니다.

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

위의 코드에서 640x640 캔버스에 그린 드로어 블의 크기를 240x240으로 조정하고 있습니다. 그런 다음 스플래시 화면 드로어 블에 넣습니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

내 코드는 실제로 맨 아래 그림의 삼각형 만 그리는 것입니다. 그러나 여기서 당신은 이것으로 달성 할 수있는 것을 볼 수 있습니다. 비트 맵을 사용할 때 얻은 픽셀 화 된 가장자리와 달리 해상도는 마침내 우수합니다. 따라서 벡터 드로어 블을 사용하십시오 (특별한 소프트웨어를 다운로드하지 않고도 vectr라는 사이트를 만들었습니다).

API21-22-23에서도 작동하도록 편집하십시오.

위의 솔루션은 API24 +를 실행하는 기기에서 작동하지만 API22를 실행하는 기기에 앱을 설치 한 후 정말 실망했습니다. 스플래시 화면이 다시 전체보기를 채우려 고 노력하고 똥처럼 보입니다. 반나절 동안 내 눈썹을 찢어 버린 후 마침내 의지력으로 솔루션을 무차별 대입했습니다.

splashscreen xml (splash_screen.xml이라고 함)과 같은 이름의 두 번째 파일을 작성하여 res / 폴더에 만들 drawable-v22 및 drawable-v21이라는 2 개의 폴더에 배치해야합니다. 프로젝트보기를 Android에서 Project로 변경해야합니다). 관련 장치가 드로어 블 폴더의 -vXX 접미사에 해당하는 API를 실행할 때마다 해당 폴더에있는 파일로 리디렉션하도록 휴대 전화에 지시합니다 ( 이 링크 참조) . 이 폴더에 만든 splash_screen.xml 파일의 레이어 목록에 다음 코드를 배치하십시오.

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

이러한 API에 대한 어떤 이유로 드로어 블을 비트 맵으로 감싸서 작동하게하고 최종 결과를 동일하게 보이도록해야합니다. 문제는 splash_screen.xml 파일의 두 번째 버전이 23보다 높은 API를 실행하는 장치에서 스플래시 화면이 전혀 표시되지 않으므로 추가 드로어 블 폴더와 함께 aproach를 사용해야한다는 것입니다. 또한 배치해야 할 수도 있습니다 android로 drawable-v24에 splash_screen.xml의 첫 번째 버전은 리소스에서 찾을 수있는 가장 가까운 drawable-vXX 폴더를 기본값으로합니다. 도움이 되었기를 바랍니다

Lucas Cerro 의이 답변을 기반으로 답변 의 기준선을 사용하여 Android 문서 의 비율을 사용하여 크기를 계산했습니다 . 다른 사람이이 게시물에 올 수 있도록 도와주세요.

• xxxlarge (xxxhdpi) : 1280x1920 (4.0x)
• xxlarge (xxhdpi) : 960x1440 (3.0x)
• xlarge (xhdpi) : 640x960 (2.0x)
• 큰 (hdpi) : 480x800 (1.5x)
• 중간 (mdpi) : 320x480 (1.0x 기준)
• 작은 (ldpi) : 240x320 (0.75x)