Fade Bottom of TableView - Swift - ios

Question

I currently have a tableView populated with the user's friends. The tableView is part of TableViewController which operates correctly. I want the tableview to be permanently faded at the very bottom similar to the following picture:
I'm aware that you can use gradients, but I'm not sure how. Somebody please help.

Answer 1

You could achieve this appearance by adding a -white background- UIView on top the the table view and set its alpha to the desired value.
At Storyboard, it would be similar to:
Note that at the document outline - views hierarchy the view is underneath the tableview, which means it would be on top of it.
Remark: it might be hard to add the view by dragging it directly to the view controller since it would be as subview in the table view; You could drag it in the document outline instead.
Then you could setup the desired constraints to it (I just added 0 leading, 0 trailing, 0 bottom and 70 height). Finally change its color opacity:
As you can see, I just edited the opacity to be 50% (alpha = 0.5).
Furthermore:
you could also let the bottom view to has gradient of white and clear colors, it could even make it nicer! You might want to check:
How to Apply Gradient to background view of iOS Swift App

Answer 2

You can do this by adding a gradient layer behind the button and above the table view.
For this, Create a UIView subclass, 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()
}
}
And, you can assign this view in storyboard as well as it is #IBDesignable:
You can configure the colour from here. In you case, you should take white colour: