Swift：UIView的背景渐变

时间：2018-04-26 07:25:11

标签： ios swift uiview

我在尝试向UIView添加渐变背景时遇到问题。我制作了extension UIView并添加了以下方法：

func setGradientBackground(colorTop: UIColor, colorBottom: UIColor) {
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [colorTop, colorBottom]
    gradientLayer.frame = bounds

    layer.insertSublayer(gradientLayer, at: 0)
}

然后我打电话： 

separatorView.setGradientBackground(colorTop: .clear, colorBottom: .red)

但它不起作用。该视图已呈现，但其背景完全清楚。我也试过CGColor

7 个答案:

答案 0 :(得分：6)

有两个问题：

  • 我需要设置起点和终点以提供渐变方向：

    func setGradientBackground(colorTop: UIColor, colorBottom: UIColor) {
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [colorBottom.cgColor, colorTop.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
    gradientLayer.locations = [0, 1]
    gradientLayer.frame = bounds

   layer.insertSublayer(gradientLayer, at: 0)
}

  • 第二个问题是CAGradientLayer在视图布局后生效。我解决了在setGradientBackground()上调用viewDidAppear的问题：

    override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    separatorView.setGradientBackground(colorTop: .clear, colorBottom: Colors.darkGrey)
}

答案 1 :(得分：4)

Moayad的答案对我来说效果最好，但它以顶部颜色为底部向后倾斜，因此我取消了他发布的功能。

快捷键4 

    func setGradientBackground(colorTop: UIColor, colorBottom: UIColor){
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorBottom.cgColor, colorTop.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.locations = [0, 1]
        gradientLayer.frame = bounds

        layer.insertSublayer(gradientLayer, at: 0)
}

答案 2 :(得分：2)

将您的方法更新为以下代码：

    func setGradientBackground(colorTop: UIColor, colorBottom: UIColor){
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.locations = [NSNumber(floatLiteral: 0.0), NSNumber(floatLiteral: 1.0)]
        gradientLayer.frame = self.bounds

        self.layer.insertSublayer(gradientLayer, at: 0)
    }

答案 3 :(得分：1)

对于@IBDesignable：您可以在情节提要上自定义UI。易于使用。

@IBDesignable class GradientView: UIView {

    @IBInspectable var startColor: UIColor = .blue {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var endColor: UIColor = .green {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var shadowColor: UIColor = .yellow {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var shadowX: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var shadowY: CGFloat = -3 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var shadowBlur: CGFloat = 3 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var startPointX: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var startPointY: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var endPointX: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var endPointY: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            setNeedsLayout()
        }
    }

    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

    override func layoutSubviews() {
        let gradientLayer = layer as! CAGradientLayer
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        gradientLayer.startPoint = CGPoint(x: startPointX, y: startPointY)
        gradientLayer.endPoint = CGPoint(x: endPointX, y: endPointY)
        layer.cornerRadius = cornerRadius
        layer.shadowColor = shadowColor.cgColor
        layer.shadowOffset = CGSize(width: shadowX, height: shadowY)
        layer.shadowRadius = shadowBlur
        layer.shadowOpacity = 1
    }
}

答案 4 :(得分：1)

gmoraleda的答案是正确的。如果您使用的是自动版式，请在viewDidLayoutSubviews上执行此操作。

答案 5 :(得分：0)

这适用于我的项目

/**
 set a gradient to a view
 gradientColors must be cgColors
 gradientColors and locations must have the same array size
 example:
 let gradientColors = [UIColor.red.cgColor,UIColor.blue.cgColor,UIColor.yellow.cgColor]
 let locations:[NSNumber] = [0.0,0.8,1.0]
 */
static func setGradient(viewWithGradient: UIView, backgroundColor: UIColor, gradientColors: [CGColor], locations:[NSNumber], boundsOfGradient:CGRect) {

    if gradientColors.count != locations.count {
        print("gradientColors and locations must have same size!")
        return
    }

    viewWithGradient.backgroundColor = backgroundColor
    let mask = CAGradientLayer()
    mask.colors = gradientColors
    mask.locations = locations
    mask.frame = boundsOfGradient
    viewWithGradient.layer.mask = mask
}

像这样打电话

    let gradientColors = [UIColor.red.cgColor,UIColor.blue.cgColor,UIColor.yellow.cgColor]
    let locations:[NSNumber] = [0.0,0.8,1.0]
    GeneralTools.setGradient(viewWithGradient: yourViewThatShouldGetGradient, backgroundColor: backgroundColorOfYourViewWithGradient, gradientColors: gradientColors, locations: locations, boundsOfGradient: viewWhereIsYourGradientInside.bounds)

可能不够清晰boundsOfGradient：边界将设置为渐变框架。所以简单地说这将声明渐变的大小。

答案 6 :(得分：0)

代码运行良好。但是，您应该在 import random class MSDie: def __init__(self, num_sides): self.num_sides = num_sides self.current_value = self.roll() def roll(self): self.current_value = random.randrange(1,self.num_sides+1) return self.current_value def __int__(self): return int(self.current_value) def getValue(self): return self.value def setValue(self, value): self.value = value print("you are a legendary hero on a quest to save the kingdom from an evil dragon.") print("You find him outside his lair and the two of you begin to battle.") print("Both you and the dragon start with 100 health.") print("You each will both randomly deal between 1-20 damage.") print("The first whose health drops to 0 loses.") playerHealth = 100 DragonHealth = 100 while(playerHealth > 0 or DragonHealth > 0): print("You have ", playerHealth, "Health.") print("The dragon has ", DragonHealth, "Health.") myDamage = MSDie(20) DragonDamage = MSDie(20) playerHealth = playerHealth - int(DragonDamage) 处调用它。

斯威夫特 5

layoutSubviews

}

相关问题
最新问题