Membuat Onboarding Loading Screen Sederhana dengan Swift
Menggunakan Custom Progress Bar UI View
Dalam membangun sebuah aplikasi terdapat beberapa komponen halaman didalamnya, diantaranya yang paling umum seperti Splash Screen, Onboarding, Main Screen, dan banyak lagi lainnya.
Nah kali ini yang akan kita akan coba bahas adalah tentang Halaman Onboarding, yang dimana terdapat banyak macam style untuk membuat sebuah halaman onboarding dalam suatu aplikasi. Namun yang akan kita coba buat kali ini adalah halaman onboarding dengan menggunakan style loading screen.
Onboarding Loading Screen yang akan dibuat terdiri dari beberapa komponen di dalamnya yakni Image View, Label, dan tentunya progress bar sebagai komponen utama yang menunjukkan proses loading itu sendiri. Dalam project ini progress bar yang akan dibuat tidak menggunakan progress bar dari native, melainkan menggunakan Custom Progress Bar menggunakan UI View. Nah yuk mari kita buat sekarang.
Pertama mari kita buka Xcode dengan Create New Project. Kemudian pilih tab IOS, pilih App (untuk membuat aplikasi iOS). Setelah itu kasih nama project kalian (bebas mau dikasih nama apa), dan jangan lupa tuliskan Organization Identifier. Pastikan sebelum menekan tombol Next, interface yang digunakan adalah Storyboard dan menggunakan UIKit.
Masuk ke Main.storyboard, untuk kita memulai membuat komponen UI yang akan kita pakai. Sebelum itu ubah background view nya menggunakan warna System Teal, dengan cara klik View yang ada dibawah View Controller, kemudian pada properties komponen (panel kiri) terdapat background, lalu ubah menjadi System Teal Color.
Setelah itu, masukkan 3 komponen yang akan digunakan yaitu UIView, UIImageView dan UILabel. Susun 3 komponen tersebut berurutan dari yg atas adalah Image View, UI View, dan label.
Setting size Image View dengan ukuran 180 x 180, dan UI View dengan ukuran 240 x 20. Tidak lupa juga set constraint width dan height pada Image View dan set height saja pada UI View. Untuk label disini, saya menggunakan System Font, Semibold, Size 16, Alignment Center dan Color White. Jika sudah, block atau select ke 3 komponen tersebut, kemudian embed ketiganya ke dalam Stack View. Set Stack View dengan menggunakan Alignment: Center, Distribution: Fill, dan Spacing: 24. Selanjutnya set constraints Stack View dengan menggunakan Horizontally and Vertically Container.(Untuk detail langkah-langkah pengaturan 3 komponen tersebut, silahkan lihat gambar dibawah ini)
Kemudian tambahkan 1 View Controller baru sebagai halaman Main Screen. Jadi nantinya setelah halaman onboarding loading selesai, akan otomatis masuk ke halaman Main Screen. Disini saya akan menggunakan komponen UI Label dengan memberi nama “INI MAIN SCREEN” sebagai tanda bahwa itu halaman Main Screen dan tidak lupa set constrains UI Label dengan menggunakan Horizontally and Vertically Container.
Tahapan selanjutnya adalah sambungkan “Segue” dari halaman onboarding loading ke halaman main screen dengan menggunakan Present Modally, Full Screen, Cross Dissolve, dan beri Identifier: “toMain”.
Jika sudah, mari lanjut ke tahapan selanjutnya yaitu membuat class baru untuk Custom Progress Barnya, dengan cara klik File>New>File..>Pilih Swift File kemudia beri nama file class nya “CustomHorizontalProgressBar. swift”, lalu isi kode class tersebut seperti dibawah ini.
Kemduian kembali lagi ke Storyboard, lalu klik atau pilih UIView kemudian sambungkan dengan class yang barusan dibuat, karena UIView disini akan menjadi sebagai Progress Bar Loadingnya.
Jika setelah menyambungkan UI View dengan Custom Class yang sudah kita buat terdapat warning atau error, silahkan masuk ke Storyboard lalu Pilih Editor > Refresh All Views, jika masih sama silahkan Force Quit dari Xcode lalu buka kembali. Karena terkadang masih terjadi beberapa bug pada Xcode 12 dalam Storyboard. Sebenarnya meskipun terjadi Warning ataupun Error, aplikasi nantinya masih bisa di run dan berjalan tidak ada masalah jadi boleh diabaikan. Setelah itu bisa untuk memulai set warna progress barnya menggunakan warna apa, disini saya menggunakan warna hijau.
Jika sudah, silahkan buka ViewController.swift lalu isikan kode seperti dibawah ini.
Jangan lupa sambungkan declaration komponen yang @IBOutlet pada ViewContoller ke komponen yang ada di Storyboard.
Setelah itu masukkan image aset kedalam project setidaknya ada 3 image dan beri nama “Slide1”, “Slide2”, “Slide3”. Tahap akhir, jalankan Build lalu Run dan kemudian hasilnya kurang lebih akan seperti dibawah ini.
Nah, mudah bukan untuk membuat halaman Onboarding Loading Screen.
Terima kasih sudah membaca semoga bermanfaat, jika dirasa ada kendala silahkan komentar di dalam artikel ini.
