CODEWITHSUNDEEP
iosswiftconstraintsnslayoutconstraintuipangesturerecognizer
James
James

Reputation: 1177

Create Constraints to reposition the button on the view resized programmatically

I'm working on an app that resizes shapes. I'm using views for example.

I drew my view:

enter image description here

And programmatically created a button and added a UIPanGestureRecognizer:

import UIKit

class ViewController: UIViewController {

    @IBOutlet var rect: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let rectFrame = rect.frame
        let selectorColor = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.700)

        let resizeTopLeft = UIButton(frame: CGRect(x: rectFrame.size.width - 20, y: rectFrame.size.height - 20, width: 20, height: 20))
        resizeTopLeft.backgroundColor = selectorColor

        let panTopLeft = UIPanGestureRecognizer(target: self, action: "panTopLeft:")
        resizeTopLeft.addGestureRecognizer(panTopLeft)

        rect.addSubview(resizeTopLeft)
    }

    func panTopLeft(gesture: UIPanGestureRecognizer){
        let location = gesture.locationInView(rect)
        rect.frame.size = CGSize(width: location.x + 20, height: location.y + 20)
    }
}

At run time, it is presented as follows:

enter image description here

When the move across the screen button, the view resizes as expected. But the button is still in the same place.

And this is the problem: I need you to resize the view when the button is positioned as a Constraints. I tried to make several Constraints, in nothing worked as expected.

My question: How do I create Constraints to reposition the button on the view resized programmatically?

Upvotes: 0

Views: 220

Answers (1)

Johnykutty
Johnykutty

Reputation: 12829

Here you should use auto layout. Otherwise you should set position of button also in t pan gesture selector.

Here is my solution with auto layout.

Step 1 : Add leading, top, width and height constraints for your view. Like enter image description here

Step 2 : Connect the width and height constrains via IBOutlet. like

 @IBOutlet weak var rectHeightConstraint: NSLayoutConstraint!
 @IBOutlet weak var rectWidthConstraint: NSLayoutConstraint!

Step 3 : Add your button with auto layout constraints

    //Create UIButton
    let selectorColor = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0.700)
    let resizeTopLeft = UIButton()
    resizeTopLeft.backgroundColor = selectorColor
    resizeTopLeft.translatesAutoresizingMaskIntoConstraints = false

    //Add gesture recognizer
    let panTopLeft = UIPanGestureRecognizer(target: self, action: "panTopLeft:")
    resizeTopLeft.addGestureRecognizer(panTopLeft)

    rect.addSubview(resizeTopLeft)

    //Add auto layout constraints for the button
    let views = ["resizeTopLeft" : resizeTopLeft]

    let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:[resizeTopLeft(20)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
    self.rect.addConstraints(horizontalConstraints)

    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:[resizeTopLeft(20)]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
    self.rect.addConstraints(verticalConstraints)

Step 4 : Update height and width constraints in pan gesture method.

func panTopLeft(gesture: UIPanGestureRecognizer) {
    let location = gesture.locationInView(rect)
    //To avoid zero sized view.
    if (location.y < 0) || (location.x < 0) {
        return
    }
    rectHeightConstraint.constant = location.y + 20
    rectWidthConstraint.constant = location.x + 20
}

Upvotes: 1

Related Questions