Tutorial #7 How to Add Splash Screen in Your iOS App

Sebelum kita mempelajari lebih rinci tentang storyboard, saya ingin terlebih dahulu menjawab beberapa pertanyaan tentang:

bagaimana menambahkan splash screen untuk aplikasi saya? apakah sulit untuk membuatnya?

Meskipun kita berfikir bahwa kita perlu menulis xcode untuk splash screen, Apple telah membuat sangat mudah untuk untuk dicoba di dalam Xcode. Tidak ada coding diperlukan di dalam pembuatan ini. Yang dilakukan hanyalah membuat beberapa konfigurasi di Xcode.

Apa itu Splash Screen?

Bagi programmer pemula mungkin belum pernah mendengar istilah “Splash Screen”. Splash screen umumnya ditemukan pada aplikasi iOS serta aplikasi desktop lainnya. Ini adalah layar pertama yang kita lihat ketika pertama kali aplikasi muncul. Biasanya, layar splash adalah gambar menutupi seluruh layar kemudian beberapa detik kemudian menghilang setelah layar utama muncul. Dibawah ini adalah contoh tampilan splash screen:

Sample iOS Splash Screen

Sample Splash Screens / Launch Images

Adapun tujuan utama dari splash screen adalah untuk memberitahukan kepada pengguna aplikasi apa yang sedang digunakan dan menampilkan layar pengantar selama proses loading. Splash screen ini penting terutama bagi aplikasi yang membutuhkan waktu lebih lama untuk memulai sebelum muncul aplikasi utamanya.

Menambahkan Splash Screen ke dalam App Anda

Seperti yang telah dijelaskan sebelumnya, bahwa untuk membuat splash screen tidak diperlukan menulis koding apapun untuk menampilkan splash screen. iOS dilengkapi dengan fitur built-in yang disebut dengan launch image. Image ini ditampilkan secara otomatis ketika pengguna membuka aplikasi dan menghilang sampai aplikasi tersebut sepenuhnya siap untuk digunakan. Anda hanya dapat menentukan splash screen Ada sebagai gambar launch Xcode.

Persiapan Membuat Splash Screen

Seperti yang Anda ketahui, iPhone 4/4S mendukung resolusi layar yang lebih tinggi (apa yang disebut Retina Display). Dalam rangka mendukung kedua resolusi layar iPhone model lama dan model terbaru, Anda harus mempersiapkan dua versi gambar splash screen ukuran ini:

320 x 480 (untuk iPhone 2G / 3G / 3GS)
640 x 960 (untuk iPhone 4 / 4S)

Untuk membuat lebih sederhana, saya akan menunjukkan cara untuk menambah splash screen di iPhone app. Dalam kasus Anda sedang membangun sebuah aplikasi iPad, Anda bisa merujuk kepada Apple’s iOS Human Interface Guideline tentang ukuran gambar launching dan konvensi penamaannya.

Gambar splash screen harus dalam format PNG. Secara default, Anda harus memberikan nama file gambar untuk resolusi layar yang lebih rendah dengan nama “Default.png”. Untuk gambar yang ditujukan untuk Retina Display (yaitu x 640 resolusi layar 960), nama filenya adalah “Default@2x.png”. “@2x” adalah pengubah skala standar yang digunakan dalam iOS. Semua file gambar ditujukan untuk menampilkan dalam Retina Display harus nama dengan string “@2x”.

Walaupun menggunakan “Default” sebagai nama file gambar launch, Anda dapat mengubahnya ke salah satu dari pilihan yang ada. Nama gambar launch didefinisikan dalam file Info.plist pada aplikasi yang kita buat. Gunakan aplikasi tabel sederhana sebagai contoh, anda dapat menambahkan properti baru yang disebut “Launch Image” dalam SimpleTable-Info.plist dan tentukan nama file pilihan (misalnya, MyLaunchImage).

Xcode Change Launch Image Name

Cara merubah instruksi iOS untuk memilih “MyLaunchImage.png” dan “MyLaunchImage@2x.png” sebagai gambar launch.

Anda dapat merancang splash screen sendiri. Untuk tujuan testing, Anda mungkin dapat mendownload dari sini download contoh splash screen

Default Splash Screen

Splash Screen for Our Simple Table App

Menambahkan Launch Image di Xcode

Setelah menyiapkan launch image, kembali ke Xcode dan buka project Xcode Anda. Di sini kita akan selalu menggunakan project simple table. Klik kanan pada  project “SimpleTable”  dan pilih “Add File ke SimpleTable”. Tambahkan kedua image masing-masing dengan nama “Default.png” dan “Default@2x.png” untuk project yang kita buat.

Add file to Xcode Project

Add File to Xcode Project

Jika Anda telah melakukan semuanya dengan benar, maka Anda akan melihat kedua file dalam project yang kita buat dan Xcode otomatis mengenali file sebagai Launch Image.

Launch Image Added in Xcode

Launch Image di tambahkan dalam Xcode

Ujicoba hasilnya!

ujicoba hasilnya cukup dengan menjalankan aplikasi, kita akan melihat splash screen berjalan sebelum aplikasi utama ditampilkan.

Simple Table App Splash Screen

Informasi Lebih Lanjut

Tutorial yang ditampilkan disini cukup singkat,  saya telah tunjukkan cara menambahkan splash screen sederhana di app iPhone Anda. Peluncuran gambar yang kita gunakan adalah dalam orientasi potrait. Bagaimana jika Anda merancang sebuah aplikasi dalam orientasi landscape? Bagaimana seharusnya Anda nama launch image? Saya merekomendasikan Anda untuk mempelajari lebih lanjut Apple’s programming guideline for App Launch Image.  IOS mendukung berbagai versi launch image dengan konvensi penamaan yang berbeda. Jadi pelajari lebih jauh tentang hal itu.

 

6 Responses

Leave a Reply

You must be logged in to post a comment.