简体   繁体   中英

Why does my UIView animation doesn't work after I add a subview to it?

I'm making a toast that slides from the top of the screen like this:

吐司

But when I add a UILabel as the subview for the toast container, the toast won't animate and show anymore. Here's my showToast() function:

func showToast(message: String) {
    let screenSize = UIScreen.main.bounds.size
    let containerView = UIView()
    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.backgroundColor = UIColor.black.withAlphaComponent(0.6)
    containerView.alpha = 1.0
    containerView.clipsToBounds = true
    containerView.layer.cornerRadius = 10
    containerView.frame = CGRect(x: 0, y: 0, width: screenSize.width - 16, height: 50)
    containerView.center.x = view.center.x
    // If I add this UILabel as a subview the animation doesn't work
    let toastLbl = UILabel()
    toastLbl.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(toastLbl)
    toastLbl.textColor = UIColor.white
    toastLbl.font = .regularMontserrat(ofSize: 14)
    toastLbl.textAlignment = .center
    toastLbl.text = message
    toastLbl.numberOfLines = 1
    // If I add this UILabel as a subview the animation doesn't work
    view.addSubview(containerView)
    
    UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
        containerView.frame.origin.y = 50
    }, completion: { _ in
        UIView.animate(withDuration: 0.5, delay: 1.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
            containerView.frame.origin.y = -50
        }, completion: { _ in
            containerView.removeFromSuperview()
        })
    })
}

Is there anyway to solve this?

Now that I tried using auto-layout again, it works as I expected. I think I put the a wrong value to the constraint constants so it doesn't work properly. Thank you @Gereon for the suggestion.

I divided the showToast() function into 2 seperate functions like this:

func makeToast(message: String) -> UIView {
        let screenSize = UIScreen.main.bounds.size
        let containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.backgroundColor = .CREAM_ORANGE
        containerView.alpha = 1.0
        containerView.clipsToBounds = true
        containerView.layer.cornerRadius = 10
        containerView.frame = CGRect(x: 0, y: 0, width: screenSize.width - 32, height: 50)
        containerView.center.x = view.center.x
        containerView.alpha = 0
        let toastLbl = UILabel()
        toastLbl.translatesAutoresizingMaskIntoConstraints = false
        toastLbl.textColor = UIColor.white
        toastLbl.font = .regularMontserrat(ofSize: 14)
        toastLbl.textAlignment = .center
        toastLbl.text = message
        toastLbl.numberOfLines = 1
        view.addSubview(containerView)
        containerView.addSubview(toastLbl)
        NSLayoutConstraint.activate([
            containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
            containerView.heightAnchor.constraint(equalToConstant: 50),
            toastLbl.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 0),
            toastLbl.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: 0),
            toastLbl.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 0),
            toastLbl.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: 0)
        ])
        return containerView
    }

func showToast(message: String) {
        let toast = makeToast(message: message)
        UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
            toast.alpha = 1
            toast.frame.origin.y = 50
        }, completion: { _ in
            UIView.animate(withDuration: 0.5, delay: 1.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
                toast.alpha = 0
                toast.frame.origin.y = -50
            }, completion: { _ in
                toast.removeFromSuperview()
            })
        })
    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM