【问题标题】:Adding a gradient background to a scrollable UITextView向可滚动的 UITextView 添加渐变背景
【发布时间】:2019-01-25 07:41:43
【问题描述】:

在 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.在文本视图底部回车有时会导致渐变向上移动,从而导致文本视图底部出现空白

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

【问题讨论】:

  • 请展示更多设置 textView 和渐变的代码。
  • 您说过“这不是首选解决方案。”。为什么不?对我来说听起来很明智。
  • @sjwarner;我正在设计一个以编程方式实例化控件的 UI 生成器。因此,尽管扩展很好,但复合或子分类控件并不可取。当然,如果您有这样的解决方法。
  • @iSofia 你在用这个myTextView.layer.insertSublayer(gradient, at: 0)设置textView的背景吗?
  • @Carpsen90,是的。

标签: ios swift uitextview cagradientlayer


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

【讨论】:

  • 谢谢你,@Carpsen90。这是一个优雅的解决方法,尽管有轻微的闪烁。我将把它作为一个选项,并作为很快接受的答案。我一直在修补一个扩展,它会自动在 UITextView 后面直接添加一个 UIView,然后在 UIView 上应用渐变并更改 UIView i>UITextView 背景为 UIColor.clear。到目前为止,光学是正确的,但我似乎无法专注于文本视图。我尝试将文本视图放在前面,但似乎没有任何效果。对此有何想法?
  • @iSofia 能否请您发布此扩展程序的代码以便我能提供更多帮助?在我的脑海中,您可以尝试将此视图的 isUserInteractionEnabled 设置为 false,但这只是一个猜测。
  • 嘿! (isUserInteractionEnabled) 成功了!文本视图现在能够获得焦点。谢谢你。但是,还有一件事;首次显示文本视图时,渐变不可见,但仅在文本视图获得焦点时才可见。这个我想不通。
  • 我刚刚使用此解决方法的代码更新了 OP。
  • @iSofia 确保将该视图发送到后面:将以下行放入您的扩展程序 superview?.sendSubview(toBack: gradientContainer)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-02-23
  • 2020-04-21
  • 1970-01-01
  • 1970-01-01
  • 2015-05-05
  • 1970-01-01
  • 2015-09-02
相关资源
最近更新 更多