Tôi có một PNG toàn màn hình tôi muốn hiển thị trên giật gân. Chỉ có một lỗi đó, và tôi không có ý tưởng những gì kích thước để đưa vào tất cả các thư mục drawable ( ldpi, mdpi, hdpi, và xhdpi). Ứng dụng của tôi được cho là chạy tốt và đẹp trên tất cả các điện thoại và máy tính bảng. Tôi nên tạo kích thước nào (tính bằng pixel) để màn hình hiển thị đẹp trên tất cả các màn hình?

Khước từ

Câu trả lời này là từ năm 2013 và đã lỗi thời nghiêm trọng. Tính đến Android 3.2, hiện có 6 nhóm mật độ màn hình. Câu trả lời này sẽ được cập nhật ngay khi tôi có thể, nhưng không có ETA. Tham khảo tài liệu chính thức cho tất cả các mật độ tại thời điểm này (mặc dù thông tin về kích thước pixel cụ thể luôn luôn khó tìm).

Đây là phiên bản tl / dr

• Tạo 4 hình ảnh, một cho mỗi mật độ màn hình:

  • xlund (xhdpi): 640x960
  • lớn (hdpi): 480x800
  • trung bình (mdpi): 320x480
  • nhỏ (ldpi): 240x320

• Đọc phần giới thiệu hình ảnh 9 bản vá trong Hướng dẫn dành cho nhà phát triển Android

• Thiết kế hình ảnh có các khu vực có thể được kéo dài một cách an toàn mà không ảnh hưởng đến kết quả cuối cùng

Với điều này, Android sẽ chọn tệp thích hợp cho mật độ hình ảnh của thiết bị, sau đó nó sẽ kéo dài hình ảnh theo tiêu chuẩn 9 miếng.

cuối tl; dr. Toàn bài trước

Tôi đang trả lời về khía cạnh liên quan đến thiết kế của câu hỏi. Tôi không phải là nhà phát triển, vì vậy tôi sẽ không thể cung cấp mã để triển khai nhiều giải pháp được cung cấp. Than ôi, ý định của tôi là giúp các nhà thiết kế bị mất như tôi khi tôi giúp phát triển Ứng dụng Android đầu tiên của mình.

Lắp tất cả các kích cỡ

Với Android, các công ty có thể phát triển điện thoại di động và bảng có kích thước gần như bất kỳ, với hầu hết mọi độ phân giải họ muốn. Do đó, không có "kích thước hình ảnh phù hợp" cho màn hình giật gân, vì không có độ phân giải màn hình cố định. Điều đó đặt ra một vấn đề cho những người muốn thực hiện một màn hình giật gân.

Người dùng của bạn thực sự muốn xem một màn hình giật gân?

(Một lưu ý nữa, màn hình giật gân có phần không được khuyến khích trong số những người sử dụng được. Người ta cho rằng người dùng đã biết ứng dụng nào anh ta gõ vào và việc gắn nhãn hiệu của bạn với màn hình giật gân là không cần thiết, vì nó chỉ làm gián đoạn trải nghiệm của người dùng một "quảng cáo". Tuy nhiên, nó nên được sử dụng trong các ứng dụng yêu cầu tải đáng kể khi khởi tạo (5s +), bao gồm các trò chơi và như vậy, để người dùng không bị băn khoăn liệu ứng dụng có bị lỗi hay không)

Mật độ màn hình; 4 lớp

Vì vậy, với rất nhiều độ phân giải màn hình khác nhau trên điện thoại trên thị trường, Google đã triển khai một số giải pháp thay thế và tiện lợi có thể giúp ích. Điều đầu tiên bạn phải biết là Android tách TẤT CẢ màn hình thành 4 mật độ màn hình riêng biệt:

1. Mật độ thấp (ldpi ~ 120dpi)
2. Mật độ trung bình (mdpi ~ 160dpi)
3. Mật độ cao (hdpi ~ 240dpi)
4. Mật độ cực cao (xhdpi ~ 320dpi) (Các giá trị dpi này là xấp xỉ, vì các thiết bị được chế tạo tùy chỉnh sẽ có các giá trị dpi khác nhau)

Điều bạn (nếu bạn là nhà thiết kế) cần biết từ đây là về cơ bản Android sẽ chọn từ 4 hình ảnh để hiển thị, tùy thuộc vào thiết bị. Vì vậy, về cơ bản, bạn phải thiết kế 4 hình ảnh khác nhau (mặc dù có thể phát triển nhiều hơn cho các định dạng khác nhau như màn hình rộng, chế độ dọc / ngang, v.v.).

Với ý nghĩ đó, hãy biết điều này: trừ khi bạn thiết kế một màn hình cho mọi độ phân giải được sử dụng trong Android, hình ảnh của bạn sẽ kéo dài để phù hợp với kích thước màn hình. Và trừ khi hình ảnh của bạn về cơ bản là độ dốc hoặc mờ, bạn sẽ nhận được một số biến dạng không mong muốn với việc kéo dài. Vì vậy, về cơ bản bạn có hai tùy chọn: tạo một hình ảnh cho mỗi kết hợp kích thước / mật độ màn hình hoặc tạo bốn hình ảnh 9 miếng vá.

Giải pháp khó nhất là thiết kế một màn hình giật gân khác nhau cho mỗi độ phân giải. Bạn có thể bắt đầu bằng cách làm theo các độ phân giải trong bảng ở cuối trang này (có nhiều hơn. Ví dụ: 960 x 720 không được liệt kê ở đó). Và giả sử bạn có một số chi tiết nhỏ trong hình ảnh, chẳng hạn như văn bản nhỏ, bạn phải thiết kế nhiều hơn một màn hình cho mỗi độ phân giải. Ví dụ: hình ảnh 480x800 được hiển thị ở màn hình trung bình có thể trông ổn, nhưng trên màn hình nhỏ hơn (với mật độ / dpi cao hơn), logo có thể trở nên quá nhỏ hoặc một số văn bản có thể không đọc được.

Hình ảnh 9 miếng

Giải pháp khác là tạo một hình ảnh 9 miếng . Về cơ bản, nó là đường viền trong suốt 1 pixel xung quanh hình ảnh của bạn và bằng cách vẽ các pixel màu đen ở khu vực trên cùng và bên trái của đường viền này, bạn có thể xác định phần nào của hình ảnh sẽ được phép kéo dài. Tôi sẽ không đi vào chi tiết về cách hoạt động của hình ảnh 9 miếng, nhưng nói ngắn gọn, các pixel thẳng hàng với các điểm đánh dấu ở khu vực trên cùng và bên trái là các pixel sẽ được lặp lại để kéo dài hình ảnh.

Một vài quy tắc nền tảng

1. Bạn có thể tạo những hình ảnh này trong photoshop (hoặc bất kỳ phần mềm chỉnh sửa hình ảnh nào có thể tạo chính xác các png trong suốt).
2. Đường viền 1 pixel phải là FULL TRANSPARENT.
3. Đường viền trong suốt 1 pixel phải ở xung quanh hình ảnh của bạn, không chỉ trên cùng và bên trái.
4. bạn chỉ có thể vẽ các pixel màu đen (# 000000) trong khu vực này.
5. Đường viền trên và bên trái (xác định độ giãn của hình ảnh) chỉ có thể có một dấu chấm (1px x 1px), hai dấu chấm (cả 1px x 1px) hoặc ONE dòng liên tục (chiều rộng x 1px hoặc 1px x height).
6. Nếu bạn chọn sử dụng 2 dấu chấm, hình ảnh sẽ được mở rộng theo tỷ lệ (vì vậy mỗi dấu chấm sẽ lần lượt mở rộng cho đến khi đạt được chiều rộng / chiều cao cuối cùng)
7. Đường viền 1px phải được thêm vào kích thước tệp cơ sở dự định. Vì vậy, một hình ảnh 9 miếng 100x100 phải thực sự có 102x102 (100x100 + 1px ở trên, dưới, trái và phải)
8. Hình ảnh 9 bản vá phải kết thúc bằng * .9.png

Vì vậy, bạn có thể đặt 1 chấm ở hai bên logo của mình (ở viền trên cùng) và 1 chấm ở trên và dưới nó (ở viền bên trái), và các hàng và cột được đánh dấu này sẽ là các pixel duy nhất để kéo dài.

Thí dụ

Đây là hình ảnh 9 miếng, 102x102px (kích thước cuối cùng 100x100, cho mục đích ứng dụng):

Đây là mức phóng to 200% của cùng một hình ảnh:

Lưu ý các dấu 1px ở trên cùng và bên trái cho biết hàng / cột nào sẽ mở rộng.

Đây là hình ảnh này trông như thế nào trong 100x100 bên trong ứng dụng:

Và đây là những gì nó muốn nếu được mở rộng lên 460x140:

Một điều cuối cùng cần xem xét. Những hình ảnh này có thể trông ổn trên màn hình màn hình của bạn và trên hầu hết các thiết bị di động, nhưng nếu thiết bị có mật độ hình ảnh rất cao (dpi), hình ảnh sẽ trông quá nhỏ. Có lẽ vẫn còn rõ ràng, nhưng trên một máy tính bảng có độ phân giải 1920x1200, hình ảnh sẽ xuất hiện dưới dạng một hình vuông rất nhỏ ở giữa. Vậy giải pháp là gì? Thiết kế 4 hình ảnh launcher 9 miếng khác nhau, mỗi hình cho một bộ mật độ khác nhau. Để đảm bảo rằng không xảy ra hiện tượng thu hẹp, bạn nên thiết kế ở độ phân giải chung thấp nhất cho từng loại mật độ. Thu hẹp là không mong muốn ở đây vì 9 bản vá chỉ chiếm phần kéo dài, do đó, trong một quy trình thu nhỏ văn bản nhỏ và các yếu tố khác có thể mất tính dễ đọc.

Dưới đây là danh sách các độ phân giải nhỏ nhất, phổ biến nhất cho từng loại mật độ:

• xlund (xhdpi): 640x960
• lớn (hdpi): 480x800
• trung bình (mdpi): 320x480
• nhỏ (ldpi): 240x320

Vì vậy, thiết kế bốn màn hình giật gân ở các độ phân giải ở trên, mở rộng hình ảnh, đặt đường viền trong suốt 1px xung quanh khung vẽ và đánh dấu các hàng / cột nào sẽ có thể kéo dài. Hãy nhớ rằng những hình ảnh này sẽ được sử dụng cho thiết bị BẤT K in trong danh mục mật độ, vì vậy hình ảnh ldpi của bạn (240 x 320) có thể được kéo dài thành 1024x600 trên một máy tính bảng lớn hơn với mật độ hình ảnh nhỏ (~ 120 dpi). Vì vậy, 9-patch là giải pháp tốt nhất cho việc kéo dài, miễn là bạn không muốn có một bức ảnh hoặc đồ họa phức tạp cho màn hình giật gân (hãy ghi nhớ những hạn chế này khi bạn tạo thiết kế).

Một lần nữa, cách duy nhất để kéo dài này không xảy ra là thiết kế một màn hình cho mỗi độ phân giải (hoặc một màn hình cho mỗi kết hợp mật độ phân giải, nếu bạn muốn tránh hình ảnh trở nên quá nhỏ / lớn trên các thiết bị có mật độ cao / thấp) hoặc nói hình ảnh không bị giãn và có màu nền xuất hiện ở bất cứ nơi nào có thể kéo dài (cũng nên nhớ rằng một màu cụ thể được hiển thị bởi công cụ Android có thể sẽ trông khác với cùng màu được hiển thị bởi photoshop, vì cấu hình màu).

Tôi hy vọng điều này có ý nghĩa. Chúc may mắn!

CHẾ ĐỘ CHÂN DUNG

MDPI là 320x480 dp = 320x480px (1x)

LDPI là 0,75 x MDPI = 240x360px

HDPI là 1,5 x MDPI = 480x720px

XHDPI là 2 x MDPI = 640x960px

XXHDPI là 3 x MDPI = 960x1440px

XXXHDPI là 4 x MDPI = 1280x1920px

CHẾ ĐỘ PHONG CẢNH

MDPI là 480x320 dp = 480x320px (1x)

LDPI là 0,75 x MDPI = 360x240px

HDPI là 1,5 x MDPI = 720x480px

XHDPI là 2 x MDPI = 960x640px

XXHDPI là 3 x MDPI = 1440x960px

XXXHDPI là 4 x MDPI = 1920x1280px

BIÊN TẬP:

Tôi sẽ đề nghị sử dụng Lottie cho màn hình giật gân nếu bạn đang đọc bài này vào năm 2019+

CHÂN DUNG

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

PHONG CẢNH

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

Tôi đã tìm kiếm câu trả lời tốt nhất và đơn giản nhất để tạo ra hình ảnh 9 miếng. Bây giờ để làm cho hình ảnh 9 bản vá là nhiệm vụ dễ dàng nhất.

Từ https://romannurik.github.io/AndroidAssetStudio/index.html bạn có thể tạo một hình ảnh 9 miếng cho tất cả các độ phân giải - XHDPI, HDPI, MDPI, LDPI chỉ bằng một cú nhấp chuột.

Sử dụng PNG không phải là một ý tưởng tốt. Trên thực tế, nó rất tốn kém khi có liên quan đến hiệu suất. Bạn có thể sử dụng các tệp XML có thể vẽ được, ví dụ: nền của Facebook .

Điều này sẽ giúp bạn làm mượt và tăng tốc hiệu suất của bạn và đối với logo sử dụng .9 hình ảnh vá.

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

Cách đây một thời gian, tôi đã tạo một tệp excel với kích thước được hỗ trợ
Hy vọng điều này sẽ hữu ích cho ai đó

Thành thật mà nói tôi đã mất ý tưởng, nhưng nó đề cập đến một tính năng màn hình khác là kích thước (không chỉ mật độ)
https://developer.android.com/guide/practices/sc Greens_support.html
Vui lòng thông báo cho tôi nếu có một số sai lầm

Liên kết1: kích thước.xlsx

Liên kết2: kích thước.xlsx

Trong trường hợp của tôi, tôi đã sử dụng danh sách drawable trong style.xml. Với danh sách lớp có thể vẽ được, bạn chỉ cần một png cho tất cả kích thước màn hình.

<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>

và flash_screen.xml trong thư mục drawable.

<?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" là một tệp png trong thư mục drawable. Tôi hi vọng cái này giúp được.

** Nếu bạn đang tìm kiếm chi tiết màn hình cho tất cả các loại thiết bị chính **

đi đến vật liệu.io

Giải pháp được chỉnh sửa sẽ làm cho SplashScreen của bạn trông tuyệt vời trên tất cả các API bao gồm API21 đến API23

Nếu bạn chỉ nhắm mục tiêu APIs24 +, bạn có thể đơn giản thu nhỏ vector có thể vẽ trực tiếp trong tệp xml của mình như sau:

<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>

trong đoạn mã trên tôi đang định cỡ lại một hình vẽ có thể vẽ được, tôi đã vẽ trên khung vẽ 640x640 là 240x240. sau đó tôi chỉ cần đặt nó trong màn hình giật gân của mình như vậy và nó hoạt động rất tốt:

<?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>

Mã của tôi thực sự chỉ vẽ hình tam giác trong hình ở phía dưới nhưng ở đây bạn thấy những gì bạn có thể đạt được với điều này. Độ phân giải cuối cùng là tuyệt vời so với các cạnh pixel mà tôi nhận được khi sử dụng bitmap. vì vậy hãy sử dụng một vectơ có thể vẽ được bằng mọi cách (có một trang web gọi là vectr mà tôi đã sử dụng để tạo của tôi mà không cần tải xuống phần mềm chuyên dụng).

EDIT để làm cho nó hoạt động cũng trên API21-22-23

Mặc dù giải pháp trên hoạt động cho các thiết bị chạy API24 + tôi đã thực sự thất vọng sau khi cài đặt ứng dụng của mình một thiết bị chạy API22. Tôi nhận thấy rằng màn hình giật gân một lần nữa cố gắng lấp đầy toàn bộ khung nhìn và trông giống như cứt. Sau khi xé lông mày ra được nửa ngày, cuối cùng tôi cũng bắt buộc phải giải quyết bằng sức mạnh ý chí.

bạn cần tạo một tệp thứ hai có tên chính xác như xmlscreen (giả sử là Splash_screen.xml) và đặt nó vào 2 thư mục có tên drawable-v22 và drawable-v21 mà bạn sẽ tạo trong thư mục res / để xem chúng phải thay đổi chế độ xem dự án của bạn từ Android sang Project). Điều này phục vụ để bảo điện thoại của bạn chuyển hướng đến các tệp được đặt trong các thư mục đó bất cứ khi nào thiết bị có liên quan chạy API tương ứng với hậu tố -vXX trong thư mục có thể vẽ, xem liên kết này . đặt đoạn mã sau vào danh sách Lớp của tệp Splash_screen.xml mà bạn tạo trong các thư mục này:

<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>

Vì một số lý do cho các API này, bạn phải bọc khả năng vẽ của mình trong một bitmap để làm cho nó hoạt động và phản hồi kết quả cuối cùng trông giống nhau. Vấn đề là bạn phải sử dụng aproach với các thư mục có thể vẽ được vì mục đích là phiên bản thứ hai của tệp Splash_screen.xml sẽ dẫn đến màn hình giật gân của bạn không hiển thị trên tất cả các thiết bị chạy API cao hơn 23. Bạn cũng có thể phải đặt phiên bản đầu tiên của Splash_screen.xml thành drawable-v24 khi android mặc định là thư mục drawable-vXX gần nhất mà nó có thể tìm thấy cho các tài nguyên. hi vọng điêu nay co ich

Dựa trên câu trả lời này từ Lucas Cerro, tôi đã tính toán kích thước bằng các tỷ lệ trong tài liệu Android , sử dụng đường cơ sở trong câu trả lời. Tôi hy vọng điều này sẽ giúp người khác đến với bài viết này!

• xxxlund (xxxhdpi): 1280x1920 (4.0x)
• xxlarge (xxhdpi): 960x1440 (3.0x)
• xlộng (xhdpi): 640x960 (2.0x)
• lớn (hdpi): 480x800 (1,5x)
• trung bình (mdpi): 320x480 (đường cơ sở 1.0x)
• nhỏ (ldpi): 240x320 (0,75x)