Move a View into Another view on button click in Swift iOS

Question

I am stumbled upon an issue in an application that i am making. I need to place one view into another view programmatically on button click.

Now i need to move View 1 to the centre of View 2 on a button click with an animation. I tried to reposition the View1 to View 2 but i am not able to do it properly.

This is the Final result that i am trying to achieve.

CODE FOR CREATING THE RED VIEW

    My.cellSnapshot  = snapshopOfCell(cell)
            var center = cell.center
            My.cellSnapshot!.center = center
            My.cellSnapshot!.alpha = 0.0
            ingredientsTableView.addSubview(My.cellSnapshot!)


func snapshopOfCell(inputView: UIView) -> UIView {
            UIGraphicsBeginImageContextWithOptions(inputView.bounds.size, false, 0.0)
            inputView.layer.renderInContext(UIGraphicsGetCurrentContext()!)
            let image = UIGraphicsGetImageFromCurrentImageContext() as UIImage
            UIGraphicsEndImageContext()
            let cellSnapshot : UIView = UIImageView(image: image)
            cellSnapshot.layer.masksToBounds = false
            cellSnapshot.layer.cornerRadius = 0.0
            cellSnapshot.layer.shadowOffset = CGSizeMake(-5.0, 0.0)
            cellSnapshot.layer.shadowRadius = 5.0
            cellSnapshot.layer.shadowOpacity = 0.4
            return cellSnapshot
        }

Please help me in solving the problem.

Thanks in advance

@AndréSlottaYes i am using Autolayout. View 1 is a programmatically created view. — Jobins John, Jul 03 '16 at 09:26
do you just want the views to overlap? or does the one view have to be a subview of the other one afterwards? and can you please show how you create the red view in code? — André Slotta, Jul 03 '16 at 09:30
@ranjit.x.singh I tried that one and the displacement is so fast , I need to have an animation for the displacement. — Jobins John, Jul 03 '16 at 09:34
@AndréSlotta Basically thats what i want. I need the transition to be smooth. I am not able to implement that animation — Jobins John, Jul 03 '16 at 09:34
@JobinsJohn can you show the red view's creation code please? — André Slotta, Jul 03 '16 at 09:35
@AndréSlotta I have added the code for creating red view in the question. Basically i am creating a replica of a view and the subView is to be placed over the View2 — Jobins John, Jul 03 '16 at 09:44
This should move the view for 0.5 seconds. UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: { redView.center = greenView.center }, completion: nil) — Altimir Antonov, Jul 03 '16 at 09:45
your sample code does **not** look like you use autolayout... :) — André Slotta, Jul 03 '16 at 09:45
@AndréSlotta As i told you view 1 is created programmatically and is placed on the centre of the view from which it is created. After the creation, view 1 should move to view 2. Thats what i am dying to achieve. — Jobins John, Jul 03 '16 at 09:53
@AltimirAntonov Your answer helped me to achieve what i was trying to — Jobins John, Jul 04 '16 at 04:27

score 2 · Answer 1 · answered Jul 03 '16 at 09:47

i created a sample project and set up a target view as well as a button to start the animation in storyboard like this:

then in code i added the view to move and the button target code like this:

var sourceView: UIView!
@IBOutlet weak var destinationView: UIView!

var sourceViewPositioningConstraints = [NSLayoutConstraint]()

override func viewDidLoad() {
    super.viewDidLoad()

    sourceView = UIView()
    sourceView?.backgroundColor = UIColor.redColor()

    sourceView?.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(sourceView)

    // size constraints
    NSLayoutConstraint(item: sourceView, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 0.25, constant: 0).active = true
    NSLayoutConstraint(item: sourceView, attribute: .Width, relatedBy: .Equal, toItem: sourceView, attribute: .Height, multiplier: 16/9, constant: 0).active = true

    // positioning constraints
    sourceViewPositioningConstraints += [NSLayoutConstraint(item: sourceView, attribute: .Top, relatedBy: .Equal, toItem: topLayoutGuide, attribute: .BottomMargin, multiplier: 1, constant: 0)]
    sourceViewPositioningConstraints += [NSLayoutConstraint(item: sourceView, attribute: .CenterX, relatedBy: .Equal, toItem: view, attribute: .CenterX, multiplier: 1, constant: 0)]
    NSLayoutConstraint.activateConstraints(sourceViewPositioningConstraints)
}

@IBAction func move(sender: UIButton) {
    // deactivate current positioning constraints
    NSLayoutConstraint.deactivateConstraints(sourceViewPositioningConstraints)
    sourceViewPositioningConstraints.removeAll()

    // add new positioning constraints
    sourceViewPositioningConstraints += [NSLayoutConstraint(item: sourceView, attribute: .CenterX, relatedBy: .Equal, toItem: destinationView, attribute: .CenterX, multiplier: 1, constant: 0)]
    sourceViewPositioningConstraints += [NSLayoutConstraint(item: sourceView, attribute: .CenterY, relatedBy: .Equal, toItem: destinationView, attribute: .CenterY, multiplier: 1, constant: 0)]
    NSLayoutConstraint.activateConstraints(sourceViewPositioningConstraints)

    // animate constraint changes
    UIView.animateWithDuration(1) {
        self.view.layoutIfNeeded()
    }
}

if you are not using autolayout for your movable view you can simply use something like this:

override func viewDidLoad() {
    super.viewDidLoad()

    sourceView = UIView()
    sourceView?.backgroundColor = UIColor.redColor()
    sourceView.frame = CGRect(x: 40, y: 40, width: 100, height: 100)
    view.addSubview(sourceView)

}

@IBAction func move(sender: UIButton) {
    // animate constraint changes
    UIView.animateWithDuration(1) {
        self.sourceView.center = self.destinationView.center
    }
}

Hi, I have a question here - https://stackoverflow.com/questions/63957059/how-to-move-uisearchbar-to-another-view. Can you help me solve it? — Chris Hansen, Sep 18 '20 at 17:01

score 2 · Accepted Answer · answered Jul 04 '16 at 12:26

2

You can move the view for 0.5 seconds.

UIView.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: { 
redView.center = greenView.center 
}, completion: nil)

answered Jul 04 '16 at 12:26

Altimir Antonov

4,966
4
24
26

Move a View into Another view on button click in Swift iOS

2 Answers2

Linked