Search code examples
swiftslidernslayoutconstraintfixed

create constraint where only the trailing anchor can be shrink or expand


You can see in my gif below that the code below makes both the left and right side. What I want to do is only increase my right side. You can see in the gif where the red mark is of the side of I am only trying to increase it on the right side. I dont know how to just increase the right side and have the top left and bottom sides fixed.

enter image description here

import UIKit
class ViewController: UIViewController{
    
    var pic = UIView()
    var slizer = UISlider()
    var slidermultiplier: CGFloat = 0.3
    var widthConstraints: NSLayoutConstraint?

    override func viewDidLoad() {
        super.viewDidLoad()
        widthConstraints = pic.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: slidermultiplier)
        
        [pic,slizer].forEach{
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
        }
        NSLayoutConstraint.activate([
            pic.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            pic.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            pic.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.3),
            widthConstraints!,
            
            slizer.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            slizer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            slizer.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.2),
            slizer.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: 1),
        ])
        
        pic.backgroundColor = .orange
        // changed to .valueChanged
        slizer.addTarget(self, action: #selector(increase), for: .valueChanged)
    }

    @objc func increase() {
        slidermultiplier = CGFloat(slizer.value)
        widthConstraints?.isActive = false
        widthConstraints = pic.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: slidermultiplier)
        widthConstraints?.isActive = true
    }
}

Solution

  • As I already mentioned in my comment above, all you need is to remove pic.centerYAnchor.constraint(equalTo: view.centerYAnchor) constraint and add pic.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: whatver_value_you_think_is_correct) for constant you can specify whatever value you see perfect your use case. If not sure what value to specify start with 0 :)

    override func viewDidLoad() {
            super.viewDidLoad()
            widthConstraints = pic.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: slidermultiplier)
    
            [pic,slizer].forEach{
                $0.translatesAutoresizingMaskIntoConstraints = false
                view.addSubview($0)
            }
            NSLayoutConstraint.activate([
                pic.centerYAnchor.constraint(equalTo: view.centerYAnchor),
                pic.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: whatver_value_you_think_is_correct),
                pic.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.3),
                widthConstraints!,
    
                slizer.bottomAnchor.constraint(equalTo: view.bottomAnchor),
                slizer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                slizer.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.2),
                slizer.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: 1),
            ])
    
            pic.backgroundColor = .orange
            // changed to .valueChanged
            slizer.addTarget(self, action: #selector(increase), for: .valueChanged)
        }
    

    Your existing increase method should work fine as is