CosmicMind / Material

A UI/UX framework for creating beautiful applications.
http://cosmicmind.com
MIT License
12k stars 1.26k forks source link

PulseView not working with layer changes #837

Closed chanonly123 closed 7 years ago

chanonly123 commented 7 years ago

@IBDesignable class CardView: PulseView {

@IBInspectable var shadowOffsetWidth: CGFloat = 0
@IBInspectable var shadowOffsetHeight: CGFloat = 1.5
@IBInspectable var cardCornerRadius: CGFloat = 7

override func layoutSubviews() {
    let shadowColor: UIColor? = UIColor.darkGray
    let shadowOpacity: Float = 0.5
    layer.cornerRadius = cardCornerRadius
    let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cardCornerRadius)
    layer.masksToBounds = false
    layer.shadowColor = shadowColor?.cgColor
    layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight);
    layer.shadowOpacity = shadowOpacity
    layer.shadowPath = shadowPath.cgPath
    for view in subviews {
        view.layer.cornerRadius = cardCornerRadius
        view.layer.masksToBounds = true
        break
    }
    pulseOpacity = 0.5
    pulseColor = .gray
    depthPreset = .depth1
    pulseAnimation = .centerWithBacking
}

}

adamdahan commented 7 years ago

@chanonly123 missing a call to super in layoutSubviews.

adamdahan commented 7 years ago

@chanonly123 Also your for loop is in a dangerous place. Layout subviews gets called multiple times. And because you are just breaking out of it. Your for loop has no value. You can achieve the same thing by simply doing

`let subview = subviews.first subview.layer.cornerRadius = cardCornerRadius

// Note maskToBounds is useless too `

daniel-jonathan commented 7 years ago

@chanonly123 I think there is a better approach to what you are trying to do. Would you please explain your goal with this code?

chanonly123 commented 7 years ago

Thanks for reply. My goal is to use the touch pulse effect with any UIView. (here with CardView).

daniel-jonathan commented 7 years ago

The Card already inherits from the PulseView. So the pulse effect is already there. Just set the pulseAnimation property. To set the pulse effect is not the best idea as it adds two layers to each view making it an expensive addition. This is why it is isolated to its own view type. Most major components inherit or implement the pulse effect in the optimal way.

daniel-jonathan commented 7 years ago

Let's move this issue to Material GItter. As this is more of a conversation for there :)

hardikamal commented 5 months ago

@chanonly123 - Were you able to achieve this? Even I am trying something similar.