source

Android 부팅 화면 이미지 크기가 모든 기기에 적합합니다.

lovecheck 2023. 8. 10. 18:55
반응형

Android 부팅 화면 이미지 크기가 모든 기기에 적합합니다.

스플래시 시 표시할 전체 화면 PNG가 있습니다.한 가지 , 저는 가능한폴더에 요.ldpi,mdpi,hdpi,그리고.xhdpi). 내은 모든 제 애플리케이션은 모든 전화기와 태블릿에서 훌륭하고 아름답게 실행될 것입니다.모든 화면에서 스플래시가 잘 표시되도록 어떤 크기(픽셀)를 만들어야 합니까?

부인

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

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

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

    • xlarge (xhdpi): 640x960
    • 라지 (hdpi): 480x800
    • 중(mdp): 320x480
    • 소(미니): 240x320
  • Android 개발자 가이드에서 9-patch 이미지 소개 읽기

  • 최종 결과를 손상시키지 않고 안전하게 확장할 수 있는 영역이 있는 이미지 설계

이를 통해 Android는 기기의 이미지 밀도에 적합한 파일을 선택한 다음 9-patch 표준에 따라 이미지를 확장합니다.

tl;dr 끝.전방에 만석

질문의 디자인 관련 부분에 대해 답변드립니다.저는 개발자가 아니기 때문에 제공되는 많은 솔루션을 구현하기 위한 코드를 제공할 수 없습니다.아아, 저의 의도는 제가 처음 안드로이드 앱 개발을 도왔을 때만큼 길을 잃은 디자이너들을 돕는 것입니다.

모든 크기에 맞춤

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

사용자가 시작 화면을 정말로 보고 싶으십니까?

(부차적으로, 스플래시 화면은 사용성이 떨어지는 사용자들 사이에서 다소 권장되지 않습니다.사용자가 어떤 앱을 두드렸는지 이미 알고 있고, '광고'로 사용자 경험을 방해할 뿐이므로 스플래시 화면으로 이미지를 브랜딩할 필요가 없다는 주장입니다.그러나 게임 등 초기화(5s 이상) 시 상당한 로딩이 필요한 애플리케이션에서 사용해야 하므로 사용자가 앱이 충돌했는지 여부를 궁금해하지 않습니다.

화면 밀도, 4개 클래스

그래서, 시장에 나와 있는 전화기들의 매우 다양한 화면 해상도를 고려할 때, 구글은 도움이 될 수 있는 몇 가지 대안과 멋진 해결책을 구현했습니다.가장 먼저 알아야 할 것은 Android가 모든 화면을 4가지 화면 밀도로 구분한다는 것입니다.

  1. 저밀도(ldpi ~ 120dpi)
  2. 중간 밀도(mdpi ~ 160dpi)
  3. 고밀도(hdpi ~ 240dpi)
  4. 초고밀도(xhdpi ~ 320dpi)(사용자 지정 제작 장치의 dpi 값은 다양하므로 이 dpi 값은 근사치임)

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

Android에서 사용되는 모든 해상도에 대해 화면을 설계하지 않으면 화면 크기에 맞게 이미지가 확장됩니다.그리고 여러분의 이미지가 기본적으로 그라데이션이나 흐림이 아닌 이상, 여러분은 스트레칭으로 인해 원치 않는 왜곡을 겪게 될 것입니다.따라서 기본적으로 두 가지 옵션이 있습니다. 각 화면 크기/밀도 조합에 대한 이미지를 만들거나 9-patch 이미지 4개를 만듭니다.

가장 어려운 해결책은 각 해상도에 대해 다른 시작 화면을 설계하는 것입니다.페이지 끝에 있는 표의 해상도를 따르는 것으로 시작할 수 있습니다.예: 960 x 720은 여기에 나열되어 있지 않습니다.이미지에 작은 텍스트와 같은 작은 세부 정보가 있다고 가정하면 각 해상도에 대해 두 개 이상의 화면을 설계해야 합니다.예를 들어 중간 화면에 표시되는 480x800 이미지는 정상으로 보이지만 더 작은 화면(밀도/dpi가 높은 경우)에서는 로고가 너무 작아지거나 일부 텍스트를 읽을 수 없게 될 수 있습니다.

9차원 이미지

다른 해결책은 9-patch 이미지를 만드는 것입니다.기본적으로 이미지 주위에는 1픽셀의 투명 테두리가 있으며, 이 테두리의 상단과 왼쪽 영역에 검은색 픽셀을 그려 이미지의 어느 부분을 확장할 수 있는지 정의할 수 있습니다.9-patch 이미지가 어떻게 작동하는지에 대한 자세한 설명은 하지 않겠습니다. 간단히 말해서, 위와 왼쪽 영역의 표시와 일치하는 픽셀은 이미지를 늘리기 위해 반복될 픽셀입니다.

몇 가지 기본 규칙

  1. 포토샵(또는 투명 png를 정확하게 만들 수 있는 모든 이미지 편집 소프트웨어)으로 이러한 이미지를 만들 수 있습니다.
  2. 1픽셀 테두리는 완전히 투명해야 합니다.
  3. 1픽셀의 투명 테두리는 위와 왼쪽뿐만 아니라 이미지 전체에 있어야 합니다.
  4. 이 영역에서는 검은색(#000000) 픽셀만 그릴 수 있습니다.
  5. 상단 및 왼쪽 테두리(이미지 확장을 정의함)에는 점 하나(1px x 1px), 점 두 개(모두 1px x 1px) 또는 연속선 하나(폭 x 1px 또는 높이 1px)만 있을 수 있습니다.
  6. 두 개의 점을 사용하도록 선택하면 영상이 비례적으로 확장됩니다(따라서 각 점은 최종 너비/높이에 도달할 때까지 교대로 확장됩니다).
  7. 1px 테두리는 원하는 기본 파일 치수에 추가해야 합니다.따라서 100x100 9-patch 이미지는 실제로 102x102(위, 아래, 왼쪽 및 오른쪽에 100x100 +1px)를 가져야 합니다.
  8. 9자리 영상은 *.9.png으로 끝나야 합니다.

따라서 로고 양쪽(위쪽 테두리)에 1개의 점을 배치하고 그 위와 아래(왼쪽 테두리)에 1개의 점을 배치하면 표시된 행과 열이 확장할 수 있는 유일한 픽셀이 됩니다.

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

9-patch image, 102x102px

다음은 동일한 이미지를 200% 확대한 것입니다.

the same image, magnified 2x for clarity

상단과 왼쪽에 있는 1px 표시가 확장할 행/열을 나타냅니다.

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

rendered into 100x100

다음은 460x140으로 확장할 경우의 결과입니다.

rendered into 460x140

마지막으로 고려해야 할 것이 있습니다.이러한 이미지는 모니터 화면과 대부분의 모바일에서 정상으로 보일 수 있지만 장치의 이미지 밀도(dpi)가 매우 높으면 이미지가 너무 작아 보입니다.여전히 읽을 수 있지만 1920x1200 해상도의 태블릿에서는 이미지가 가운데에 매우 작은 사각형으로 표시됩니다.그렇다면 해결책은 무엇일까요?각각 다른 밀도 세트에 대해 4개의 서로 다른 9-패치 런처 이미지를 설계합니다.수축이 발생하지 않도록 하려면 각 밀도 범주에 대해 가장 낮은 공통 해상도로 설계해야 합니다.9-patch는 확장만 설명하므로 축소는 바람직하지 않으므로 축소 프로세스에서 작은 텍스트 및 기타 요소가 읽을 수 없습니다.

다음은 각 밀도 범주에 대해 가장 작고 일반적인 분해능 목록입니다.

  • xlarge (xhdpi): 640x960
  • 라지 (hdpi): 480x800
  • 중(mdp): 320x480
  • 소(미니): 240x320

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

다시 말하지만, 이러한 확장이 발생하지 않는 유일한 방법은 각 해상도(또는 고밀도/저밀도 장치에서 이미지가 너무 작아지거나 커지는 것을 방지하려는 경우 각 해상도-밀도 조합에 대해 하나씩)의 화면을 설계하거나, 확장이 발생할 때마다 이미지가 늘어나지 않고 배경색이 나타나도록 지시하는 것입니다.Android 엔진에 의해 렌더링되는 특정 색상은 아마도 색상 프로필 때문에 포토샵에 의해 렌더링되는 동일한 특정 색상과 다르게 보일 것입니다.

이게 말이 됐기를 바랍니다.

세로 모드

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

LDPI는 0.75 x MDPI = 240x360µs입니다.

HDPI는 1.5 x MDPI = 480x720µs입니다.

XHDPI는 2 x MDPI = 640x960µs입니다.

XXHDPI는 3 x MDPI = 960x1440µs입니다.

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

가로 모드

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

LDPI는 0.75 x MDPI = 360x240µs입니다.

HDPI는 1.5 x MDPI = 720xpx입니다.

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

XXHDPI는 3 x MDPI = 1440x960µs입니다.

XXXHDPI는 4 x MDPI = 1920x1280µs입니다.

편집:

2019년에 이것을 읽고 있다면 스플래시 화면에 로티를 사용하는 것을 제안합니다.+

초상화

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

풍경.

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

저는 9 패치 이미지를 만드는 가장 좋은 방법과 가장 간단한 방법을 찾아보았습니다.이제 9개의 패치 이미지를 만드는 것이 가장 쉬운 작업입니다.

https://romannurik.github.io/AndroidAssetStudio/index.html 에서 클릭 한 번으로 XHDPI, HDPI, MDPI, LDPI 등 모든 해상도에 대한 9차원 이미지를 만들 수 있습니다.

PNG를 사용하는 것은 좋은 생각이 아닙니다.실제로 성능에 관한 한 비용이 많이 듭니다.Facebook의 배경과 같은 그리기 가능한 XML 파일을 사용할 수 있습니다.

이렇게 하면 성능이 매끄럽고 빨라지며 로고에는 .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

저의 경우 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 파일입니다.이것이 도움이 되길 바랍니다.

에 지원되는 .
.

말해서 그것은 을 크기(뿐만 아니라)로합니다.
https://developer.android.com/guide/practices/.htmlhttps ://developer.android.com/guide/practices/screens_support.html
부분이 .

링크 1: dimensions.xlsx

링크 2: dimensions.xlsx

API21~API23을 포함한 모든 API에서 스플래시스크린을 멋지게 보이게 하는 편집된 솔루션

API24+만 대상으로 하는 경우 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에서도 작동할 수 있도록 EDIT

위의 솔루션은 API24+를 실행하는 기기에서 작동하지만, 저는 API22를 실행하는 기기를 앱에 설치한 후에 정말 실망했습니다.저는 스플래시 스크린이 다시 전체 보기를 채우려 하고 쓰레기처럼 보인다는 것을 알아차렸습니다.반나절 동안 눈썹을 쥐어뜯은 후에, 저는 마침내 순전히 의지력으로 해결책을 무력하게 강요했습니다.

splashscreen xml(splash_screen.xml이라고 함)과 같은 이름의 두 번째 파일을 생성하고 res/폴더에 생성할 drawable-v22 및 drawable-v21이라고 하는 두 개의 폴더에 배치해야 합니다(프로젝트 뷰를 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>

these is how the folders look

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

my splashscreen

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

material.io 으로 이동합니다.

Lucas Cerro의 이 답변을 바탕으로 Android 문서의 비율을 사용하여 답변의 기준선을 사용하여 치수를 계산했습니다.이것이 다른 사람이 이 자리에 오는 데 도움이 되기를 바랍니다!

  • xxxlarge(xxxhdpi): 1280x1200(4.0x)
  • xxlarge(xxhdpi): 960x1440(3.0x)
  • xlarge(xhdpi): 640x960(2.0x)
  • 대형(hdpi): 480x800(1.5x)
  • 중간(ppmi): 320x1200(1.0x 기준선)
  • 소형(304i): 240x320(0.75x)

언급URL : https://stackoverflow.com/questions/10574363/android-splash-screen-image-sizes-to-fit-all-devices

반응형