Adding UIViews through code, it overlaps with other items of the Main.storyboard

Hello,


I'm trying to add UIViews through code, but when I test the app, it overlaps with other objects of the Main.storyboard.


For example, it overlaps with the side bar and with the Segmented Control (I can't use it since I've added those views programmatically)


This is the code I've got so far:


import UIKit


class issuesScreen: UIViewController {
    @IBOutlet weak var csViewLeading: NSLayoutConstraint!
    var showingMenu=false
    lazy var scrollView: UIScrollView = {
        let view = UIScrollView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.contentSize.height = 2000
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(scrollView)
        setupScrollView()
    }
    //Here is when I'm adding the views
    func setupScrollView() {
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        let firstView = UIView()
        firstView.translatesAutoresizingMaskIntoConstraints = false
        firstView.backgroundColor = .black
    
        scrollView.addSubview(firstView)
        
        firstView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
        firstView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 40).isActive = true
        firstView.widthAnchor.constraint(equalToConstant: 400).isActive = true
        firstView.heightAnchor.constraint(equalToConstant: 180).isActive = true
        
        let secondView = UIView()
        secondView.translatesAutoresizingMaskIntoConstraints = false
        secondView.backgroundColor = .white
        scrollView.addSubview(secondView)
        
        secondView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
        secondView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 41).isActive = true
        secondView.widthAnchor.constraint(equalToConstant: 398).isActive = true
        secondView.heightAnchor.constraint(equalToConstant: 178).isActive = true
    }
    @IBAction func showBar(_ sender: UIBarButtonItem) {
        if(showingMenu) {
            csViewLeading.constant = -240
        } else {
            csViewLeading.constant = 0
            UIView.animate(withDuration: 0.3, animations: {self.view.layoutIfNeeded()})
        }
        showingMenu= !showingMenu
    }
}


That's how the side bar looks like now: https://i.imgur.com/n24HDvH.png


As you can see, it overlaps with the UIView and as I said, the segmented control doesn't work (I can't change to "TANCADES" or vice versa).


Any help will be appreciated. Thank you in advance!

Replies

So, why don't you create all the views in stroryboard : doing so you could make sure they do not overlap.


You could make them hidden in IB, then unhide when needed in code ; you can also adjust constraints in code if you need.


Otherwise, it is a difficult task to keep compatibility with positions you declare in IB and those in code. IB Is just done for this.

I could do that I guess, but I don't know how many UIViews there should be (that deppends on how many fields the database has). I mean, if the database has 15 fields, there should be 15 UIViews, that's why I'm doing it through code.


Unless there's a way to repeat a certain object through code, would be a nightmare adding like 100 outlets of each UIView.

I don't know what your app does, so it is difficult to be sure.


You could create the scrollView in IB and then add the subviews inside this scroll view by code. Hence, no risk of overlap.


So, more questions.


But why have a UIView for each field ? Why not have a tableView instead ? That's much easier to handle each cell later ; with UIViews in a swroll view, it will be more tricky (but possible) to find which view was selected.

Well, the reason of why I'm using a UIView instead of a tableView it's because the object has a custom style and it has to look like this: https://i.imgur.com/4nU97yO.png


Do you think it would be possible to get that style using a tableView then?