How To Add Subview In iOS Programmatically

When you develop an iOS application, sometimes you may need to create a SubView and add it into the iOS root view object programmatically. This article will just show you an example about how to do it.

1. Add iOS SubView Example.

First, let us look at the example demo video on youtube https://youtu.be/xpnZdYVqCe0. There are two buttons in this example. The first button implement addsubview function, when you click the first button it will add a subview object to the screen. The second button implement removes the subview function,  when you click the second button it will remove the added subview by the first button.

ios-add-sub-view-example

2. Add iOS SubView Code Steps.

  1. Create an instance of UIKit.UIView.
  2. Invoke self.vew.addSubview() method to add the above instance to the main screen.
  3. Call the subview object’s removeFromSuperview() method to remove the child view.

3. Example Code.

Below are the example project files, the only files that we need to edit are the Main.storyboard and ViewController.swift.

3.1 Main.storyboard

Add two buttons in the main storyboard view object. Set button text, and background color to green. You can read iOS Add Click Event To UIButton Swift Example to learn how to add button click event function in the iOS application.

3.2 ViewController.swift

//
//  ViewController.swift
//  AddSubViewByCodeExample
//

import UIKit

class ViewController: UIViewController {

       // Create the subview object.
       private let childView = UIView();

       // When click the second button will invoke this method.
       @IBAction func removeSubView(_ sender: UIButton, forEvent event: UIEvent) {
             // Remove the child view.
             childView.removeFromSuperview();
       }

       // Invoked when click the first button.
       @IBAction func addSubView(_ sender: UIButton, forEvent event: UIEvent) {
             // Add the child view.
             self.view.addSubview(childView);
       }
        
       override func viewDidLoad() {
             super.viewDidLoad()

             // Set child view x y cordinate and size.
             childView.frame = CGRect(x: 80, y: 100, width: 200, height: 100)

             // Set child view background color.
             childView.backgroundColor = UIColor.green
       }
}

Reference

  1. iOS Swift Hello World Example
  2. iOS Add Click Event To UIButton Swift Example

4 thoughts on “How To Add Subview In iOS Programmatically”

  1. My iOS app’s top most parent view is a ScrollView, it contains a UIView which is a wrapper view. The wrapper UIView contains a UIButton, UITextView and a UIImageView in vertical layout. And when the button is clicked, it will programatically add a UIView under the ImageView in the wrapper view.

    So I add a onclick listener to the UIButton object, when the button is clicked, it invoke the wrapperViewObject.addSubview(targetView) method to add the target view object to the wrapperViewObject, but when I run the app, it shows an error message that is Unable to simultaneously satisfy constraints, how can I fix this? Thanks.

    1. You can follow the below steps to fix this issue.

      Set the target view’s translatesAutoresizingMaskIntoConstraints to false.

      Confirm that all your own constraints are not in conflict with each other.

      If you add a constraint in the storyboard to bind the imageViewObject.bttomAnchor to wrapperViewObject.bottomAnchor, because you want to insert the target view object between the image view and the wrapper view bottom, you need to disable this constraint.

  2. I have a parent UIView object in my iOS app, and I want to add a UIButton view object to the parent UIView. But when I run my app, the UIButton can not be shown.

    // Below is the UIButton definition.
    let btn : UIButton = {
       let retBtn = UIButton()
       …
       …
       return retBtn
    }()

    // Below is the method that add the above UIButton to the parent UIView object.
     override init(frame: CGRect) {
       super.init(frame: frame)

       addSubview(btn)

    }

    1. Does your viewController show any other view object, you can add a label to the parent UIView to make a test. If you are sure the problem is because of the UIButton, you can create and add the UIButton in the ViewController’s viewDidLoad() method.

      final class ViewController: UIViewController {

      let btn = UIButton()

      override func viewDidLoad() {
         
      super.viewDidLoad()
         
      // Add the button to the parent view object.
      view.addSubview(btn)
        }
      }

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.