向可滚动的 UITextView 添加渐变背景

Question

在 iOS 中将渐变作为背景添加到视图时，我采用了这种方法：

let gradient = CAGradientLayer()
// gradient settings...
view.layer.insertSublayer(gradient, at: 0)

但是，当在 可滚动的 UITextView 上这样做时，渐变仅在可见边界内绘制，然后 在文本视图时向上滚动并超出视图向上滚动.

此外，由于 UITextView 没有固定的内容大小，因此也无法将渐变设置为该大小，尽管这也是不可取的。

一个解决方法是在滚动视图后面放置另一个视图并在那里应用渐变，然后将文本视图放在上面并使其背景透明。 但这不是首选解决方案。

问： 请问有什么方法可以固定渐变图层的位置，使其不随文字图层一起滚动吗？

编辑 1：附加代码：

let view = UITextView(frame: CGRect(x: 20, y: 20, width: 200, height: 200))
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [gradientColors]  // pre-set array of 2 CGColors
let alpha: Float = angle / 360  // pre-set between 0-90
let startPointX = powf(sinf(2 * Float.pi * ((alpha + 0.75) / 2)), 2)
let startPointY = powf(sinf(2 * Float.pi * ((alpha + 0) / 2)), 2)
let endPointX = powf(sinf(2 * Float.pi * ((alpha + 0.25) / 2)), 2)
let endPointY = powf(sinf(2 * Float.pi * ((alpha + 0.5) / 2)), 2)
gradient.endPoint = CGPoint(x: CGFloat(endPointX), y: CGFloat(endPointY))
gradient.startPoint = CGPoint(x: CGFloat(startPointX), y: CGFloat(startPointY))
view.layer.insertSublayer(gradient, at: 0)

编辑 2：解决方法（工作，但渐变仅在文本视图接收焦点后可见）：

extension UITextView {      
  func addGradient(gradient: CAGradientLayer) {
    backgroundColor = UIColor.clear
    let gradientContainer = UIView(frame:
      CGRect(x: frame.minX, y: frame.minY,
             width: frame.width, height: frame.height))
    gradientContainer.isUserInteractionEnabled = false
    gradientContainer.layer.insertSublayer(gradient, at: 0)
    superview?.addSubview(gradientContainer)
  }
}

let view = UITextView(frame: CGRect(x: 20, y: 20, width: 200, height: 200))
let gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [gradientColors]  // pre-set array of 2 CGColors
let alpha: Float = angle / 360  // pre-set between 0-90
let startPointX = powf(sinf(2 * Float.pi * ((alpha + 0.75) / 2)), 2)
let startPointY = powf(sinf(2 * Float.pi * ((alpha + 0) / 2)), 2)
let endPointX = powf(sinf(2 * Float.pi * ((alpha + 0.25) / 2)), 2)
let endPointY = powf(sinf(2 * Float.pi * ((alpha + 0.5) / 2)), 2)
gradient.endPoint = CGPoint(x: CGFloat(endPointX), y: CGFloat(endPointY))
gradient.startPoint = CGPoint(x: CGFloat(startPointX), y: CGFloat(startPointY))

view.addGradient(gradient)

编辑 3：Carpsen90 的创造性解决方法（谢谢！）：

class ViewController: UIViewController, UITextViewDelegate {

  @IBOutlet weak var myTxtView: UITextView!
  var gradient = CAGradientLayer()

  override func viewDidLoad() {
    super.viewDidLoad()
    myTxtView.delegate = self
    gradient.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
    updateGradientFrame()
    myTxtView.textInputView.layer.insertSublayer(gradient, at: 0)
  }

  func textViewDidChange(_ textView: UITextView) {
    updateGradientFrame()
  }

  func updateGradientFrame() {
    gradient.frame = myTxtView.textInputView.bounds
  }

}

这很好用，除了：

我。键入时渐变刷新引起的轻微闪烁

ii.马车 returns 超过文本视图的底部有时会导致渐变向上移动，导致文本视图底部出现空白 space

iii.在输入超过边界并向下滚动到文本视图边界之外后，当向上滚动到文本视图的顶部时，渐变仍然固定在 contentsize 区域 的底部；显然滚动不会触发 textViewDidChange() 委托方法。

Answer 1

这里有一个解决方法：让 VC 观察 textView 的变化，并相应地更新渐变框架：

class ViewController: UIViewController, UITextViewDelegate {

    @IBOutlet weak var myTxtView: UITextView!

    var gradient = CAGradientLayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        //set the delegate to self
        myTxtView.delegate = self
        //set up the gradient
        gradient.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
        updateGradientFrame()
        //insert the gradient in the textInputView
        myTxtView.textInputView.layer.insertSublayer(gradient, at: 0)
    }

    //The textView delegate method
    func textViewDidChange(_ textView: UITextView) {
        updateGradientFrame()
    }

    func updateGradientFrame() {
        gradient.frame = myTxtView.textInputView.bounds
    }
}

向可滚动的 UITextView 添加渐变背景

Adding a gradient background to a scrollable UITextView

ios

swift

uitextview

cagradientlayer