Now a days mobile apps are using premium UI/UX designs. Login screen UI/UX design itself says how the app is gonna look further.

In this article we are going to create following login screen. We are not gonna use storyboard.

The whole screen developed programmatically using swift 4.


You can download the whole code in the bottom of this article.

Getting Started:

Here we created new Xcode project and rename  ViewController.swift name to LoginVC.swift and changed the subclass in storyboard.

First we need create all required sub views. In the above picture we are having different sub views. So we create as follow:

let bgImageView : UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.image = UIImage(named: "bg.jpg")
    imageView.contentMode = .scaleAspectFill
    return imageView
}()

let logoImageView : UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.alpha = 0.8
    imageView.image = UIImage(named: "skull.png")
    imageView.contentMode = .scaleAspectFit
    return imageView
}()

// ............

Like above we created all subviews. Download & see the completed project for creating remaining subviews.

Next we are adding all created subviews to the main view. For that we created addingUIElements() method as follow:

func addingUIElements() {
    let padding: CGFloat = 40.0
    let signInButtonHeight: CGFloat = 50.0
    let textFieldViewHeight: CGFloat = 60.0
    
    // Background imageview
    self.view.addSubview(bgImageView)
    bgImageView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0.0).isActive = true
    bgImageView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0.0).isActive = true
    bgImageView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0.0).isActive = true
    bgImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0.0).isActive = true
    
    // Background layer view
    view.insertSubview(bgView, aboveSubview: bgImageView)
    bgView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0.0).isActive = true
    bgView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0.0).isActive = true
    bgView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0.0).isActive = true
    bgView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0.0).isActive = true
    
    // Logo at top
    view.insertSubview(logoImageView, aboveSubview: bgView)
    logoImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 60.0).isActive = true
    logoImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0).isActive = true
    logoImageView.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.4).isActive = true
    logoImageView.widthAnchor.constraint(equalTo: logoImageView.heightAnchor, constant: 0.0).isActive = true

    //.......

} 

In the above code we added three views as subview to main view. For more download project in the bottom of this article.

Here we created new class named TextFieldView subview of UIView. This view is for the textField,mailLogo and Line. So that we can reuse for multiple TextFields.


This example we shown here doesn't have any functionality yet, it's only design created programmatically.

Download sample project with examples :