Core Graphics Tutorial: Lines, Rectangles, and Gradients | raywenderlich.com

🎓 Courses & Articles
1

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 https://www.raywenderlich.com/475829-core-graphics-tutorial-lines-rectangles-and-gradients
2

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

3

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

4

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

5

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

6

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

7

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.addPath(path.cgPath)
    context.setStrokeColor(UIColor.starwarsYellow.cgColor)
    context.setLineWidth(1)
    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
8

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

9

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 {
return
}

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

context.setStrokeColor(UIColor.starwarsYellow.cgColor)
context.setLineWidth(1.0)
context.move(to: CGPoint(x: minX, y: y))
context.addLine(to: CGPoint(x: maxX, y: y))
context.strokePath()

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

10

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

11

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!

12

@tomelliott thankssssssssssss a lot

13

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