Membuat Onboarding Screen Swipe Right/Left Dengan Swift 5
Simple onboarding using Scroll View and Auto Layout
Halo!, kembali lagi kali ini kita akan membahas seputar Onboarding Screen. Setelah sebelumnya saya telah membahas tentang Onboarding Screen dengan model Loading Screen kali ini kita akan membahas tentang Onboarding Screen dengan model Swipe Right/Left, akan tetapi untuk kali ini akan kita padukan dengan konsep Auto Layout supaya bisa berjalan dengan bagus di beberapa device lainnya.
Onboarding jenis Swipe Right/Left sering kita jumpai di beberapa aplikasi yang kita pakai. Biasanya digunakan untuk memberi penjelasan singkat tentang aplikasinya apa atau penjelasan singkat tentang fitur-fitur di dalam aplikasinya.
Onboarding Swipe Right/Left yang akan kita buat kali ini terdiri dari 3 komponen utama yakni Scroll View, Page Indicator, dan Button. Button disini awalnya akan hidden, dan jika sudah berada pada page terakhir button akan show atau terlihat.
Oke, langsung saja untuk kita mulai membuat, sebelum memulai silahkan clone atau download initial project yang sudah saya siapkan dibawah ini, dimana didalamnya sudah saya set Constraints di Componentnya, dan juga sudah saya sediakan untuk Aset Image yang di butuhkan didalamnya.
Jika sudah clone project atau download project, silahkan langsung buka SlideViewController.Swift. Pertama-tama kita akan buat untuk function Scroll View nya. Silahkan masukkan code seperti dibawah ini.
Jika sudah, pasti akan muncul error. Karena kita belum mendeklarasikan variable heightScroll dan juga belum membuat protocol untuk ScrollViewDelegate. Untuk menyelesaikan erorrnya, mari kita deklarasikan terlebih dahulu variabel heightScroll seperti dibawah ini.
var heightScroll: CGFloat?
Setelah itu, buat extension diluar class seperti dibawah ini.
Jika sudah, jangan lupa untuk panggil function scrollViewSetup di viewDidLoad. Setelah itu coba cek kembali dan pastikan code pada SlideViewController sama dengan code dibawa ini.
Finally, the Onboarding Screen dengan model Swipe Right/Left is done, the project is ready to run and use. Selamat Mencoba!
Untuk preview dan hasil jadi apps ada pada featured image paling atas.
Sekian untuk pembahasan kali ini, terima kasih telah membaca artikel saya, Jika terdapat masalah dalam mencoba dan mengikuti tutorial di atas, Silahkan komen pada artikel ini. As Soon As Possible saya akan segera jawab.
Jangan lupa untuk claps dan share, karena claps anda akan menjadi semangat buat saya untuk menulis kembali.
