Adding autolayout constraint programmatically turns uiview to black in Swift

Question

I have a UIView class named DropDownList which contains a label and a button. This label and Button are placed in a stack view. Following are the constraints that I have added to this view. The problem is when adding this constraints the entire view (main View) become black in devices but works in simulator . And I am also facing another problem when changing the button title the entire view (main View) become black in the simulator. I am using swift 4 and Xcode 9.0. Please help...

class DropDownList: UIView {

    let DefaultSpace: CGFloat = 50.0
    let Margin: CGFloat = 10.0
    let StackViewSpacing: CGFloat  = 50.0

    var mDataList:[Dictionary<String,Any>] = [] {

    }
    var mFieldLabel: UILabel =
    {
        let fieldLabel = UILabel()
        fieldLabel.font = AppFont
        fieldLabel.textAlignment = .left
        return fieldLabel
    }()

    var mDropDown: DropDown = DropDown()
    var mDropDownBtn: UIButton = {
        let btn = UIButton()
        btn.setTitle("-Select-", for: .normal)
        btn.setTitleColor(.black, for: .normal)
        btn.titleLabel?.textAlignment = .left
        btn.titleLabel?.font = AppFont
        btn.addTarget(self, action:#selector(dropDownClick) , for: .touchUpInside)
        return btn

    }()

    lazy  var mStackView: UIStackView = {

        let stackView = UIStackView(arrangedSubviews: [mFieldLabel, mDropDownBtn])
        stackView.alignment = .center
        stackView.distribution = .fill
        stackView.axis = .horizontal
        stackView.spacing = StackViewSpacing
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.backgroundColor = .yellow
        return stackView
    }()

    override func awakeFromNib() {
        super.awakeFromNib()

    }

    // MARK: - Init



    init(with data:[Dictionary<String,Any>], inView: UIView, parent: DropDownList?, fieldName: String , topSpacing: CGFloat )
    {
        super.init(frame: CGRect(x: 0, y: 40, width: 400, height: 50))
        setViews(fieldName: fieldName, data: data, inView: inView)
        self.setConstaintsWithTopSpacing(inView: inView,topSpace: topSpacing, parentView: inView)



    func setViews(fieldName: String, data:[Dictionary<String,Any>], inView: UIView)
    {
        self.translatesAutoresizingMaskIntoConstraints = false
        self.mDataList = data
        self.mFieldLabel.text = fieldName
        DropDown.startListeningToKeyboard()
        mDropDown.anchorView = mDropDownBtn
        self.addSubview(mStackView)
        inView.addSubview(self)

 mDropDown.selectionAction = { [unowned self] (index: Int, item: String) in
            print("Selected item: \(item) at index: \(index)")
            self.mDropDownBtn.setTitle(item, for: .normal)
            self.updateConstraints()
            self.layoutIfNeeded()
        }

    }





    // MARK: - Constraints

    func setConstaintsWithTopSpacing(inView: UIView, topSpace: CGFloat, parentView: UIView)
    {
        if (inView.translatesAutoresizingMaskIntoConstraints)
        {
            inView.translatesAutoresizingMaskIntoConstraints = false
        }


        let leadingConstraint = NSLayoutConstraint(item: self, attribute: .leading, relatedBy: NSLayoutRelation.equal, toItem: inView, attribute: .leading, multiplier: 1, constant: Margin)
        let topConstraint = NSLayoutConstraint(item: self, attribute: .top, relatedBy: NSLayoutRelation.equal, toItem: parentView, attribute: .top, multiplier: 1, constant: topSpace)
        let trailingConstraint = NSLayoutConstraint(item: self, attribute: .trailing, relatedBy: NSLayoutRelation.equal, toItem: inView, attribute: .trailing, multiplier: 1, constant: Margin)
        let heightConstranit = NSLayoutConstraint(item: self, attribute: .height, relatedBy: .greaterThanOrEqual, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 40)



        inView.addConstraints([leadingConstraint, topConstraint, trailingConstraint, heightConstranit])
        setStackViewConstraints()
    }

    func setConstaintsWithTopLayout(inView: UIView, topLayout: UILayoutSupport?)
    {
        if (inView.translatesAutoresizingMaskIntoConstraints)
        {
            inView.translatesAutoresizingMaskIntoConstraints = false
        }

        setStackViewConstraints()


        let leadingConstraint = NSLayoutConstraint(item: self, attribute: .leading, relatedBy: NSLayoutRelation.equal, toItem: inView, attribute: .leading, multiplier: 1, constant: 10)
        let topConstraint = NSLayoutConstraint(item: self, attribute: .top, relatedBy: NSLayoutRelation.equal, toItem: inView, attribute: .top, multiplier: 1, constant: 80)
        let trailingConstraint = NSLayoutConstraint(item: self, attribute: .trailing, relatedBy: NSLayoutRelation.equal, toItem: inView, attribute: .trailing, multiplier: 1, constant: 10)

        inView.addConstraints([leadingConstraint, topConstraint, trailingConstraint])





    }

    func  setStackViewConstraints()
    {



        let leadingConstraintStackView = NSLayoutConstraint(item: mStackView, attribute: .leading, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: .leading, multiplier: 1, constant: 0)
        let topConstraintStackView = NSLayoutConstraint(item: mStackView, attribute: .top, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: .top, multiplier: 1, constant: 0)
        let trailingConstraintStackView = NSLayoutConstraint(item: mStackView, attribute: .trailing, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: .trailing, multiplier: 1, constant: 0)
        let bottomConstraintStackView = NSLayoutConstraint(item: mStackView, attribute: .bottom, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: .bottom, multiplier: 1, constant: 0)

        self.addConstraints([leadingConstraintStackView, topConstraintStackView, trailingConstraintStackView, bottomConstraintStackView])
    }


}

I am creating an object of this class and subView to mainView.

let sailsOfficeDl = DropDownList(with: [dic, dic1], inView: self.view, fieldName: "Sales Office", topLayout: self.topLayoutGuide)

Answer 1

I had noticed the Same Behaviour Earlier when I Created a Subclass of UIView

we Explicitly need to set the Background color as Clear in while we Initialise the class

init(frame:CGRect,distance:CGFloat,width:CGFloat)
    {
        super.init(frame: frame)
        /// Here I need to set the BackGround color as Clear
        /// If I comment this line Output shown is output 1
        /// if I dont comment this Line Output is shown in output 2
        self.backgroundColor = UIColor.clear
        self.isUserInteractionEnabled = true
        self.distance = distance
        self.textBgColor = UIColor.red
        self.labelText = "Sample"
        self.bgColor = UIColor.black
        self.viewWidth = width
        self.textFontSize = 14
        self.frame = CGRect(x: 0, y: 0, width: (distance*2)+width, height: (distance*2)+width)
    }

Output-1

Output-2

In output-1 My whole rect becomes Black In output-2 Only my context which I had drawn is Black as I set it to black

Hope this will Help you out