ukuran layar splash android untuk tampilan ldpi, mdpi, hdpi, xhdpi? - misalnya: 1024X768 piksel untuk ldpi

Saya harus mendesain layar splash (gambar yang pas dengan layar saat memuat) untuk aplikasi android menggunakan phonegap. Saya harus mendesain 4 gambar ukuran yang sesuai untuk 4 jenis layar seperti ldpi, mdpi, hdpi, xhdpi. Adakah yang bisa memberi tahu saya ukuran pasti dalam piksel untuk layar ini sehingga saya dapat mendesain dalam ukuran itu?

Contoh jawaban:

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

Ada beberapa ukuran layar yang berbeda karena Android tidak memiliki ukuran standar yang ditetapkan sehingga sebagai panduan Anda dapat menggunakan ukuran layar minimum, yang disediakan oleh Google.

Menurut statistik Google, mayoritas tampilan ldpi adalah layar kecil dan sebagian besar tampilan mdpi, hdpi, xhdpi, dan xxhdpi adalah layar berukuran normal.

• Layar xlarge setidaknya 960dp x 720dp
• layar besar setidaknya 640dp x 480dp
• layar normal setidaknya 470dp x 320dp
• layar kecil setidaknya 426dp x 320dp

Anda dapat melihat statistik pada ukuran relatif perangkat di dasbor Google yang tersedia di sini .

Informasi lebih lanjut tentang berbagai layar dapat ditemukan di sini .

9 Gambar patch

Solusi terbaik adalah membuat gambar sembilan tambalan sehingga batas gambar dapat meregang agar sesuai dengan ukuran layar tanpa memengaruhi area statis gambar.

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Ukuran layar splash untuk Android

dan pada saat yang sama untuk Cordova (alias Phonegap), React-Native dan semua platform pengembangan lainnya

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

Catatan: Mempersiapkan XXXHDPI tidak diperlukan dan mungkin juga ukuran XXHDPI karena area berulang dari gambar 9-patch. Di sisi lain, jika hanya ukuran Potret yang digunakan, ukuran Aplikasi bisa lebih kecil. Lebih banyak gambar berarti lebih banyak ruang yang dibutuhkan.

Perhatian

Saya rasa tidak ada ukuran pasti untuk semua perangkat. Saya menggunakan Xperia Z 5" . Jika Anda mengembangkan aplikasi crossplatform tampilan web Anda harus mempertimbangkan banyak hal (apakah layar memiliki tombol navigasi softkey atau tidak, dll). Oleh karena itu, saya pikir hanya ada satu solusi yang cocok. Solusinya adalah untuk siapkan layar splash 9-patch (temukan How to design a new splash screenjudul di bawah).

1. Buat layar splash untuk ukuran layar di atas sebagai 9-patch . Beri nama file Anda dengan akhiran .9.png
2. Tambahkan baris di bawah ini ke file config.xml Anda
3. Tambahkan plugin splash screen jika diperlukan.
4. Jalankan proyek Anda.

Itu dia!

Kode khusus Cordova
Untuk menambahkan baris ke config.xml untuk layar splash 9-patch

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

Untuk menambahkan baris ke config.xml saat menggunakan layar splash non -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>

Bagaimana merancang layar splash baru

Saya akan menjelaskan cara sederhana untuk membuat layar splash yang tepat menggunakan cara ini. Asumsikan kita sedang mendesain layar 1280dp x 720dp - xhdpi (x-large). Demi contoh saya telah menulis di bawah ini;

• Di Photoshop: File -> New di jendela dialog baru atur layar Anda

  Lebar: 720 Piksel Tinggi: 1280 Piksel

  Saya kira ukuran di atas berarti Resolusi 320 Pixels / Inch. Tetapi untuk memastikan Anda dapat mengubah nilai resolusi menjadi 320 di jendela dialog Anda. Dalam hal ini Piksel / Inci = DPI

  Selamat ... Anda memiliki template layar splash 720dp x 1280dp.

Cara menghasilkan layar splash 9-patch

Setelah Anda mendesain layar splash, jika Anda ingin mendesain layar splash 9-Patch, Anda harus memasukkan celah 1 piksel untuk setiap sisi. Untuk alasan ini Anda harus meningkatkan +2 piksel lebar dan tinggi ukuran kanvas Anda (sekarang ukuran gambar Anda adalah 722 x 1282).

Saya telah meninggalkan celah kosong 1 piksel di setiap sisi seperti yang diarahkan di bawah ini.
Mengubah ukuran kanvas dengan menggunakan Photoshop:
- Buka file png layar splash di Photoshop
- Klik ikon gembok di sebelah nama 'Latar Belakang' di bidang Lapisan (untuk dikosongkan alih-alih warna lain seperti putih) jika ada seperti di bawah ini: - Ubah ukuran kanvas dari menu Gambar (Lebar: 720 piksel menjadi 722 piksel dan Tinggi: 1280 piksel menjadi 1282 piksel). Sekarang, harus melihat celah 1 piksel di setiap sisi gambar layar splash.



Kemudian Anda dapat menggunakan C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat untuk mengonversi file 9-patch. Untuk itu buka layar splash Anda di aplikasi draw9patch. Anda harus menentukan logo Anda dan area yang dapat diperluas. Perhatikan garis hitam contoh splash screen berikut. Ketebalan garis hitam hanya 1 px;) Garis hitam sisi kiri dan atas menentukan area tampilan splash screen Anda. Persis seperti yang Anda rancang. Garis Kanan dan Bawah menentukan area addable dan removable (area yang berulang secara otomatis).

Lakukan saja: Zoom tepi atas gambar Anda pada aplikasi draw9patch. Klik dan seret mouse Anda untuk menggambar garis. Dan tekan shift + klik dan seret mouse Anda untuk menghapus garis.

Jika Anda mengembangkan aplikasi lintas platform (seperti Cordova / PhoneGap), Anda dapat menemukan alamat berikut hampir semua ukuran layar splash OS mabile. Klik untuk ukuran layar splash Windows Phone , WebOS , BlackBerry , Bada-WAC dan Bada .

https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes

Dan jika Anda membutuhkan ukuran ikon aplikasi iOS, Android dll. Anda dapat mengunjungi di sini .

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

Untuk Perangkat Seluler Android

LDPI- icon-36x36, splash-426x320 (sekarang dengan nilai yang benar)

MDPI- icon-48x48, splash-470x320

HDPI- ikon 72x72, percikan- 640x480

XHDPI- icon-96x96, percikan- 960x720

XXHDPI- ikon- 144x144

Semua dalam piksel.

Untuk Perangkat Tablet Android

LDPI:
    Portrait: 200x320px
    Landscape: 320x200px
MDPI:
    Portrait: 320x480px
    Landscape: 480x320px
HDPI:
    Portrait: 480x800px
    Landscape: 800x480px
XHDPI:
    Portrait: 720px1280px
    Landscape: 1280x720px

• LDPI: Potret: 200 X 320px. Lanskap: 320 X 200 piksel.
• MDPI: Potret: 320 X 480px. Lanskap: 480 X 320px.
• HDPI: Potret: 480 X 800px. Lanskap: 800 X 480px.
• XHDPI: Potret: 720 X 1280px. Lanskap: 1280 X 720px.
• XXHDPI: Potret: 960 X 1600px. Lanskap: 1600 X 960px.
• XXXHDPI: Potret: 1280 X 1920px. Lanskap: 1920 X 1280px.

• Layar Xlarge setidaknya 960dp x 720dp
• Layar besar item daftar berukuran setidaknya 640dp x 480dp
• Layar normal item daftar setidaknya 470dp x 320dp
• Layar kecil item daftar setidaknya 426dp x 320dp

Gunakan ini untuk membuat gambar Anda dan meletakkannya di folder sumber daya tertentu.

Cukup gunakan situs web ini: http://ticons.fokkezb.nl :)

Ini mempermudah Anda, dan menghasilkan ukuran yang benar secara langsung

Layar xlarge minimal 960dp x 720dp layout-xlarge 10 "tablet (720x1280 mdpi, 800x1280 mdpi, dll.)

layar besar setidaknya tablet tweener 640dp x 480dp seperti Streak (480x800 mdpi), tablet 7 "(600x1024 mdpi)

layar normal setidaknya 470dp x 320dp tata letak layar ponsel biasa (480x800 hdpi)

Layar kecil setidaknya 426dp x 320dp layar ponsel biasa (240x320 ldpi, 320x480 mdpi, dll.)