CODEWITHSUNDEEP
iosiphoneswiftuitableview
Brian Ogden
Brian Ogden

Reputation: 19212

Adding a Gradient Background to UITableViewCell Swift

I found this SO question here: Swift: gradient on a cell of a tableview

I am using a Custom UITableViewCell which has the following code:

public class MyCustomUITableViewCell: UITableViewCell {
 override public func layoutSubviews() {
    super.layoutSubviews()

    //setting backgroundColor works
    //self.backgroundColor = UIColor.brownColor()

    self.backgroundColor = UIColor.clearColor()

    let colorTop = UIColor(red: 192.0/255.0, green: 38.0/255.0, blue: 42.0/255.0, alpha: 1.0).CGColor
    let colorBottom = UIColor(red: 35.0/255.0, green: 2.0/255.0, blue: 2.0/255.0, alpha: 1.0).CGColor

    let gradient = CAGradientLayer()
    gradient.colors = [ colorTop, colorBottom]
    gradient.locations = [ 0.0, 1.0]

    self.backgroundView = UIView()

    //setting view backgroundColor does not work
    //self.backgroundView?.backgroundColor = UIColor.redColor()

    self.backgroundView!.layer.insertSublayer(gradient, atIndex: 0)
  }
}

The UITableViewCells displayed are clear because I set the self.backgroundColor to UIColor.clearColor().

The gradient does not show, and if, instead of adding a gradient to the UITableViewCell.backgroundView,I just set the UITablveViewCell.backgroundView.backgroundColor to UIColor.redColor(), that does not work either.

When I create the UITableViewCell.backgroundView at this line of code:

self.backgroundView = UIView()

I am assuming the backgroundView automatically fills the bounds of the UITableViewCells displayed in the UITableView, in other words, backgroundView is not a 0x0 width x height correct?

Upvotes: 2

Views: 5486

Answers (2)

TwoStraws
TwoStraws

Reputation: 13127

This might help you and others: it's the (tiny) UIView subclass I use to draw gradients without having to get into the mess of inserting CALayers. This way UIView handles resizing using things like Auto Layout, which is much easier to work with.

Put this code into a file in your project, then use it as a normal view. It can go straight into your cell's background view if you want. You should be able to customise the colours in code or in IB if you use it that way.

It's trivial code, but please consider it CC-0 licensed – i.e. public domain where possible, "just use it however you want" everywhere else.

@IBDesignable class GradientView: UIView {
    @IBInspectable var firstColor: UIColor = UIColor.whiteColor()
    @IBInspectable var secondColor: UIColor = UIColor.blackColor()

    override class func layerClass() -> AnyClass {
        return CAGradientLayer.self
    }

    override func layoutSubviews() {
        (layer as! CAGradientLayer).colors = [firstColor.CGColor, secondColor.CGColor]
    }
}

If you're looking for more advanced functionality, try something like SwiftyGradient – it does much the same thing (i.e. pushing the work into a UIView to make things easier), but has more functionality.

Upvotes: 11

TheEye
TheEye

Reputation: 9346

As noted in the documentation for UITableViewCell:

If you want to change the background color of a cell, do so in the tableView:willDisplayCell:forRowAtIndexPath: method of your table view delegate.

I normally just add another view to my cells that I use as background view, that works in all cases.

Upvotes: 3

Related Questions