淡出 TableView 底部 - Swift答案

【问题标题】：Fade Bottom of TableView - Swift淡出 TableView 底部 - Swift
【发布时间】：2018-04-10 07:58:25
【问题描述】：

我目前有一个 tableView 填充了用户的朋友。 tableView 是正确运行的 TableViewController 的一部分。我希望 tableview 在最底部永久褪色，类似于下图：

我知道您可以使用渐变，但我不确定如何使用。有人请帮忙。

【问题讨论】：

您可以添加从 alpha 到白色的渐变
你想如何实现这个淡入淡出？您是否希望各个单元格根据位置具有不同的 alpha 值，或者您是否希望在任一端进行逐像素（或逐点）渐变叠加？如果您希望单元格淡出，请跟踪可见单元格并在滚动时动态分配其 contentView 的 alpha 值。如果你想要一个像素到像素的渐变，一种廉价的方法是在 tableView 上方和下方放置两个自定义 UIView 对象，并将透明度渐变作为背景色。
在我看来，我会在子视图中添加“发送火车票”按钮。然后将子视图添加到表格视图的顶部。最后，我们可以为按钮设置子视图的颜色alpha和透明，不透明度，圆角半径。
你也许可以在viewcontroller中使用tableview
如果其中一个答案解决了您的问题，请不要忘记接受它（绿色打勾）。

标签： ios swift tableview gradient fade

【解决方案1】：

您可以通过在表格视图顶部添加-白色背景-UIView 并将其alpha 设置为所需值来实现此外观。

在 Storyboard 中，它类似于：

请注意，在文档大纲 - 视图层次结构中，视图位于 tableview 下方，这意味着它将位于它之上。

备注： 将视图直接拖到视图控制器可能很难添加，因为它会作为表格视图中的子视图；您可以改为将其拖动到文档大纲中。

然后您可以为其设置所需的约束（我只是添加了 0 个前导、0 个尾随、0 个底部和 70 个高度）。最后改变它的颜色不透明度：

如您所见，我刚刚将不透明度编辑为 50% (alpha = 0.5)。

此外：

您还可以让底部视图具有白色和透明色的渐变，它甚至可以使它更好看！您可能需要检查：

How to Apply Gradient to background view of iOS Swift App

【讨论】：

【解决方案2】：

您可以通过在按钮后面和表格视图上方添加一个渐变层来做到这一点。

为此，创建一个 UIView 子类，说GradientView：

import UIKit

@IBDesignable
class GradientView: UIView {

@IBInspectable var startColor: UIColor = .black { didSet { updateColors() }}
@IBInspectable var middleColor: UIColor = .white { didSet { updateColors() }}
@IBInspectable var endColor: UIColor = .white { didSet { updateColors() }}
@IBInspectable var startLocation: Double = 0.05 { didSet { updateLocations() }}
@IBInspectable var middleLocation: Double = 0.05 { didSet { updateLocations() }}
@IBInspectable var endLocation: Double = 0.95 { didSet { updateLocations() }}
@IBInspectable var horizontalMode: Bool = false { didSet { updatePoints() }}
@IBInspectable var diagonalMode: Bool = false { didSet { updatePoints() }}

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

var gradientLayer: CAGradientLayer {
    return (layer as? CAGradientLayer)!
}

func updatePoints() {
    if horizontalMode {
        gradientLayer.startPoint = diagonalMode ? CGPoint(x: 1, y: 0): CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 0, y: 1): CGPoint(x: 1, y: 0.5)
    } else {
        gradientLayer.startPoint = diagonalMode ? CGPoint(x: 0, y: 0): CGPoint(x: 0.5, y: 0)
        gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 1, y: 1): CGPoint(x: 0.5, y: 1)
    }
}
func updateLocations() {
    gradientLayer.locations = [startLocation as NSNumber, middleLocation as NSNumber, endLocation as NSNumber]
}
func updateColors() {
    gradientLayer.colors = [startColor.cgColor, middleColor.cgColor, endColor.cgColor]
}

override func layoutSubviews() {
    super.layoutSubviews()
    updatePoints()
    updateLocations()
    updateColors()
}
}

而且，您可以在情节提要中分配此视图以及 @IBDesignable：

您可以从这里配置颜色。在你的情况下，你应该选择白色：

【讨论】：