Fade Bottom of TableView - Swift

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.

How do you want to implement this fade? Do you want the individual cells to have different alpha values based on position, or do you want a pixel-by-pixel (or point-by-point) gradient overlay at either end? If you want the cells to fade, keep track of the visible cells and dynamically assign their contentView's alpha values as you scroll. If you want a pixel-to-pixel gradient, one cheap way of doing it is positioning two custom UIView objects above and below the tableView with a transparency gradient as a background color. — Egghead, Apr 10 '18 at 08:12
In my mind, I'll add button "send train tickets" to subview. And then add sub-view to top of the table view. Finally, we can set color alpha and transparent for sub view, opacity, corner radius for the button. — Cuong Nguyen, Apr 10 '18 at 08:15
If one of the answers solved your issue, please don't forget to accept it (green tick it). — Ahmad F, Apr 12 '18 at 07:58

score 3 · Answer 1 · answered Apr 10 '18 at 08:11

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

score 1 · Answer 2 · answered Apr 10 '18 at 08:29

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:

Fade Bottom of TableView - Swift

2 Answers2