Onboarding screens provide the first impression of your app to the users. In this tutorial, we shall create an elegant onboarding screen for your iOS application.
Create a new project in XCode. Select Single-View-App under templates. This will give you a basic template for your app, including a basic empty ViewController.
Design
Let us design the onboarding screen in the existing blank viewcontroller.
Go to Main.storyboard.
First, we will add the buttons on the bottom of the screen. Select Button from the object library and add it to the ViewController, constrain it to the bottom, and fix a height.
.
Add another button on top of it and add necessary constraints.
Similarly, add a page control next.
Lastly, add a UIScrollView to fill the entire remaining space. Here are the constraints, if you are a beginner and need it.
Now that we have the base layout, create outlets for all the views in the ViewController class code.
Now create slides and add them to the scrollView.
import UIKit class ViewController: UIViewController, UIScrollViewDelegate { @IBOutlet var scrollView: UIScrollView! @IBOutlet var pageControl: UIPageControl! @IBOutlet var btnGetStarted: UIButton! @IBOutlet var btnSignIn: UIButton! var scrollWidth: CGFloat! = 0.0 var scrollHeight: CGFloat! = 0.0 //data for the slides var titles = ["FAST DELIVERY","EXCITING OFFERS","SECURE PAYMENT"] var descs = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.","Lorem ipsum dolor sit amet, consectetur adipiscing elit.","Lorem ipsum dolor sit amet, consectetur adipiscing elit."] var imgs = ["intro1","intro4","intro5"] //get dynamic width and height of scrollview and save it override func viewDidLayoutSubviews() { scrollWidth = scrollView.frame.size.width scrollHeight = scrollView.frame.size.height } override func viewDidLoad() { super.viewDidLoad() self.view.layoutIfNeeded() //to call viewDidLayoutSubviews() and get dynamic width and height of scrollview self.scrollView.delegate = self scrollView.isPagingEnabled = true scrollView.showsHorizontalScrollIndicator = false scrollView.showsVerticalScrollIndicator = false //crete the slides and add them var frame = CGRect(x: 0, y: 0, width: 0, height: 0) for index in 0..<titles.count { frame.origin.x = scrollWidth * CGFloat(index) frame.size = CGSize(width: scrollWidth, height: scrollHeight) let slide = UIView(frame: frame) //subviews let imageView = UIImageView.init(image: UIImage.init(named: imgs[index])) imageView.frame = CGRect(x:0,y:0,width:300,height:300) imageView.contentMode = .scaleAspectFit imageView.center = CGPoint(x:scrollWidth/2,y: scrollHeight/2 - 50) let txt1 = UILabel.init(frame: CGRect(x:32,y:imageView.frame.maxY+30,width:scrollWidth-64,height:30)) txt1.textAlignment = .center txt1.font = UIFont.boldSystemFont(ofSize: 20.0) txt1.text = titles[index] let txt2 = UILabel.init(frame: CGRect(x:32,y:txt1.frame.maxY+10,width:scrollWidth-64,height:50)) txt2.textAlignment = .center txt2.numberOfLines = 3 txt2.font = UIFont.systemFont(ofSize: 18.0) txt2.text = descs[index] slide.addSubview(imageView) slide.addSubview(txt1) slide.addSubview(txt2) scrollView.addSubview(slide) } //set width of scrollview to accomodate all the slides scrollView.contentSize = CGSize(width: scrollWidth * CGFloat(titles.count), height: scrollHeight) //disable vertical scroll/bounce self.scrollView.contentSize.height = 1.0 //initial state pageControl.numberOfPages = titles.count pageControl.currentPage = 0 } //indicator @IBAction func pageChanged(_ sender: Any) { scrollView!.scrollRectToVisible(CGRect(x: scrollWidth * CGFloat ((pageControl?.currentPage)!), y: 0, width: scrollWidth, height: scrollHeight), animated: true) } func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { setIndiactorForCurrentPage() } func setIndiactorForCurrentPage() { let page = (scrollView?.contentOffset.x)!/scrollWidth pageControl?.currentPage = Int(page) } }
That’s all! Don’t forget to add images in the assets folder. Now you have an elegant onboarding page. For a fancy button like in the picture, follow this tutorial.
Leave A Comment