ขนาดหน้าจอเริ่มต้น Android สำหรับการแสดง ldpi, mdpi, hdpi, xhdpi? - เช่น 1024X768 พิกเซลสำหรับ ldpi

ฉันต้องออกแบบหน้าจอสแปลช (ภาพที่พอดีกับหน้าจอขณะโหลด) สำหรับแอปพลิเคชัน Android โดยใช้ phonegap ฉันต้องออกแบบรูปภาพ 4 ขนาดที่เหมาะกับหน้าจอ 4 ประเภทเช่น ldpi, mdpi, hdpi, xhdpi ใครช่วยบอกขนาดที่แน่นอนเป็นพิกเซลสำหรับหน้าจอเหล่านี้เพื่อให้ฉันออกแบบขนาดนั้นได้

ตัวอย่างคำตอบ:

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

อาจมีขนาดหน้าจอที่แตกต่างกันจำนวนเท่าใดก็ได้เนื่องจาก Android ไม่มีขนาดมาตรฐานที่กำหนดไว้เพื่อเป็นแนวทางให้คุณสามารถใช้ขนาดหน้าจอขั้นต่ำซึ่ง Google จัดเตรียมไว้ให้

จากสถิติของ Google การแสดงผล ldpi ส่วนใหญ่เป็นหน้าจอขนาดเล็กและส่วนใหญ่ของจอแสดงผล mdpi, hdpi, xhdpi และ xxhdpi เป็นหน้าจอขนาดปกติ

• หน้าจอ xlarge มีขนาดอย่างน้อย 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

ขนาดหน้าจอ Splash สำหรับ Android

และในเวลาเดียวกันสำหรับ Cordova (aka 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 และอาจมีขนาด XXHDPI ด้วยเนื่องจากพื้นที่ที่ทำซ้ำของภาพ 9 แพทช์ ในทางกลับกันหากใช้เฉพาะขนาดแนวตั้งขนาดแอปอาจน้อยลง รูปภาพเพิ่มเติมหมายถึงต้องการพื้นที่มากขึ้น

ให้ความสนใจ

ฉันคิดว่าไม่มีขนาดที่แน่นอนสำหรับอุปกรณ์ทั้งหมด ผมใช้ Xperia Z 5" . ถ้าคุณมีการพัฒนาแอพพลิเค crossplatform-มุมมองเว็บที่คุณควรพิจารณาสิ่งต่างๆมากมาย (ไม่ว่าหน้าจอมีปุ่มลูกศรซอฟต์คีย์หรือไม่ ฯลฯ ). ดังนั้นผมคิดว่ามีเพียงหนึ่งทางออกที่เหมาะสม. การแก้ปัญหาคือการ เตรียมหน้าจอสแปลช 9 แพทช์ (ดูHow to design a new splash screenหัวข้อด้านล่าง)

1. สร้างหน้าจอสาดหน้าจอดังกล่าวข้างต้นเป็นขนาด9 แพทช์ ตั้งชื่อไฟล์ของคุณด้วยคำต่อท้าย. 9.png
2. เพิ่มบรรทัดด้านล่างลงในไฟล์ config.xml ของคุณ
3. เพิ่มปลั๊กอินหน้าจอสแปลชหากจำเป็น
4. ดำเนินโครงการของคุณ

แค่นั้นแหละ!

รหัสเฉพาะของ Cordova
เพื่อเพิ่มบรรทัดลงใน config.xml สำหรับหน้าจอสแปลช 9 แพทช์

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

เพื่อเพิ่มบรรทัดลงใน config.xml เมื่อใช้สแปลชสกรีนที่ไม่ใช่ -9-patch

<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-Patch คุณควรแทรกช่องว่าง 1 พิกเซลสำหรับทุกด้าน ด้วยเหตุนี้คุณควรเพิ่มความกว้างและความสูงของขนาดผ้าใบ +2 พิกเซล (ตอนนี้ขนาดภาพของคุณคือ 722 x 1282)

ฉันได้เว้นช่องว่าง 1 พิกเซลไว้ทุกด้านตามที่ระบุไว้ด้านล่าง
การเปลี่ยนขนาดแคนวาสโดยใช้ Photoshop:
- เปิดไฟล์ Splash screen png ใน Photoshop
- คลิกที่ไอคอนแม่กุญแจถัดจากชื่อ 'Background' ในช่อง Layers (เว้นว่างไว้แทนสีอื่นเช่นสีขาว) หากมีเช่น ด้านล่าง: - เปลี่ยนขนาดผ้าใบจากเมนูรูปภาพ (ความกว้าง: 720 พิกเซลเป็น 722 พิกเซลและความสูง: 1280 พิกเซลเป็น 1282 พิกเซล) ตอนนี้ควรเห็นช่องว่าง 1 พิกเซลที่ทุกด้านของภาพหน้าจอเริ่มต้น



จากนั้นคุณสามารถใช้ C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat เพื่อแปลงไฟล์ 9-patch สำหรับการเปิดหน้าจอเริ่มต้นของคุณบนแอพ draw9patch คุณควรกำหนดโลโก้และพื้นที่ที่ขยายได้ สังเกตเส้นสีดำที่หน้าจอเริ่มต้นตัวอย่างต่อไปนี้ ความหนาของเส้นสีดำคือ 1 px;) เส้นสีดำด้านซ้ายและด้านบนกำหนดพื้นที่แสดงหน้าจอเริ่มต้นของคุณ ตรงตามที่คุณออกแบบไว้ เส้นด้านขวาและด้านล่างกำหนดพื้นที่ที่เพิ่มได้และถอดออกได้ (พื้นที่ที่ทำซ้ำโดยอัตโนมัติ)

เพียงแค่ทำเช่นนั้น: ซูมขอบด้านบนของภาพบนแอปพลิเคชัน draw9patch คลิกและลากเมาส์เพื่อวาดเส้น แล้วกด shift + คลิกและลากเมาส์เพื่อลบเส้น

หากคุณพัฒนาแอปข้ามแพลตฟอร์ม (เช่น Cordova / PhoneGap) คุณจะพบที่อยู่ต่อไปนี้เกือบทุกขนาดหน้าจอสแปลชของระบบปฏิบัติการ mabile คลิกเพื่อขนาดหน้าจอสแปลชของ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-36x36, splash-426x320 (ตอนนี้มีค่าที่ถูกต้อง)

MDPI- ไอคอน -48x48, splash-470x320

HDPI- ไอคอน 72x72 สาด - 640x480

XHDPI- ไอคอน -96x96, splash- 960x720

XXHDPI- ไอคอน - 144x144

ทั้งหมดเป็นพิกเซล

สำหรับอุปกรณ์แท็บเล็ต 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 "(720x1280 mdpi, 800x1280 mdpi เป็นต้น)

หน้าจอขนาดใหญ่อย่างน้อย 640dp x 480dp แท็บเล็ต tweener เช่น Streak (480x800 mdpi), แท็บเล็ต 7 "(600x1024 mdpi)

หน้าจอปกติมีเค้าโครงอย่างน้อย 470dp x 320dp หน้าจอโทรศัพท์ทั่วไป (480x800 hdpi)

หน้าจอขนาดเล็กคือหน้าจอโทรศัพท์ทั่วไปอย่างน้อย 426dp x 320dp (240x320 ldpi, 320x480 mdpi เป็นต้น)