CODEWITHSUNDEEP
iosswifttableviewgradientfade
Nikhil Sridhar
Nikhil Sridhar

Reputation: 1740

Fade Bottom of TableView - Swift

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:

enter image description here

I'm aware that you can use gradients, but I'm not sure how. Somebody please help.

Upvotes: 2

Views: 2789

Answers (2)

Ankit Jayaswal
Ankit Jayaswal

Reputation: 5679

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:

enter image description here

You can configure the colour from here. In you case, you should take white colour:

enter image description here

Upvotes: 1

Ahmad F
Ahmad F

Reputation: 31645

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:

enter image description here

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:

enter image description here

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

Upvotes: 3

Related Questions