单击按钮时向图像添加阴影-iOS Swift

Question

I'm trying to show the shadow of red/green behind my profile image when I clicked play/pause button.

I've tried

@objc func toggleButton(_ sender: UIButton) {

    //Play
    if sender.image(for: .normal) == UIImage(named: "play") {

        profileImage.layer.borderColor  = UIColor(hexString: "#8e8e8e").cgColor
        profileImage.layer.shadowColor = UIColor(hexString: "#099d57").cgColor
        profileImage.layer.cornerRadius = profileImage.frame.width / 2
        profileImage.layer.shadowOpacity = 1
        profileImage.layer.shadowOffset = CGSize.zero
        profileImage.layer.shadowRadius = 10
        profileImage.layer.shouldRasterize = true
        profileImage.layer.masksToBounds = false

    } else {
    //Pause

        profileImage.layer.borderColor  = UIColor(hexString: "#434343").cgColor
        profileImage.layer.shadowColor = UIColor(hexString: "#df544a").cgColor
        profileImage.layer.cornerRadius = profileImage.frame.width / 2
        profileImage.layer.shadowOpacity = 1
        profileImage.layer.shadowOffset = CGSize.zero
        profileImage.layer.shadowRadius = 10
        profileImage.layer.shouldRasterize = true
        profileImage.layer.masksToBounds = false
    }
}

I couldn't seem to get it to work. Can someone please give me a little hints on how to achive what I am after.

Answer 1

If you set clipsToBounds to true , this will round the corners but prevent the shadow from appearing. In order to resolve this, you can create two views. The container view should have the shadow, and its subview should have the rounded corners.

The container view has clipsToBounds set to false , and has the shadow properties applied. If you want the shadow to be rounded as well, use the UIBezierPath constructor that takes in a roundedRect and cornerRadius .

let outerView = UIView(frame: profileImage.layer.frame)
outerView.clipsToBounds = false
outerView.layer.shadowColor = UIColor.black.cgColor
outerView.layer.shadowOpacity = 1
outerView.layer.shadowOffset = CGSize.zero
outerView.layer.shadowRadius = 10
outerView.layer.shadowPath = UIBezierPath(roundedRect: outerView.bounds, cornerRadius: 10).cgPath

Next, set the image view (or any other type of UIView ) to be the same size of the container view, set clipsToBounds to true , and give it a cornerRadius .

let myImage = UIImageView(frame: outerView.bounds)
myImage.clipsToBounds = true
myImage.layer.cornerRadius = 10

Finally, remember to make the image view a subview of the container view.

outerView.addSubview(myImage)

Answer 2

Ok, you can do something like this:

// Replace this:
@IBOutlet weak var profileImage: UIImageView!
// With this:
@IBOutlet weak var profileImageContainer: UIView! // Change this to a UIView both in your storyboard or nib and here.
private weak var profileImageView: UIImageView? // Add this new variable

Then in your awake from nib method:

override func awakeFromNib() {
        super.awakeFromNib()

        /* rest of your setup */
        this.setupProfileImageView()    
    }

private func setupProfileImageView() -> Void {
    if let superview = self.profileImageContainer {
        superview.clipsToBounds = false
        let imageView = UIImageView(frame: superview.bounds)
        superview.addSubview(imageView)
        imageView.layer.cornerRadius = imageView.frame.height / 2.0
        imageView.layer.borderColor = // your color
        imageView.clipsToBounds = true
        imageView.contentMode = .scaleAspectFill
        imageView.image = //your profile image here
        self.profileImageView = imageView
        // You may add constraints to pin your imageview here if you'd like. I would recommend that.
    }
}

@objc func toggleButton(_ sender: UIButton) {

    // Here I would try to compare the state if you are updating your state correctly instead of comparing the image. If this doesn't work, you may stick to what works for you
    if sender.state == .normal {

        self.profileImageView?.layer.borderColor  = UIColor(hexString: "#8e8e8e").cgColor
        self.profileImageContainer.layer.shadowColor = UIColor(hexString: "#099d57").cgColor
        self.profileImageContainer.layer.shadowOpacity = 1
        self.profileImageContainer.layer.shadowOffset = CGSize.zero
        self.profileImageContainer.layer.shadowRadius = 10
        self.profileImageContainer.layer.shouldRasterize = true
    } else {
    //Pause
        self.profileImageContainer.layer.borderColor  = UIColor(hexString: "#434343").cgColor
        self.profileImageContainer.layer.shadowColor = UIColor(hexString: "#df544a").cgColor
        self.profileImageContainer.layer.shadowOpacity = 1
        self.profileImageContainer.layer.shadowOffset = CGSize.zero
        self.profileImageContainer.layer.shadowRadius = 10
        self.profileImageContainer.layer.shouldRasterize = true
    }
}