Question

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

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

Answer 1

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

在Storyboard，它类似于：

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

备注： 通过将视图直接拖动到视图控制器来添加视图可能很困难，因为它将在表视图中作为子视图;您可以将其拖放到文档大纲中。

然后你可以为它设置所需的约束（我只添加0前导，0后跟，0底部和70高度）。最后改变它的颜色不透明度：

如您所见，我刚刚将不透明度编辑为50％（alpha = 0.5）。

<强>此外：

您还可以让底部视图具有白色和清晰颜色的渐变，它甚至可以使它更好！您可能想检查：

How to Apply Gradient to background view of iOS Swift App

Answer 2

您可以在按钮后面和表格视图上方添加渐变图层。

为此，创建一个UIView子类，Say 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：

您可以从此处配置颜色。在你的情况下，你应该采取白色：

淡化TableView的底部 - 斯威夫特

2 个答案: