Use slider to control width and height of a nslayoutConstraint

Question

My code is in swift , I want to use a slider (sd) to control the width and the height of imageview pic. What I tried to below is not working. As soon as I move the slider both sd and pic disaper. WHen the slider move pic should gradually change its width and height. I am seeing a percentage change in the debugg area but its not working on pic. My code uses no storyboards.

import UIKit

class ViewController: UIViewController {
var sd = UISlider()
var pic = UIImageView()
var start = [NSLayoutConstraint]()
var change = [NSLayoutConstraint]()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.

    [sd,pic].forEach{
        $0.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview($0)

        $0.backgroundColor = .systemOrange
    }

    start = [
        pic.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :150),
        pic.topAnchor.constraint(equalTo: view.centerYAnchor, constant : -225),
        pic.widthAnchor.constraint(equalToConstant: 300),
        pic.heightAnchor.constraint(equalToConstant: 450),

        sd.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :150),
        sd.topAnchor.constraint(equalTo: view.centerYAnchor, constant : +250),
        sd.widthAnchor.constraint(equalToConstant: 100),
        sd.heightAnchor.constraint(equalToConstant: 40)
    ]
    NSLayoutConstraint.activate(start)

    sd.addTarget(self, action: #selector(moveRight), for: .allEvents)





}


@objc func moveRight() {

        NSLayoutConstraint.deactivate(start)

    let jessicaAlba = CGFloat(sd.value)
    print(jessicaAlba)


    NSLayoutConstraint.activate ([

        pic.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :150),
        pic.topAnchor.constraint(equalTo: view.centerYAnchor, constant : -225),
        pic.widthAnchor.constraint(equalToConstant: jessicaAlba),
        pic.heightAnchor.constraint(equalToConstant: jessicaAlba),

        sd.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :150),
        sd.topAnchor.constraint(equalTo: view.centerYAnchor, constant : +250),
        sd.widthAnchor.constraint(equalToConstant: 100),
        sd.heightAnchor.constraint(equalToConstant: 40)

    ])
      NSLayoutConstraint.activate(change)


}


}

Answer 1

There are two problems with your code.

1 ) You had set the widthAnchor and heightAnchor constraints to constants to your CGFloat(sd.value) which would range between 0 and 1. That's why it seems like your pic disappered. But actually, it's width and height were being set to a value less than 1.

2 ) You haven't deactivated the previously set constraint from moveRight function.

Try the sample snippet below,

    @objc func moveRight() {
        NSLayoutConstraint.deactivate(start)

        let jessicaAlba = 300 + ( 300 * CGFloat(sd.value) )
        print(CGFloat(sd.value))

        start = [

            pic.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :150),
            pic.topAnchor.constraint(equalTo: view.centerYAnchor, constant : -225),
            pic.widthAnchor.constraint(equalToConstant: jessicaAlba),
            pic.heightAnchor.constraint(equalToConstant: jessicaAlba),

            sd.trailingAnchor.constraint(equalTo: view.centerXAnchor, constant :150),
            sd.topAnchor.constraint(equalTo: view.centerYAnchor, constant : +250),
            sd.widthAnchor.constraint(equalToConstant: 100),
            sd.heightAnchor.constraint(equalToConstant: 40)

        ]
        NSLayoutConstraint.activate (start)
    }