添加下拉阴影到图像上的按钮点击时 - 斯威夫特的iOS

Question

我试图表现出的红色/绿色背后的阴影我的个人资料图片当我点击播放/暂停按钮。

我试过了

@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

好吧，你可以这样做：

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

Answer 2

如果设置clipsToBounds到true，这将磨圆边角处，但防止影子出现。为了解决这个问题，你可以创建两个视图。容器视图应该有阴影的，其子视图应该有圆角。

容器观点clipsToBounds设置为false，并且具有施加的阴影属性。如果你想在阴影处，以及圆角，使用UIBezierPath构造函数在roundedRect和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

接着，设置图像视图（或任何其他类型的UIView）是容器视图的相同的大小，设置clipsToBounds到true，并给它一个cornerRadius。

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

最后，请记住，使图像查看容器视图的子视图。

outerView.addSubview(myImage)