background Gradient : linear left to right in objective C

Question

My client wants the background View with this gradient effect background Gradient : rgb(118,118,118) | #ffffff | rgb(198,198,197) linear left to right I have tried this way but it is happening in Vertical direction I want it in Horizontal way

UIColor *leftColor = [UIColor colorWithRed:118.0/255.0 green:118.0/255.0 blue:118.0/255.0 alpha:1.0];
UIColor *middleColor = [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0];
UIColor *rightColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:197.0/255.0 alpha:1.0];

// Create the gradient
CAGradientLayer *theViewGradient = [CAGradientLayer layer];
theViewGradient.colors = [NSArray arrayWithObjects: (id)leftColor.CGColor, (id)middleColor.CGColor,(id)rightColor.CGColor, nil];
theViewGradient.frame = self.view.bounds;
//Add gradient to view
[self.view.layer insertSublayer:theViewGradient atIndex:0];

Like this ??

[gradient setStartPoint:CGPointMake(0, 0)]; [gradient setEndPoint:CGPointMake(0, 1)]; add start point and end point — Harshal Valanda, Feb 27 '17 at 09:58
@ harshal valance it helped theViewGradient.startPoint = CGPointMake(0.0, 0.0); theViewGradient.endPoint = CGPointMake(1.0, 0.0); Thanks — Harshit Goel, Feb 27 '17 at 10:02

score 33 · Accepted Answer · answered Feb 27 '17 at 10:06

You need to set the startPoint and endPoint property of your gradientLayer. They represent the start coordinates of your first color and the coordinates of the end of your last color.

They are both CGPoints and their x and y should have values between 0.0 et 1.0.

By default the startPoint has these coordinates (0.5, 0.0), while the endPoint has those (0.5, 1.0).

(0.0, 0.0) is the top left corner while (1.0, 1.0) is the bottom right corner

so try:

theViewGradient.startPoint = CGPointMake(0.0, 0.5);
theViewGradient.endPoint = CGPointMake(1.0, 0.5);

score 8 · Answer 2 · edited Sep 24 '20 at 14:31

8

In Swift 3.0 & 4.0, to go from left to right:

    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

edited Sep 24 '20 at 14:31

Julio

483
1
4
17

answered Mar 19 '18 at 18:58

Chatar Veer Suthar

15,541
26
90
154

score 3 · Answer 3 · answered Nov 22 '17 at 08:22

 **The start and end points of the gradient when drawn into the layer's
 coordinate space. The start point corresponds to the first gradient
 stop, the end point to the last gradient stop. Both points are
 defined in a unit coordinate space that is then mapped to the
 layer's bounds rectangle when drawn. (i.e. [0,0] is the bottom-left
 corner of the layer, [1,1] is the top-right corner.).The default values
 are [.5,0] and [.5,1] respectively.** 

theViewGradient.startPoint = CGPointMake(0.0, 0.5);
theViewGradient.endPoint = CGPointMake(1.0, 0.5);

score 2 · Answer 4 · answered Jul 03 '21 at 17:11

 enum GradiantDirection {
        case leftToRight
        case rightToLeft
        case topToBottom
        case bottomToTop
    }
    
 class  func setGradiantColor(view : UIView, topColor : UIColor, bottomColor:UIColor, cornerRadius : CGFloat = 0.0,gradiantDirection : GradiantDirection = .topToBottom )
    {
        
        view.layer.sublayers?.filter{ $0 is CAGradientLayer }.forEach{ $0.removeFromSuperlayer() }
        
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.colors = [topColor.cgColor,bottomColor.cgColor]
        gradient.frame = view.bounds
        
        switch gradiantDirection {
        case .topToBottom:
            gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
            gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
        case .bottomToTop:
            gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
        case .leftToRight:
            gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        case .rightToLeft:
            gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
        }
        
        gradient.masksToBounds = true
        let gradientLayer = CAGradientLayer()
        gradientLayer.cornerRadius = cornerRadius
        gradient.rasterizationScale = 100
        view.layer.insertSublayer(gradient, at: 0)
    }

background Gradient : linear left to right in objective C

4 Answers4

Linked