Gradient effect on some portion of UIImageView

Question

I have a requirements of adding gradient over some portion (only in left and right side ) of UIImageView. I know, this can be done by using CAGradientLayer(). But I am confused with properties locations and colors.

Below is my code. It is adding gradient at top and bottom.

 if let containerView = imageView.superView {
        let gradient = CAGradientLayer(layer: containerView.layer)
        gradient.frame = containerView.bounds
        gradient.colors = [UIColor.clear.cgColor, UIColor.blue.cgColor ,UIColor.blue.cgColor, UIColor.clear.cgColor]
        gradient.locations = [0.0 ,  0.25 , 0.85 , 1.0]
        containerView.layer.mask = gradient
    }

Thanks In Advance

Can you share result of this code ? and what do you expect ? — Umair Afzal, Dec 07 '16 at 09:31

jignesh Vadadoriya · Answer 1 · 2016-12-07T09:59:17.623

1

You need to create CAGradientLayer layer like this and in Any view

let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRectMake(0, 0,300, 380)
gradientLayer.colors = [UIColor(red:55.0/255, green:149.0/255, blue:227.0/255, alpha:1.0).CGColor,UIColor(red:20.0/255, green:77.0/255, blue:120.0/255, alpha:1.0).CGColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
imgView.layer.insertSublayer(gradientLayer, atIndex: 0)

For All direction like top-buttom,left-right and vice versa just you need to change startPoint And endPoint Output of above code is

edited Dec 07 '16 at 09:59

answered Dec 07 '16 at 09:41

jignesh Vadadoriya

3,244
3
18
29

Above code adds gradient in bottom of your view, But I want to add gradient in left and right side of my view. – Sundeep Saluja Dec 07 '16 at 09:44
Will be really helpful for me – Sundeep Saluja Dec 07 '16 at 09:45
for All direction just you need to change startpoint And End point for left to right gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0) – jignesh Vadadoriya Dec 07 '16 at 09:52
Have you try my Answer? – jignesh Vadadoriya Dec 07 '16 at 10:03
Hi Jignesh, Thanks a lot, I tried your answer. Now I am able to add gradient in left and right side of my view. – Sundeep Saluja Dec 07 '16 at 10:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129990/discussion-between-sundeep-saluja-and-jignesh-vadadoriya). – Sundeep Saluja Dec 07 '16 at 10:13
Jignesh, Can you please tell me about colors also ? actually, I need to add a white color with alpha 0.5(almost half opaque) to both side(left and right) – Sundeep Saluja Dec 07 '16 at 10:17
1

can you add image which you want in color please – jignesh Vadadoriya Dec 07 '16 at 10:20
Not aware, Can I add image , here in comments? – Sundeep Saluja Dec 07 '16 at 10:29
join me in chat room where you can upload image – jignesh Vadadoriya Dec 07 '16 at 10:35

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

gradient.colors

gradient.colorsproperty is used to define the color of each gradient

If you see the documentation,

gradient.locations is used to define gradient stop points between your colors

Documentation: An optional array of NSNumber objects defining the location of each gradient stop as a value in the range [0,1]

is this you are looking for?

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 07 '16 at 09:36

Taj Ahmed

895
11
19

Yes, I saw the documentation, But not able to guess, exact location for left and right side. – Sundeep Saluja Dec 07 '16 at 09:37

Gradient effect on some portion of UIImageView

2 Answers2

Linked