Making an animation to slide and hide/show an UIView(swift 5)

Question

I want to add animation to these two views.

1. Red UIView
2. Green UIView

My storyboard look like this

From the picture I want to add an animation when click on these two views.

First start with hide red UIView.

Action : 1

when i click on green view i want green uiview silde to the right side until it disappear

and the red UIView will slide out from the right side immediately.

red uiview slide from right side

and stopp when it is at that point in the storyboard and hide green UIView.

Action : 2

and when i click on red view i want it to slide right until it disappears. Show green UIView and comes out from the right corner as well and hide red UIView.

red UIView slide out

My Code

import UIKit

class TestViewCell: UICollectionViewCell {

    @IBOutlet weak var bgView: UIView!

    @IBOutlet weak var bgAlertView: UIView!
    @IBOutlet weak var imgAlert: UIImageView!

    @IBOutlet weak var bgAlreadyAlertView: UIView!
    @IBOutlet weak var imgAlreadyAlert: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()

        //Make an action when tap on bgAlertView
        let actionBgAlert : Selector = #selector(self.actionBgAlert)
        let viewPostsViewGesture = UITapGestureRecognizer(target: self, action: actionBgAlert)
        bgAlertView.isUserInteractionEnabled = true
        bgAlertView.addGestureRecognizer(viewPostsViewGesture)

        //Make an action when tap on bgAlreadyAlertView
        let actionBgAlreadyAlert : Selector = #selector(self.actionBgAlreadyAlert)
        let viewAlreadyViewGesture = UITapGestureRecognizer(target: self, action: actionBgAlreadyAlert)
        bgAlreadyAlertView.isUserInteractionEnabled = true
        bgAlreadyAlertView.addGestureRecognizer(viewAlreadyViewGesture)

    }

    //action1
    @objc func actionBgAlert(sender: UITapGestureRecognizer){

        if imgAlert.image == #imageLiteral(resourceName: "alarm") {

            self.bgAlertView.isHidden = true
            self.bgAlreadyAlertView.isHidden = false 

    }

    //action2
    @objc func actionBgAlreadyAlert(sender: UITapGestureRecognizer){

        if imgAlreadyAlert.image == #imageLiteral(resourceName: "alarmedMain") {

            self.bgAlertView.isHidden = false
            self.bgAlreadyAlertView.isHidden = true 

    }

}

Answer 1

In the storyboard set constraints on the size of the views. Set constraints from the right side of the red view and green view from the right side of the superview they share. Define some constants for the values needed for both positions for both views. Then something like this:

    @IBOutlet weak var greenConstraint : NSLayoutConstraint
    @IBOutlet weak var redConstraint : NSLayoutConstraint

    let greenSlideOutValue = -2000.0 // big enough to get green view offscreen
    let redSlideInValue = 0.0 // aligns red view right edge to superview

    let greenSlideInValue = 100.0 // puts green view onscreen offset from right edge
    let redSlideOutValue = -2500.0 // big enough to get red view offscreen.

    UIView.animate(withDuration: 0.75, delay: 1.0, options: .curveEaseOut, animations: {
          greenConstraint.constant = greenSlideOutValue
          redConstraint.constant = redSlideInValue
          self.view.layoutIfNeeded()
        }, completion: { finished in
          print(“slide green out, red in”)
        })

Do this in the event handler for say a tap or gesture recognizer associated with the views. Do similar for the red view event(s)

Code isn’t compiled and is just typed in but should get you started.