Question

我的客户想要具有此渐变效果的背景视图 background Gradient：rgb（118,118,118）| #ffffff | rgb（198,198,197）从左到右线性 我已经尝试过这种方式，但它发生在垂直方向，我希望它以水平方式

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];

喜欢这个？

Answer 1

您需要设置gradientLayer的startPoint和endPoint属性。它们代表第一种颜色的起始坐标和最后一种颜色的结束坐标。

它们都是CGPoints，它们的x和y的值应该在0.0 et 1.0之间。

默认情况下，startPoint具有这些坐标（0.5,0.0），而endPoint具有这些坐标（0.5,0.0）。

（0.0,0.0）是左上角，而（1.0,1.0）是右下角

所以试试：

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

Answer 2

 **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);

Answer 3

在Swift 3.0＆amp; 4.0

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

Answer 4

 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：在物镜C中从左到右线性

4 个答案: