当有其他内容时，滚动视图顶部/底部的渐变

Posted 2023-02-23

【中文标题】当有其他内容时，滚动视图顶部/底部的渐变

【英文标题】：Gradient at Top/Bot of Scrollview When There's Additional Content

【发布时间】：2016-07-14 14:16:30

【问题描述】：

我有一个滚动视图>ContentView>TextLabel 设置，其中渐变显示但没有按我想要的方式工作。这是一个清晰的背景滚动视图，所以我要寻找的只是文本上的清晰渐变蒙版。我found something 与我在 Objective-C 中寻找的类似，但该线程没有 Swift 解决方案。

我的最终目标似乎是大多数人可能会使用的东西，所以我很惊讶还没有 Swift 版本。我要编写的功能是：

有时文本会完全适合 scrollView 的固定大小，因此不应该有渐变。 当文本过长且部分文本低于 scrollView 的底部截断时，视图的底部应淡入淡出。 一旦用户向下滚动并且顶部应该消失，表明上面还有更多内容。

我尝试使用这段代码来处理项目符号 #2：

        let gradient = CAGradientLayer()
        gradient.frame = self.bio_ScrollView.superview!.bounds ?? CGRectNull
        gradient.colors = [UIColor.whiteColor().CGColor, UIColor.clearColor().CGColor]
        //gradient.locations = [0, 0.15, 0.25, 0.75, 0.85, 1.0]
        gradient.locations = [0.6, 1.0]
        self.bio_ScrollView.superview!.layer.mask = gradient

但是它会淡化一切，包括它下面的按钮，这显然不在滚动视图中：

如果我删除 .superview 并将其直接应用于 scrollView，它只会淡化可见初始部分下方的所有文本：

有人知道如何正确实施吗？

【参考方案1】：

想通了。首先，确保您添加了正确的视图层次结构。滚动视图需要嵌入到容器视图中（这是渐变将应用于的内容）：

顶部/容器视图：根据需要进行设置 Scrollview：将所有边缘固定到容器（总共 4 个约束） Scrollview 内容视图：固定边缘 + 中心 X（总共 5 个约束） 标签：引脚边缘（总共 4 个约束）

在 ViewController 类中添加“scrollViewDelegate”：

class ViewController_WithScrollView: UIViewController, UIScrollViewDelegate 
   ....

将上面列出的四个视图与 IBOutlets 连接起来。然后，在 viewDidLoad 中设置你的 scrollView 委托：

override func viewDidLoad() 
    super.viewDidLoad()

    yourScrollView.delegate = self
    //+All your other viewDidLoad stuff

然后实现 scrollViewDidScroll 函数，感谢您在上面所做的工作，它将自动运行。

func scrollViewDidScroll (scrollView: UIScrollView) 
    if scrollView.isAtTop 
        self.applyGradient_To("Bot")
     else if scrollView.isAtBottom 
        self.applyGradient_To("Top")
     else 
        self.applyGradient_To("Both")
    
 

然后添加这个神奇的渐变代码：

func applyGradient_To (state: String) 
    let gradient = CAGradientLayer()
    gradient.frame = self.yourScrollView.superview!.bounds ?? CGRectNull

    switch state 
    case "Top":
        gradient.colors = [UIColor.clearColor().CGColor,UIColor.whiteColor().CGColor]
        gradient.locations = [0.0,0.2]
    case "Bot":
        gradient.colors = [UIColor.whiteColor().CGColor, UIColor.clearColor().CGColor]
        gradient.locations = [0.8,1.0]
    default:
        gradient.colors = [UIColor.clearColor().CGColor,UIColor.whiteColor().CGColor,UIColor.whiteColor().CGColor, UIColor.clearColor().CGColor]
        gradient.locations = [0.0,0.2,0.8,1.0]
    
    self.yourScrollView.superview!.layer.mask = nil
    self.yourScrollView.superview!.layer.mask = gradient

应该这样做！

【讨论】：

在我向 UIScrollView 添加扩展以使用 isAtTop 属性后为我工作。 ***.com/a/14745900/4228969