IOS Development

Learn how to add Apple Pencil help to your iPad apps

In October 2018, Apple introduced the model new iPad Professional and the all new Apple Pencil 2.zero. Not like the earlier technology of Apple Pencil, this device offers builders with some enjoyable APIs to make use of to boost the performance of their software and their person expertise. On this tutorial I’ll present you the way to make your software help Apple Pencil 2.

Notice: To check the demo software of this tutorial, you will have a real iPad Professional appropriate with the second technology of Apple Pencil. The simulator doesn’t supply this function. We are going to use Swift 5 and Xcode 10.2.

To begin

We’re going to create an software known as Canvas, the place customers can view hilarious invention concepts from the Bored Elon Musk parody account each time they kind their Apple pencil twice. First, open Xcode and choose "New Challenge". Select "Single View App" and identify your mission as you want.

Earlier than we begin, we now have to do one thing essential. As Apple Pencil is simply supported on the iPad, we have to guarantee that our mission is ready to iPad solely, however to not Common.

Organising the person interface

Editor's be aware: You’ll be able to skip this part and go to the following part in case you simply need to test the Apple Pencil help code.

First, we’ll design the person interface of the appliance. Go to Predominant.storyboard and drag a label into the view controller, set its font measurement to 30, type on daring, and contours to zero.

Then we now have to outline the constraints. Click on the Align Backside Proper button and test the containers "horizontally within the container" and "vertically within the container".

We're nearly carried out. Then, drag a button and set its title to "Subsequent Thought!" And its font to "Semibold 25".

Lastly, click on the Align button. Examine each "horizontally within the container" and "vertically within the container". For "Vertically in Container", set its worth to 100. Thus, the button won’t be positioned slightly below the label. Additionally set the alpha worth of the button to zero in order that it’s invisible by default. I’ll clarify why we did this later.

Let's join our UI parts to our code. Create two shops in ViewController.swift and join it to the weather of the person interface.

I’ve two shops named ideaLabel and ideaButton. The ideaLabel will show our concept of ​​invention. In case the person doesn’t have an Apple Pencil Pencil or has disabled Apple Pencil help, we’ll show the concept button in order that he can at all times use the appliance.

That is the premise of our person interface. Let's transfer to the coding half!

Help coding for Apple Pencil 2

First, we declare a desk containing all our concepts of invention. Insert the next code within the viewDidLoad technique:

go away concepts = [“Email app that anonymously pings all your coworkers after New Year’s”, “Self-imposed ads reminding you of your to-do list”, “Anti-bacterial gel dispensing doorknobs.”, “Vending machines that can break a $20”, “Routers that work.”]

let concepts = [[[["E-mail software that appeals to all of your colleagues after the New 12 months", "Self-imposed adverts reminding you of your to-do record", "Door handles shelling out antibacterial gel.", "Merchandising machines that may break $ 20", "Routers that work."]

I added some concepts, however you might be free so as to add as many as you need!

Then we now have to alter the textual content of the label when the view is loading. We are going to choose a random concept and put it on the label. This may be carried out very just by a single line of code. Replace the viewDidLoad technique like this:

change func viewDidLoad ()
tremendous.viewDidLoad ()
ideaLabel.textual content = (concepts.randomElement ()!)

override func viewDidLoad()

Nice.viewDidLoad()

idéeLabel.textual content = (concepts.randomElement()!)

This units the textual content of our ideaLabel to a random string of our array.

Now, let's run the appliance to do a check. If all goes nicely, the label ought to change each time you open the appliance.

Lastly, comes the thrilling half! We are going to now work together with Apple Pencil to seize the double strike motion. For this to work, you solely must configure the Pencil Interplay delegate. Within the viewDidLoad technique, insert the next strains of code:

let interplay = UIPencilInteraction ()
interplay.delegate = self
view.addInteraction (interplay)

let interplay = UIPencilInteraction()

interplay.to delegate = self

view.addInteraction(interplay)

Mainly, we create a relentless interplay of kind UIPencilInteraction and outline its delegate on self. Then we add that interplay to the view. Nevertheless, as quickly as you insert the code, you’ll discover an error in Xcode. Certainly, the ViewController class doesn’t conform to UIPencilInteractionDelegate. To resolve this downside, let's take the delegate of the ViewController class.

If we run our software, you’ll discover that nothing modifications. Certainly, we nonetheless haven’t written the double strike motion code. Now, create the pencilInteractionDidTap technique within the ViewController class:

func pencilInteractionDidTap (_ interplay: UIPencilInteraction)

func pencilInteractionDidTap(_ interplay: UIPencilInteraction)

When an Apple Pencil 2 is linked to an iPad Professional, the person can select what he desires the apple pencil to do, particularly:

Ignore the tap
Present shade palette
Change to an eraser
Change to the final device used

These guidelines have been created with the concept the Apple pen can be primarily used for drawing functions. Nevertheless, you might be allowed to ask Apple Pencil to do much more. That mentioned, it's essential that you just inform your person what the tap would do.

Within the code above, until the Apple Pencil configuration is ready to Ignore, we edit the ideaLabel textual content when the appliance enters the faucet motion. If this selection is ready to Ignore, we will assume that the person will use the Apple pencil much less. On this case, we’ll make the ideaButton seen by setting its alpha to 1.

When you run the code, all the things ought to work as anticipated. The one perform that doesn’t work is the second you faucet the following concept! button. Certainly, we didn’t affiliate it with an IBAction motion. Simply join them and the button will work.

After the modifications, run the appliance to check once more and all the things ought to work completely!

It’s troublesome to view the options of an software utilizing screenshots. I shot a video to point out you the way the app works in motion. Don’t forget to have a look!

Conclusion

The Apple pencil is admittedly an interesting accent for iPad Professional customers. For builders, it's greater than only a stylus. Though this tutorial is primitive, the objective is to point out you the way to add Apple Pencil help to your iPad functions. As you possibly can see, it's fairly straightforward to do. What to bear in mind when creating for Apple Pencil and iPad Professional is to undertake UIPencilInteractionDelegate.

I cannot wait to see what you’ll do with this expertise. If you wish to know extra in regards to the improvement for iPad Professional and Apple Pencil, I recommend you watch these movies:

For reference, you possibly can seek the advice of the entire mission Xcode on GitHub.