ฉันมี PNG แบบเต็มหน้าจอฉันต้องการแสดงผลด้วยสแปลช เพียงหนึ่งข้อผิดพลาดที่นั่นและผมมีความคิดว่าขนาดที่จะใส่ในโฟลเดอร์ drawable ทุก ( ldpi, mdpi, hdpiและxhdpi) แอปพลิเคชันของฉันควรทำงานได้ดีและสวยงามบนโทรศัพท์และแท็บเล็ตทั้งหมด ฉันควรสร้างขนาดใด (เป็นพิกเซล) เพื่อให้สแปลชดีบนทุกหน้าจอ

คำปฏิเสธ

คำตอบนี้มาจาก 2013 และล้าสมัยอย่างจริงจัง ในฐานะของ Android 3.2 ตอนนี้มีความหนาแน่นของหน้าจอ 6 กลุ่ม คำตอบนี้จะได้รับการอัปเดตทันทีที่ฉันสามารถทำได้ แต่ไม่มี ETA อ้างอิงเอกสารอย่างเป็นทางการสำหรับความหนาแน่นทั้งหมดในขณะนี้ (แม้ว่าข้อมูลเกี่ยวกับขนาดพิกเซลที่เฉพาะเจาะจงนั้นหายากเสมอ)

นี่คือเวอร์ชันของ tl / dr

• สร้างภาพ 4 ภาพหนึ่งภาพสำหรับแต่ละหน้าจอความหนาแน่น:

  • xlarge (xhdpi): 640x960
  • ใหญ่ (hdpi): 480x800
  • ปานกลาง (mdpi): 320x480
  • ขนาดเล็ก (ldpi): 240x320

• อ่าน แนะนำภาพ 9-patchในคู่มือผู้พัฒนา Android

• ออกแบบรูปภาพที่มีพื้นที่ที่สามารถยืดได้อย่างปลอดภัยโดยไม่สูญเสียผลลัพธ์

ด้วยวิธีนี้ Android จะเลือกไฟล์ที่เหมาะสมสำหรับความหนาแน่นของภาพจากนั้นจะยืดภาพตามมาตรฐาน 9-patch

จุดสิ้นสุดของ tl; dr โพสต์แบบเต็มล่วงหน้า

ฉันกำลังตอบคำถามที่เกี่ยวข้องกับการออกแบบของคำถาม ฉันไม่ใช่นักพัฒนาซอฟต์แวร์ดังนั้นฉันจะไม่สามารถให้รหัสสำหรับการใช้งานโซลูชันที่ให้ไว้มากมาย อนึ่งความตั้งใจของฉันคือการช่วยให้นักออกแบบที่หลงทางเหมือนตอนที่ฉันช่วยพัฒนาแอพ Android เครื่องแรกของฉัน

เหมาะสมทุกขนาด

สำหรับ Android บริษัท ต่างๆสามารถพัฒนาโทรศัพท์มือถือและตารางได้ทุกขนาดไม่ว่าจะมีความละเอียดเท่าใดก็ตาม ด้วยเหตุนี้จึงไม่มี "ขนาดภาพที่ถูกต้อง" สำหรับหน้าจอสแปลชเนื่องจากไม่มีความละเอียดหน้าจอคงที่ นั่นเป็นปัญหาสำหรับผู้ที่ต้องการใช้หน้าจอเริ่มต้น

ผู้ใช้ของคุณต้องการเห็นหน้าจอสแปลชจริงหรือ

(ในหมายเหตุด้านข้างหน้าจอสแปลชค่อนข้างท้อใจในหมู่ผู้ใช้งานเป็นที่ถกเถียงกันอยู่ว่าผู้ใช้รู้แอปที่เขาใช้งานอยู่แล้วและไม่จำเป็นต้องสร้างแบรนด์รูปภาพของคุณด้วยหน้าจอสแปลเพราะมันขัดจังหวะประสบการณ์ของผู้ใช้ "โฆษณา" ควรใช้อย่างไรก็ตามในแอปพลิเคชันที่ต้องโหลดจำนวนมากเมื่อเริ่มต้น (5s +) รวมถึงเกมและสิ่งนั้นเพื่อให้ผู้ใช้ไม่ติดสงสัยว่าแอปพลิเคชันขัดข้องหรือไม่)

ความหนาแน่นของหน้าจอ 4 คลาส

ดังนั้นด้วยความละเอียดหน้าจอที่แตกต่างกันมากมายในโทรศัพท์ในท้องตลาด Google จึงนำเสนอทางเลือกและโซลูชั่นที่ดีที่สามารถช่วยคุณได้ สิ่งแรกที่คุณต้องรู้ก็คือ Android จะแยกหน้าจอทั้งหมดออกเป็นความหนาแน่นของหน้าจอ 4 แบบ:

1. ความหนาแน่นต่ำ (ldpi ~ 120dpi)
2. ความหนาแน่นปานกลาง (mdpi ~ 160dpi)
3. ความหนาแน่นสูง (hdpi ~ 240dpi)
4. ความหนาแน่นสูงพิเศษ (xhdpi ~ 320dpi) (ค่า dpi เหล่านี้เป็นค่าประมาณเนื่องจากอุปกรณ์ที่สร้างขึ้นเองจะมีค่า dpi ที่แตกต่างกัน)

สิ่งที่คุณ (ถ้าคุณเป็นนักออกแบบ) ต้องรู้จากสิ่งนี้คือว่า Android เลือกจาก 4 ภาพที่จะแสดงโดยทั่วไปขึ้นอยู่กับอุปกรณ์ ดังนั้นคุณจำเป็นต้องออกแบบภาพที่แตกต่างกัน 4 ภาพ (แม้ว่าจะสามารถพัฒนาได้มากขึ้นสำหรับรูปแบบที่แตกต่างกันเช่นไวด์สกรีน, โหมดแนวตั้ง / แนวนอน ฯลฯ )

โดยคำนึงถึงสิ่งนี้ทราบ: เว้นแต่คุณจะออกแบบหน้าจอสำหรับทุกความละเอียดเดียวที่ใช้ใน Android ภาพของคุณจะยืดให้พอดีกับขนาดหน้าจอ และถ้าหากภาพของคุณนั้นเป็นแบบไล่ระดับสีหรือเบลอคุณก็จะได้ภาพที่ไม่ต้องการโดยการยืดออก ดังนั้นคุณมีสองตัวเลือกโดยทั่วไป: สร้างภาพสำหรับการรวมขนาด / ความหนาแน่นของแต่ละหน้าจอหรือสร้างภาพ 9-patch สี่ภาพ

ทางออกที่ยากที่สุดคือการออกแบบหน้าจอที่แตกต่างกันสำหรับทุกความละเอียด คุณสามารถเริ่มต้นได้โดยทำตามวิธีแก้ปัญหาในตารางในตอนท้ายของหน้านี้ (มีมากกว่านั้นตัวอย่าง: 960 x 720 ไม่มีอยู่ในรายการ) และสมมติว่าคุณมีรายละเอียดเล็ก ๆ น้อย ๆ ในภาพเช่นข้อความเล็ก ๆ คุณต้องออกแบบมากกว่าหนึ่งหน้าจอสำหรับแต่ละความละเอียด ตัวอย่างเช่นรูปภาพขนาด 480x800 ที่แสดงในหน้าจอขนาดกลางอาจดูโอเค แต่บนหน้าจอที่เล็กกว่า (ที่มีความหนาแน่น / dpi สูงกว่า) โลโก้อาจเล็กเกินไปหรือข้อความบางส่วนอาจอ่านไม่ได้

ภาพ 9 แพทช์

วิธีการแก้ปัญหาอื่น ๆ คือการสร้างภาพที่ 9 แพทช์ โดยทั่วไปจะมีเส้นขอบโปร่งใส 1 พิกเซลรอบ ๆ รูปภาพของคุณและโดยการวาดพิกเซลสีดำในพื้นที่ด้านบนและด้านซ้ายของเส้นขอบนี้คุณสามารถกำหนดว่าส่วนใดของรูปภาพที่จะยืดได้ ฉันจะไม่เข้าไปดูรายละเอียดว่าภาพแพทช์ 9 ตัวทำงานอย่างไรในระยะสั้นพิกเซลที่จัดตำแหน่งเครื่องหมายที่บริเวณด้านบนและด้านซ้ายคือพิกเซลที่จะทำซ้ำเพื่อยืดภาพ

กฎพื้นฐานบางประการ

1. คุณสามารถทำให้ภาพเหล่านี้เป็น photoshop (หรือซอฟต์แวร์แก้ไขภาพใด ๆ ที่สามารถสร้าง png โปร่งใส)
2. เส้นขอบ 1 พิกเซลต้องมีความโปร่งใสอย่างสมบูรณ์
3. เส้นขอบโปร่งใส 1 พิกเซลจะต้องอยู่รอบภาพของคุณไม่ใช่เฉพาะด้านบนและด้านซ้าย
4. คุณสามารถวาดพิกเซลดำ (# 000000) พิกเซลในพื้นที่นี้
5. ขอบด้านบนและด้านซ้าย (ซึ่งกำหนดการยืดภาพ) สามารถมีหนึ่งจุด (1px x 1px) สองจุด (ทั้ง 1px x 1px) หรือหนึ่งบรรทัดต่อเนื่อง (ความกว้าง x 1px หรือ 1px x ความสูง)
6. หากคุณเลือกที่จะใช้ 2 จุดรูปภาพจะถูกขยายตามสัดส่วน (ดังนั้นแต่ละจุดจะมีการผลัดกันขยายจนกว่าจะได้ความกว้าง / ความสูงสุดท้าย)
7. เส้นขอบ 1px จะต้องเพิ่มเติมจากขนาดไฟล์ฐานที่ต้องการ อิมเมจ 100x100 9-patch จะต้องมี 102x102 (100x100 + 1px ที่ด้านบนด้านล่างซ้ายและขวา)
8. รูปภาพ 9 แผ่นต้องลงท้ายด้วย * .9.png

ดังนั้นคุณสามารถวาง 1 จุดที่ด้านใดด้านหนึ่งของโลโก้ของคุณ (ในขอบด้านบน) และ 1 จุดด้านบนและด้านล่าง (บนขอบด้านซ้าย) และแถวและคอลัมน์ที่ทำเครื่องหมายเหล่านี้จะเป็นพิกเซลเดียวที่จะยืด

ตัวอย่าง

นี่คือภาพ 9 แผ่น, 102x102px (ขนาดสุดท้าย 100x100 สำหรับจุดประสงค์ของแอป):

นี่คือการซูม 200% ของภาพเดียวกัน:

สังเกตเห็นเครื่องหมาย 1px ที่ด้านบนและด้านซ้ายว่าแถว / คอลัมน์ใดที่จะขยาย

นี่คือภาพที่ปรากฏใน 100x100 ภายในแอป:

และนี่คือสิ่งที่มันต้องการหากขยายเป็น 460x140:

สิ่งสุดท้ายที่ต้องพิจารณา ภาพเหล่านี้อาจดูดีบนหน้าจอมอนิเตอร์และโทรศัพท์มือถือส่วนใหญ่ แต่หากอุปกรณ์มีความหนาแน่นของภาพสูงมาก (dpi) ภาพจะดูเล็กเกินไป อาจยังคงชัดเจน แต่บนแท็บเล็ตที่มีความละเอียด 1920x1200 ภาพจะปรากฏเป็นสี่เหลี่ยมเล็ก ๆ กลาง ดังนั้นทางออกคืออะไร? ออกแบบอิมเมจ 9 แพตช์ที่แตกต่างกัน 4 แบบแต่ละชุดมีความหนาแน่นแตกต่างกัน เพื่อให้แน่ใจว่าจะไม่มีการหดตัวเกิดขึ้นคุณควรออกแบบด้วยความละเอียดที่ต่ำที่สุดสำหรับแต่ละประเภทความหนาแน่น การลดขนาดเป็นสิ่งที่ไม่พึงประสงค์ที่นี่เนื่องจาก 9-patch บัญชีเท่านั้นสำหรับการยืดดังนั้นในการย่อตัวข้อความขนาดเล็กและองค์ประกอบอื่น ๆ อาจสูญเสียความชัดเจน

นี่คือรายการการแก้ปัญหาที่เล็กที่สุดและพบบ่อยที่สุดสำหรับแต่ละประเภทความหนาแน่น:

• xlarge (xhdpi): 640x960
• ใหญ่ (hdpi): 480x800
• ปานกลาง (mdpi): 320x480
• ขนาดเล็ก (ldpi): 240x320

ดังนั้นออกแบบหน้าจอสาดสี่หน้าในความละเอียดด้านบนขยายภาพวางกรอบโปร่งใสขนาด 1px รอบ ๆ ผืนผ้าใบและทำเครื่องหมายว่าแถว / คอลัมน์ใดที่จะยืดหยุ่นได้ โปรดจำไว้ว่าภาพเหล่านี้จะใช้สำหรับอุปกรณ์ใด ๆในหมวดหมู่ความหนาแน่นดังนั้นภาพ ldpi ของคุณ (240 x 320) อาจขยายเป็น 1024x600 บนแท็บเล็ตขนาดใหญ่พิเศษที่มีความหนาแน่นของภาพขนาดเล็ก (~ 120 dpi) ดังนั้น 9-patch เป็นทางออกที่ดีที่สุดสำหรับการยืดตราบใดที่คุณไม่ต้องการรูปถ่ายหรือกราฟิกที่ซับซ้อนสำหรับหน้าจอเริ่มต้น (จำข้อ จำกัด เหล่านี้เมื่อคุณสร้างการออกแบบ)

อีกวิธีเดียวที่จะทำให้สิ่งนี้ไม่เกิดขึ้นคือการออกแบบหน้าจอเดียวสำหรับแต่ละความละเอียด (หรืออีกภาพหนึ่งสำหรับการรวมกันของความละเอียดของความละเอียดถ้าคุณต้องการหลีกเลี่ยงภาพที่เล็กเกินไป / ใหญ่เกินไปสำหรับอุปกรณ์ที่มีความหนาแน่นสูง / ต่ำ) ภาพไม่ยืดและมีสีพื้นหลังปรากฏขึ้นไม่ว่าจะเกิดการยืดออก (โปรดจำไว้ว่าสีที่แสดงโดยเครื่องมือ Android อาจดูแตกต่างจากสีเฉพาะที่แสดงโดยโฟโต้ช็อปเนื่องจากโปรไฟล์สี)

ฉันหวังว่านี่จะสมเหตุสมผล โชคดี!

โหมด PORTRAIT

MDPI คือ 320x480 dp = 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 คือ 480x320 dp = 480x320px (1x)

LDPI คือ 0.75 x MDPI = 360x240px

HDPI คือ 1.5 x MDPI = 720x480px

XHDPI คือ 2 x MDPI = 960x640px

XXHDPI คือ 3 x MDPI = 1440x960px

XXXHDPI คือ 4 x MDPI = 1920x1280px

แก้ไข:

ฉันขอแนะนำให้ใช้Lottieสำหรับหน้าจอสแปลชถ้าคุณอ่านข้อความนี้ในปี 2019+

PORTRAIT

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คุณสามารถสร้างอิมเมจ 9-patch สำหรับความละเอียดทั้งหมด - XHDPI, HDPI, MDPI, LDPI ในคลิกเดียว

การใช้ PNG ไม่ใช่ความคิดที่ดี จริงๆแล้วมันมีค่าใช้จ่ายเท่าที่ประสิทธิภาพนั้นเกี่ยวข้อง คุณสามารถใช้ไฟล์ XML drawable ตัวอย่างเช่นพื้นหลังของ Facebook

สิ่งนี้จะช่วยให้คุณราบรื่นและเร็วขึ้นสำหรับการทำงานของคุณและสำหรับโลโก้ใช้. 9 patch รูป

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: dimension.xlsx

Link2: dimension.xlsx

ในกรณีของฉันฉันใช้ drawable list ใน style.xml ด้วยรายการเลเยอร์ที่วาดได้คุณต้องใช้หนึ่ง 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 ในโฟลเดอร์ 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" เป็นไฟล์ png ในโฟลเดอร์ drawable ฉันหวังว่านี่จะช่วยได้.

** หากคุณกำลังมองหารายละเอียดหน้าจอสำหรับอุปกรณ์หลักทุกประเภท **

ไปที่ material.io

วิธีการแก้ไขที่จะทำให้ SplashScreen ของคุณดูดีบน API ทั้งหมดรวมถึง API21 ถึง API23

หากคุณเป็นเพียงการกำหนดเป้าหมาย APIs24 + คุณสามารถลดขนาดภาพวาดเวกเตอร์ของคุณลงในไฟล์ 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 พยายามเติมมุมมองทั้งหมดอีกครั้งและดูเหมือนเป็นเรื่องไร้สาระ หลังจากที่ถอนขนคิ้วออกมาครึ่งวันในที่สุดฉันก็ถูกบังคับโดยวิธีแก้ปัญหาอย่างเต็มที่

คุณต้องสร้างไฟล์ที่สองชื่อเหมือน splashscreen xml (สมมติว่า splash_screen.xml) และวางไว้ใน 2 โฟลเดอร์ที่เรียกว่า drawable-v22 และ drawable-v21 ที่คุณจะสร้างใน res / โฟลเดอร์ (เพื่อดูพวกคุณ ต้องเปลี่ยนมุมมองโครงการจาก Android เป็นโครงการ) บริการนี้บอกให้โทรศัพท์ของคุณเปลี่ยนเส้นทางไปยังไฟล์ที่วางในโฟลเดอร์เหล่านั้นเมื่อใดก็ตามที่อุปกรณ์ที่เกี่ยวข้องเรียกใช้ API ที่สอดคล้องกับคำต่อท้าย -vXX ในโฟลเดอร์ drawableดูลิงค์นี้ วางรหัสต่อไปนี้ในรายการเลเยอร์ของไฟล์ 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 เหล่านี้คุณต้องห่อ drawable ของคุณในบิตแมปเพื่อให้มันทำงานและเจ็ทผลลัพธ์สุดท้ายดูเหมือนกัน ปัญหาคือคุณต้องใช้ aproach กับโฟลเดอร์ adable drawable เนื่องจากไฟล์ splash_screen.xml เวอร์ชันที่สองจะนำไปสู่หน้าจอสแปลชของคุณที่ไม่ได้แสดงบนอุปกรณ์ที่ใช้ API ที่สูงกว่า 23 นอกจากนี้คุณอาจต้องวาง รุ่นแรกของ splash_screen.xml ลงใน drawable-v24 เป็นค่าเริ่มต้นของ Android ไปยังโฟลเดอร์ 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)