UIKit Drawing Tutorial: How to Make a Simple Drawing App

Adding Finishing Touches — A Custom Color Selector

Currently, you have 10 color buttons on your Drawing Canvas screen. However, with the custom RGB color selector, the discriminating artists using your app will have the ability to pick any available color from the RGB range.

There are a set of RGB color sliders in the settings screen that you’ll implement next.

Since you’ve provided a preview of the brush size and opacity, you might as well integrate a preview of the new brush color!

In SettingsViewController.swift, add the following to colorChanged(_:):

red = CGFloat(sliderRed.value / 255.0)
labelRed.text = Int(sliderRed.value).description
green = CGFloat(sliderGreen.value / 255.0)
labelGreen.text = Int(sliderGreen.value).description
blue = CGFloat(sliderBlue.value / 255.0)
labelBlue.text = Int(sliderBlue.value).description
    
drawPreview()

iOS calls colorChanged(_:) when you move any of the RGB sliders. In the above code, notice how all you’re doing is updating the property values and updating the labels.

Now that you have the brush and opacity samples drawing with all the correct settings, you’ll want to show them correctly when the Settings screen appears. Add the following to the bottom of viewDidLoad():

sliderBrush.value = Float(brush)
labelBrush.text = String(format: "%.1f", brush)
sliderOpacity.value = Float(opacity)
labelOpacity.text = String(format: "%.1f", opacity)
sliderRed.value = Float(red * 255.0)
labelRed.text = Int(sliderRed.value).description
sliderGreen.value = Float(green * 255.0)
labelGreen.text = Int(sliderGreen.value).description
sliderBlue.value = Float(blue * 255.0)
labelBlue.text = Int(sliderBlue.value).description
    
drawPreview()

As you can see, this just presets all labels and sliders with the correct values. The call to drawPreview() ensures that the preview image view also shows the correct thing.

Finally, open ViewController.swift. As before, you’ll need to make sure the current color makes it across to the Settings screen, so add the following lines to the end of prepare(for:sender:):

var red: CGFloat = 0
var green: CGFloat = 0
var blue: CGFloat = 0
color.getRed(&red, green: &green, blue: &blue, alpha: nil)
settingsController.red = red
settingsController.green = green
settingsController.blue = blue

This passes the current red, green and blue values so the RGB sliders are set correctly. This syntax might look strange but don’t worry — it is a left-over feature from the old Objective-C days. When you call getRed(_:green:blue:alpha:), it sets the variables you pass in with the component values from color.

Finally, find settingsViewControllerFinished(_:) in the class extension and add the following lines, just before you call dismiss(animated: true):

color = UIColor(red: settingsViewController.red,
                green: settingsViewController.green,
                blue: settingsViewController.blue,
                alpha: opacity)

This updates the color using the new RGB values.

Build and run again and put the color sliders through their paces. Also see how the specified RGB color, which is displayed in the preview, is now the brush stroke color on the drawing canvas!

But what good are all of these wonderful works of art if you can’t share them with the world? Since you can’t stick the pictures up on your refrigerator, you’ll share them with the world in the final step of this tutorial!

Adding Sharing

In this final step, you’ll use the iOS share sheet to send your works of art out into the world!

There are two parts to this: First, you need to get the drawing as a UIImage object; then, you just pass it on to UIActivityViewController to decide which sharing options will work best, depending on what accounts and services are available.

In ViewController.swift, add the following to sharePressed(_:):

guard let image = mainImageView.image else {
  return
}
let activity = UIActivityViewController(activityItems: [image], 
                                        applicationActivities: nil)
present(activity, animated: true)

This method is pretty simple. First it verifies that mainImageView indeed has an image. Then, UIActivityViewController does most of the heavy lifting! All you need to do is pass it an array of things to share; in this case, that’s just the single image.

The second parameter to the initializer applicationActivities lets you limit the activities, so passing nil means iOS will provide as many share options as possible. Your drawing deserves no less!

Build and run the app, and create your masterpiece. When you tap Share, you’ll now be able to let the world know of your talents.

Where to Go From Here?

You can download the completed version of the project using the Download Materials button at the top or bottom of this tutorial.

You can play around a bit more with the brush strokes and also investigate the drawing of arcs and rectangles using Quartz2D. A good start is the Quartz 2D Programming Guide. There are number of beginner and advanced-level concepts there with which you can experiment to create awesome shapes and patterns.

If you want to learn how to draw even smoother lines, you should also check out this smooth line drawing article by Krzysztof Zablocki. It’s based on Cocos2D but you can use the same technique in UIKit.

As a final challenge, try adding undo-redo capabilities. Check out UndoManager Tutorial: How to Implement With Swift Value Types published on this website by RW team member Lyndsey Scott.

Feel free to post your questions and comments on the forum — and feel free to share your masterpieces you created with your new app! :]