Ben Smith
Ben Smith

Reputation: 159

How to properly enable and disable constraint in one view controller on button click

I have a UIView on Storyboard as a subview of ViewController and I have some fields in that view, that has to change its position on button click. So I changed the so I made an outlet of each FiledsView and gave them constraints programmatically but the issue is they are overlapping and conflicting with each other when I click on other buttons.

Here is the Layout I want to make Show

Here I put all the fields inside another view

Show

This is the code

import UIKit

class AddOfferTabViewController: UIViewController {

    @IBOutlet weak var formBaseView: UIView!
    @IBOutlet weak var titleFieldView: RoundView!
    @IBOutlet weak var descriptionView: RoundView!
    @IBOutlet weak var pointsView: RoundView!
    @IBOutlet weak var startEndDateStackView: UIStackView!
    @IBOutlet weak var maxCharLimitStackView: UIStackView!
    @IBOutlet weak var amountView: RoundView!

    @IBOutlet weak var textViewDescription: TextViewWithPlaceholder!
    @IBOutlet weak var textFieldAmount: UITextField!


    var buttonClicked:String!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tabBarController?.tabBar.isHidden = true

       // setupCashDiscountView(isLayoutActive: true)
        setupFreebeView(isLayoutActive: true)

    }


    @IBAction func addOfferButtonsActions(_ sender: UIButton) {

        switch sender.tag {
        case 1: //FreeBe
            print("Freebe")
            buttonClicked = "Freebe"
            setupCashDiscountView(isLayoutActive: false)
            setupPercentDiscountView(isLayoutActive: false)
            setupFreebeView(isLayoutActive: true)
        case 2: //Cash Discount
            print("Cash Discount")
            buttonClicked = "Cash"
            setupFreebeView(isLayoutActive: false)
            setupPercentDiscountView(isLayoutActive: false)
            setupCashDiscountView(isLayoutActive: true)

        case 3: //% Discount
            print("% Discount")
            buttonClicked = "percent"
            setupFreebeView(isLayoutActive: false)
            setupCashDiscountView(isLayoutActive: false)
            setupPercentDiscountView(isLayoutActive: true)
        default:
            print("there is something wrong")
        }

    }


    //MARK:Setup FreebeView
    func setupFreebeView(isLayoutActive:Bool){

        amountView.isHidden = true
        textViewDescription.placeholderText = "Any T&C"

        setupInputFields(fieldView: titleFieldView, topConstraints: formBaseView.topAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 8, height: 44, isActive: isLayoutActive) //Title Input Field
        setupInputFields(fieldView: descriptionView, topConstraints: titleFieldView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, height: 95, isActive: isLayoutActive) //Description View
        setupMaxCharStackView(formStackView: maxCharLimitStackView, topConstraints: descriptionView.bottomAnchor, trailingSpace: 0, topSpace: 10, isActive: isLayoutActive) //Character Limit View

        setupInputFields(fieldView: pointsView, topConstraints: descriptionView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 40, height: 44, isActive: isLayoutActive) //PointsView

        setupStartEndDateStackView(formStackView: startEndDateStackView, topConstraints: pointsView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, isActive: isLayoutActive) //StartDate Endate



    }

    //MARK:Setup CashDiscount
    func setupCashDiscountView(isLayoutActive:Bool){

        amountView.isHidden = false
        textViewDescription.placeholderText = "Description"

        setupInputFields(fieldView: amountView, topConstraints: formBaseView.topAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 8, height: 44, isActive: isLayoutActive) //Amount View

        setupInputFields(fieldView: pointsView, topConstraints: amountView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, height: 44, isActive: isLayoutActive) //Points View

        setupStartEndDateStackView(formStackView: startEndDateStackView, topConstraints: pointsView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, isActive: isLayoutActive) //StartDate Endate

         setupInputFields(fieldView: titleFieldView, topConstraints: startEndDateStackView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, height: 44, isActive: isLayoutActive) //Title View

        setupInputFields(fieldView: descriptionView, topConstraints: titleFieldView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, height: 95, isActive: isLayoutActive) //Description View

        setupMaxCharStackView(formStackView: maxCharLimitStackView, topConstraints: descriptionView.bottomAnchor, trailingSpace: 0, topSpace: 10, isActive: isLayoutActive) //Character Limit View


    }


    //MARK:Setup % Discount
    func setupPercentDiscountView(isLayoutActive:Bool){

        amountView.isHidden = false
        textViewDescription.placeholderText = "Description"

        setupInputFields(fieldView: amountView, topConstraints: formBaseView.topAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 8, height: 44, isActive: isLayoutActive) //Amount View

        setupInputFields(fieldView: pointsView, topConstraints: amountView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, height: 44, isActive: isLayoutActive) //Points View

        setupStartEndDateStackView(formStackView: startEndDateStackView, topConstraints: pointsView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, isActive: isLayoutActive) //StartDate Endate

        setupInputFields(fieldView: titleFieldView, topConstraints: startEndDateStackView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, height: 44, isActive: isLayoutActive) //Title View

        setupInputFields(fieldView: descriptionView, topConstraints: titleFieldView.bottomAnchor, leadingSpace: 0, trailingSpace: 0, topSpace: 15, height: 95, isActive: isLayoutActive) //Description View

        setupMaxCharStackView(formStackView: maxCharLimitStackView, topConstraints: descriptionView.bottomAnchor, trailingSpace: 0, topSpace: 10, isActive: isLayoutActive) //Character Limit View

    }

    //MARK: SetupInputFields function
    func setupInputFields(fieldView:UIView,topConstraints:NSLayoutAnchor<NSLayoutYAxisAnchor>,leadingSpace:CGFloat,trailingSpace:CGFloat,topSpace:CGFloat,height:CGFloat,isActive:Bool){
        fieldView.translatesAutoresizingMaskIntoConstraints = false //Make it false for working of constraints
        fieldView.topAnchor.constraint(equalTo: topConstraints,constant: topSpace).isActive = isActive
        fieldView.leadingAnchor.constraint(equalTo: formBaseView.leadingAnchor,constant: leadingSpace).isActive = isActive
        fieldView.trailingAnchor.constraint(equalTo: formBaseView.trailingAnchor,constant: trailingSpace).isActive = isActive
        fieldView.heightAnchor.constraint(equalToConstant: height).isActive = isActive
    //  fieldView.layoutIfNeeded()
    }

    //MARK: Setup MaxCharacter StackView function
    func setupMaxCharStackView(formStackView:UIStackView,topConstraints:NSLayoutAnchor<NSLayoutYAxisAnchor>,trailingSpace:CGFloat,topSpace:CGFloat,isActive:Bool){
        formStackView.translatesAutoresizingMaskIntoConstraints = false //Make it false for working of constraints
        formStackView.topAnchor.constraint(equalTo: topConstraints,constant: topSpace).isActive = isActive
        formStackView.trailingAnchor.constraint(equalTo: formBaseView.trailingAnchor,constant: trailingSpace).isActive = isActive
    }

    //MARK: Setup StartDate EndDate StackView function
    func setupStartEndDateStackView(formStackView:UIStackView,topConstraints:NSLayoutAnchor<NSLayoutYAxisAnchor>,leadingSpace:CGFloat? = nil,trailingSpace:CGFloat,topSpace:CGFloat,isActive:Bool){

        formStackView.translatesAutoresizingMaskIntoConstraints = false //Make it false for working of constraints
        formStackView.topAnchor.constraint(equalTo: topConstraints,constant: topSpace).isActive = isActive
        formStackView.leadingAnchor.constraint(equalTo: formBaseView.leadingAnchor,constant: leadingSpace!).isActive = isActive
        formStackView.trailingAnchor.constraint(equalTo: formBaseView.trailingAnchor,constant: trailingSpace).isActive = isActive

    }

}

Upvotes: 0

Views: 429

Answers (1)

Shehata Gamal
Shehata Gamal

Reputation: 100533

Problem is each time you click the button 1 of the cases fire which eventualy call setupInputFields and cause re-addition of new constraints which may conflict with old ones , so either access old constraints and delete them or create 2 arrays of possible variations and play with activate/deactivate

Upvotes: 1

Related Questions