ImageView Gradient behaving abnormally

Question

I have gradient(clear - black) applied to an imageview and on top of it I have a float button. Everything works fine. The only issue is, whenever there is a tap on float button, the gradient start increasing to black more and more. my gradient is clear to black from top to bottom. But on interaction, It start to slowely blacken towards upside.

I am really unable to solve this error.

This image view is in a UIcollectionResuableView. Below is the code for yhe following.

func addBlackGradientLayerprof(frame: CGRect){
    let gradient = CAGradientLayer()
    gradient.frame = frame
    let black = UIColor.init(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.65).cgColor
    gradient.colors = [UIColor.clear.cgColor, black]
    gradient.locations = [0.0, 1.0]
    self.layer.addSublayer(gradient)
}

Header View with floating button:

override func layoutSubviews() {
    super.layoutSubviews()
    profilePic.addBlackGradientLayerprof(frame: profilePic.bounds)
}

override func awakeFromNib() {
    super.awakeFromNib()
    layoutFAB()

}

func layoutFAB() {
    floaty.openAnimationType = .slideDown

    floaty.addItem("New Post", icon: UIImage(named: "photo-camera")) { item in
        self.delegate.fabUploadClicked()
    }
    floaty.addItem("Settings", icon: UIImage(named: "settingsB")) { item in
        self.delegate.fabSettingsClicked()
    }
    floaty.paddingY = (frame.height - 30) - floaty.frame.height/2
    floaty.fabDelegate = self
    floaty.buttonColor = UIColor.white
    floaty.hasShadow = true
    floaty.size = 45
    addSubview(floaty)


}

What code is being called when you tap on the button? Are you calling `addBlackGradientLayerprof` more than once? — rmaddy, Oct 29 '17 at 18:19
yes! I dont know why, But for some reason the `layoutSubviews()` is being called twice when the View loads and also whenever I close the floating button. — Aakash Dave, Oct 29 '17 at 18:23
@LeoDabus This question isn't a duplicate. The context of this question is to find why I was having mutiple layered Gradient and not, How to have a gradient. The answer did gave me another work around of my problem, It didn't solve it. I request you to remove the duplicate flag as this will be misleading to other users. — Aakash Dave, Oct 29 '17 at 19:19

score 1 · Accepted Answer · answered Oct 29 '17 at 18:26

1

layoutSubviews is bad place to do anything other than adjust a few frames as needed. It can be called many times in the lifecycle of a view. You should not be adding layers from layoutSubviews.

You should call addBlackGradientLayerprof from a place guaranteed to only be called once in the lifetime of the object. awakeFromNib would be one possible place.

answered Oct 29 '17 at 18:26

rmaddy

314,917
42
532
579

I tried it. But it leads to an issue where the gradient doestn successfully covers the image. I even posted a question about it here. https://stackoverflow.com/questions/46753710/gradient-not-covering-full-frame-swift – Aakash Dave Oct 29 '17 at 18:29
In `layoutSubviews` you can adjust the frame of the layer. Just don't add another one. – rmaddy Oct 29 '17 at 18:30
Well, As I see. I am just adding one right? I am just calling the frame once. What am I missing here. How should i deal with this? – Aakash Dave Oct 29 '17 at 18:33
1

`layoutSubviews` can be called many times, including when the frame of the view changes as well as other times. This is why you don't want to add a new layer from `layoutSubviews`. But since the view's frame can change, you need to update the layer's frame to match. – rmaddy Oct 29 '17 at 18:35
Hey, The problem is solved. And thanks for helping out. I was calling LayoutSubviews in many of my VCs. this made me point out couple other mistakes and solve them – Aakash Dave Oct 29 '17 at 19:06
Also, if any frame change is necessary in `layoutSubviews`, I would advice to wrap it into `CATransaction` with `setDisableActions(true)`. That would remove the animation effect when changing frame. – Sulthan Oct 29 '17 at 19:51

ImageView Gradient behaving abnormally

1 Answers1