Core Graphics Tutorial: Patterns
Learn how to use Core Graphics to draw patterns in a performant way. By Michael Katz.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Core Graphics Tutorial: Patterns
30 mins
- Getting Started
- Understanding the Anatomy of a Pattern
- Setting up the Pattern
- Creating the Pattern View
- Drawing a Black Circle in the Pattern Cell
- Creating the Pattern
- Setting the Pattern’s Color Space
- Configuring the Pattern
- Changing the Centers of the Circles
- Applying a Transformation to the Pattern
- Adding Fill and Stroke to the Pattern
- Using Masking Patterns
- Stroking and Filling the Masking Pattern
- Creating the Game Pattern
- Drawing a Triangle
- Drawing Repeating Triangles as a Pattern
- Customizing the Pattern View
- Changing the Pattern’s Color and Direction
- Updating the Game to Use the Pattern
- Considering Performance When Using Patterns
- Where to Go From Here?
Changing the Pattern’s Color and Direction
Now’s a great time to set up code to control and test the pattern color and direction.
Add the following methods in PatternView
after the property definitions:
init(fillColor: [CGFloat], direction: PatternDirection = .top) {
self.fillColor = fillColor
self.direction = direction
super.init(frame: CGRect.zero)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
This sets up an initializer that takes in a fill color and a pattern direction. direction
has a default value.
You’ve also added the required initializer for when a storyboard initializes the view. You’ll need this later when you transfer your code to the app.
In MyViewController
, change patternView
since you’ve changed the initializer:
let patternView = PatternView(
fillColor: [0.0, 1.0, 0.0, 1.0],
direction: .right)
Here, you instantiate a pattern view with non-default values.
Run the playground. Your triangles are now green and pointing to the right:
Congratulations! You’re done prototyping your pattern using Playgrounds. It’s time to use this pattern in Recall.
Updating the Game to Use the Pattern
Open the Recall starter project. Go to PatternView.swift and copy over the CGPath
extension from your playground to the end of the file.
Next, replace PatternView
in PatternView.swift with the class from your playground.
Note: You can vastly simplify this process by using Xcode’s code folding feature. In the playground, put the cursor just after the opening brace of
class PatternView: UIView {
and select Editor ▸ Code Folding ▸ Fold from the menu. Triple-click the resulting folded line to select the entire class and press Command-C. In the project, repeat the process to fold and select the class. Press Command-V to replace it.
Build and run the app. You should see something like this:
Something’s not quite right. Your pattern appears to be stuck in default mode. It looks like a new game view isn’t refreshing the pattern views.
Go to GameViewController.swift and add the following to the end of setupPatternView(_:towards:havingColor:)
:
patternView.setNeedsDisplay()
This prompts the system to redraw the pattern so that it picks up the new pattern information.
Build and run the app. You should now see colors and directions nicely mixed up:
Tap one of the answer buttons and play through the game to check that everything works as expected.
Congratulations on completing Recall! You’ve come a long way from the mind-numbing days of simple paint jobs.
Considering Performance When Using Patterns
Core Graphics patterns are really fast. Here are several options you can use to draw patterns:
- Using the Core Graphics pattern APIs that you worked through in this tutorial.
- Using UIKit wrapper methods such as
UIColor(patternImage:)
. - Drawing the desired pattern in a loop with many Core Graphics calls.
If your pattern is only drawn once, the UIKit wrapper method is the easiest. Its performance should also be comparable to the lower-level Core Graphics calls. An example of when to use this is to paint a static background pattern.
Core Graphics can work in a background thread, unlike UIKit, which runs on the main thread. Core Graphics patterns are more performant with complicated drawings or dynamic patterns.
Drawing the pattern in a loop is the slowest option. A Core Graphics pattern makes the draw call once and caches the results, making it more efficient.
Where to Go From Here?
Access the final project by clicking the Download Materials button at the top or bottom of this tutorial. You can also use this to check your work if you get stuck.
You should now have a solid understanding of how to use Core Graphics to create patterns. Check out the Patterns and Playgrounds tutorial to learn how to build patterns using UIKit.
You may also want to read through the Curves and Layers tutorial, which focuses on drawing various curves and cloning them using layers.
We hope you enjoyed this tutorial. If you have any comments or questions, please join the forum discussion below!