Core Graphics Tutorial: Lines, Rectangles, and Gradients |

In this tutorial, you’ll learn how to use Core Graphics to draw lines, rectangles, and gradients — starting by beautifying a table view!

This is a companion discussion topic for the original entry at

Still damn ugly :wink: , but a very useful beginner tutorial, thanks for that.

@pintiboy Really glad you like it! Cheers! :]

how to make that yellow border to rounded in the masterview controller

@tomelliott Can you please help with this when you get a chance? Thank you - much appreciated! :]

Hahaha guess it’s a good job I’m an engineer not a designer :]

Hi @shaktiprakash.

In StarshipListCellBackground, replace the stroke drawing code (after the call to context.drawLinearGradient) with the following:

    let strokeRect = backgroundRect.insetBy(dx: 4.5, dy: 4.5)
    let path = UIBezierPath(roundedRect: strokeRect, cornerRadius: 5.0)
    context.drawPath(using: .stroke)

Rather than stroking the rect this code creates a UIBezierPath for a rounded rect that fits within the stroke rect with the given corner radius. We then add that path to the context and draw it using context.drawPath(using:) rather than calling the stroke(rect:) convenience function.

1 Like

@tomelliott thanks man it worked for me .You guys are really doing nice jobs .Thanks for inspiring and motivating us :grinning::grinning::grinning:

Please is anti-aliasing problem happen when we add splitter to each cell in the detail view in that code

class YellowSplitterTableViewCell: UITableViewCell {
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else {

let y = bounds.maxY - 0.5
let minX = bounds.minX
let maxX = bounds.maxX

context.move(to: CGPoint(x: minX, y: y))
context.addLine(to: CGPoint(x: maxX, y: y))

and if not when it happen exactly and how to solve it ?

@tomelliott Can you please help with this when you get a chance? Thank you - much appreciated! :]

Hi @gemmen29.

If you were drawing this on a @1x device then that would cause a the line to be anti-aliased. However, on @2x this will still fall on a pixel boundary. On @3x it may be anti-aliased, but in general I wouldn’t worry about that as the pixels are so small you can’t really see!

@tomelliott thankssssssssssss a lot

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!