UIView not showing in UIViewcollection in Swift, Programmatically

Question

the below code is the viewController that is navigated with a navigationItem navigationItem.leftBarButtonItem = UIBarButtonItem(title: from a previous tableViewController and I am trying to produce a UIView in my viewController. However nothing is showing.

import UIKit


class SecondpgController: UIViewController {
     var inputContainerView: UIView!
     override func viewDidLoad() {
       super.viewDidLoad()

    view.backgroundColor = UIColor .gray

      let inputContainerView = UIView()
    self.view.addSubview(inputContainerView)
    //inputContainerView.backgroundColor = UIColor(red: 162/255, green: 20/255, blue: 35/255, alpha: 1)

    inputContainerView.backgroundColor = .white
    inputContainerView.translatesAutoresizingMaskIntoConstraints = false

    //inputContainerView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 300).isActive = true
    //nputContainerView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 10).isActive = true
    inputContainerView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 200).isActive = true
    inputContainerView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 200).isActive = true

The app is running well however after reaching the view controller, Nothing is shown but only a grey screen. Why is this happening and how can I solve it?

Answer 1

Your problem is that you constraints are only setting x and y position for the UIView you are creating. You are missing width and height .

Try this constraints:

    inputContainerView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
    inputContainerView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    inputContainerView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    inputContainerView.heightAnchor.constraint(equalToConstant: 100).isActive = true

This code means that your UIView will be centred vertically and horizontally in your self.view and also it has a width and height of 100. It will look like this:

Hope it helps. Happy Coding

Answer 2

You have added constraints to place inputContainerView to the centre of the screen but did not add constraints for it's height and width. Adding the following code might solve your issue:

    inputContainerView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0).isActive = true
    inputContainerView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0).isActive = true
    inputContainerView.addConstraint(NSLayoutConstraint(item: inputContainerView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200))
    inputContainerView.addConstraint(NSLayoutConstraint(item: inputContainerView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200))

Check this: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html

Ensure that the constants for CenterXAnchor and CenterYAnchor are 0, so the view aligns at the centre. And make sure you add inputContainerView only once either as an outlet or programmatically.