如何用Swift在图像上编程添加渐变层?

时间:2022-04-23 06:06:37

I want to place a layer with a predefined Transparent to Black gradient on top of an UIImage whose content image is loaded via web and creating an effect of a shadow over it.

我想在UIImage的顶部放置一个预定义的透明到黑色渐变的图层,它的内容图像是通过web加载的,并在上面创建一个阴影效果。

I don't want to do it via loading a png with such a gradient.

我不想用这种梯度来加载png。

1 个解决方案

#1


11  

I suggest creating a custom subclass of UIView (or UIImageView, if what you want to add the gradient to is a UIImageView). In the init method of your custom view, create a CAGradientLayer and add it as a sublayer of your view's layer. Then set up the black to transparent gradient on the layer.

我建议创建UIView的自定义子类(或者UIImageView,如果你想添加渐变为UIImageView)。在自定义视图的init方法中,创建一个CAGradientLayer并将其添加为视图层的子层。然后在图层上设置黑色到透明的渐变。

You will probably need to override layoutSubviews() and change the settings on your gradient layer in case the view's bounds change.

您可能需要覆盖layoutSubviews(),并更改渐变层上的设置,以防视图的边界发生变化。

EDIT:

编辑:

I created a playground as a gist on github that is a working example of this:

我在github上创建了一个游乐场,这是一个很好的例子:

The code looks like this:

代码是这样的:

import UIKit
import AVFoundation


class ImageViewWithGradient: UIImageView
{
  let myGradientLayer: CAGradientLayer

  override init(frame: CGRect)
  {
    myGradientLayer = CAGradientLayer()
    super.init(frame: frame)
    self.setup()
  }

  required init(coder aDecoder: NSCoder)
  {
    myGradientLayer = CAGradientLayer()
    super.init(coder: aDecoder)
    self.setup()
  }

  func setup()
  {
    myGradientLayer.startPoint = CGPoint(x: 0, y: 0)
    myGradientLayer.endPoint = CGPoint(x: 1, y: 1)
    let colors: [CGColorRef] = [
      UIColor.clearColor().CGColor,
      UIColor(red: 0, green: 0, blue: 0, alpha: 0.3).CGColor,
      UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).CGColor,
      UIColor(red: 0, green: 0, blue: 0, alpha: 0.3).CGColor,
      UIColor.clearColor().CGColor ]
    myGradientLayer.colors = colors
    myGradientLayer.opaque = false
    myGradientLayer.locations = [0.0,  0.3, 0.5, 0.7, 1.0]
    self.layer.addSublayer(myGradientLayer)
  }

  override func layoutSubviews()
  {
    myGradientLayer.frame = self.layer.bounds
  }
}


var aView = ImageViewWithGradient(frame: CGRect(x: 0, y: 0, width: 500, height: 500))

#1


11  

I suggest creating a custom subclass of UIView (or UIImageView, if what you want to add the gradient to is a UIImageView). In the init method of your custom view, create a CAGradientLayer and add it as a sublayer of your view's layer. Then set up the black to transparent gradient on the layer.

我建议创建UIView的自定义子类(或者UIImageView,如果你想添加渐变为UIImageView)。在自定义视图的init方法中,创建一个CAGradientLayer并将其添加为视图层的子层。然后在图层上设置黑色到透明的渐变。

You will probably need to override layoutSubviews() and change the settings on your gradient layer in case the view's bounds change.

您可能需要覆盖layoutSubviews(),并更改渐变层上的设置,以防视图的边界发生变化。

EDIT:

编辑:

I created a playground as a gist on github that is a working example of this:

我在github上创建了一个游乐场,这是一个很好的例子:

The code looks like this:

代码是这样的:

import UIKit
import AVFoundation


class ImageViewWithGradient: UIImageView
{
  let myGradientLayer: CAGradientLayer

  override init(frame: CGRect)
  {
    myGradientLayer = CAGradientLayer()
    super.init(frame: frame)
    self.setup()
  }

  required init(coder aDecoder: NSCoder)
  {
    myGradientLayer = CAGradientLayer()
    super.init(coder: aDecoder)
    self.setup()
  }

  func setup()
  {
    myGradientLayer.startPoint = CGPoint(x: 0, y: 0)
    myGradientLayer.endPoint = CGPoint(x: 1, y: 1)
    let colors: [CGColorRef] = [
      UIColor.clearColor().CGColor,
      UIColor(red: 0, green: 0, blue: 0, alpha: 0.3).CGColor,
      UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).CGColor,
      UIColor(red: 0, green: 0, blue: 0, alpha: 0.3).CGColor,
      UIColor.clearColor().CGColor ]
    myGradientLayer.colors = colors
    myGradientLayer.opaque = false
    myGradientLayer.locations = [0.0,  0.3, 0.5, 0.7, 1.0]
    self.layer.addSublayer(myGradientLayer)
  }

  override func layoutSubviews()
  {
    myGradientLayer.frame = self.layer.bounds
  }
}


var aView = ImageViewWithGradient(frame: CGRect(x: 0, y: 0, width: 500, height: 500))