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).
- Buat layar splash untuk ukuran layar di atas sebagai 9-patch . Beri nama file Anda dengan akhiran .9.png
- Tambahkan baris di bawah ini ke file config.xml Anda
- Tambahkan plugin splash screen jika diperlukan.
- 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