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

Question

我试图在单击 play/pause 按钮时在个人资料图片后面显示 red/green 的阴影。

我试过了

@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
    }
}

我似乎无法让它工作。有人可以给我一些关于如何实现我所追求的目标的提示吗？

Answer 1

如果您将 clipsToBounds 设置为 true，这将使拐角变圆但不会出现阴影。为了解决这个问题，您可以创建两个视图。容器视图应该有阴影，它的子视图应该有圆角。

容器视图已 clipsToBounds 设置为 false，并应用了阴影属性。如果您还希望阴影也变圆，请使用接受 roundedRect 和 cornerRadius.

的 UIBezierPath 构造函数

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

接下来，将图像视图（或任何其他类型的 UIView）设置为与容器视图大小相同，将 clipsToBounds 设置为 true，并给它一个cornerRadius.

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

最后，记得让图像视图成为容器视图的子视图。

outerView.addSubview(myImage)

Answer 2

好的，你可以这样做：

// 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

然后在你的笔尖唤醒方法中：

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
    }
}

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

Add drop-shadow to an image when click on a button - iOS Swift

uitableview

uiimageview

uiimage

ios

swift