【问题标题】:background Gradient : linear left to right in objective C背景梯度:物镜C中从左到右线性
【发布时间】:2017-02-27 09:54:02
【问题描述】:

我的客户想要具有这种渐变效果的背景视图 背景渐变: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];

像这样??

【问题讨论】:

  • [梯度 setStartPoint:CGPointMake(0, 0)]; [梯度setEndPoint:CGPointMake(0, 1)];添加起点和终点
  • @harshal valance 它帮助了 ViewGradient.startPoint = CGPointMake(0.0, 0.0); theViewGradient.endPoint = CGPointMake(1.0, 0.0);谢谢

标签: ios objective-c cagradientlayer


【解决方案1】:

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

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

默认情况下,起点具有这些坐标 (0.5, 0.0),而终点具有这些坐标 (0.5, 1.0)。

(0.0, 0.0) 是左上角,(1.0, 1.0) 是右下角

那就试试吧:

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

【讨论】:

    【解决方案2】:

    在 Swift 3.0 和 4.0 中,从左到右:

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

    【讨论】:

      【解决方案3】:
       **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);
      

      【讨论】:

        【解决方案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)
            }
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2020-02-27
          • 2013-04-15
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2023-02-01
          • 1970-01-01
          相关资源
          最近更新 更多