Creating Code Snippets in Xcode

What are code snippets?

Code snippets are as the name suggests, short pieces of code that can quickly be inserted into your code file. This is done either by dragging the snippet or by typing out the completion. Code snippets are very easy to create and use and can be applied in a wide variety of situations.

We will look at how you can create & use snippets. The following example is done in a playground, but this could be done from anywhere within Xcode.

Note: The example below was performed on Xcode 11.7

How do we create code snippets?

  1. Start off by writing the code or text that you want to convert into a snippet. For example, I have a set of comments that I add at the start of every function. Write it down.
/**
 This function performs a comparison of the 2 objects
 - important: This function does not perform data validation.
 - returns: `Bool`.
 - requires: iOS 13 or later
 - Since: iOS 13
 - parameter lhsValue: This holds the value on the lhs of the operator
 - parameter rhsValue: This holds the value on the rhs of the operator
 - Example: `var answer =  venueAddress == hotelAddress`
 - author: Arun Patwardhan
 - copyright: Copyright (c) Amaranthine 2020
 - date: 14th September 2020
 - version: 1.0
 */

2. Select it.
3. From the menu bar select Editor > Create Code Snippet.

This brings up the snippet editor.
4. Give your snippet the following details.

OptionDescription
NameThis is the name of your code snippet.
PlatformThis determines whether your snippet is available only for certain platforms: say only for iOS.
AvailabilityThis determines the place where the snippet can be added.
CompletionThis is the word that we will be typing in the Xcode editor to trigger the implementation of the snippet
LanguageThis specifies the language for which the snippet will be applied.

Name: Func Documentation

Language: Swift

Platform: All

Availability: All scopes

Completion: doc

Note that the values for Name and Completion can be whatever you want.

This is how the snippet should look.

5. Now we will try to use it in the editor. Start typing the completion word in the Xcode editor.

6. Select the snippet with your name and completion.
7. Hit enter. You should see the comments you want appearing in the editor.

Placeholder

We can make our snippet above even better by using placeholders. Placeholders are pieces of text that can be replaced by the user. They also give information about what is expected in the placeholder.

We can add place holders by simply typing the hint inside placeholder brackets. Placeholder brackets are nothing but open <# and closing #>. For example:

<# some text #>

Which appears as

The user will simply click on the “some text” placeholder.

There are plenty of places in our comments where we can use placeholders. When we use the code snippet it should put comments with place holders in them.

  1. Let us change the comments in our Xcode editor first. We will edit the snippet later on. Make the changes as shown below.
/**
 <# put the description of your function here #>
 - important: <# mention some important points here #>
 - returns: `<# return type #>`.
 - requires: iOS  <#iOS Version#>  or later
 - Since: iOS  <#iOS Version#>
 - parameter <#param 1#>: This holds the value on the lhs of the operator
 - parameter <#param2#>: This holds the value on the rhs of the operator
 - Example: `<#put some example code here#>`
 - author: Arun Patwardhan
 - copyright: Copyright (c) Amaranthine 2020
 - date: <#day#>  <#month#>  <#year#>
 - version: 1.0
 */

We have made the following items into comments.

  • Description
  • OS Version
  • Return type
  • Important comments
  • Parameter 1 & 2 names
  • Sample code
  • Day, Month, & Year

Of course, there are other things we could change too. Feel free to make any other changes you can think of.

2. Let us now copy these changes to the code snippet we created. Copy the code from the Xcode editor.

To bring the snippet editor again simply click on the add object button in the upper right hand corner of Xcode.

4. Select the snippet from the list on the left and click edit.
5. Paste the code that you just copied. Your snippet editor should look like this:

6. Click on ‘Done’ once you are finished making changes. Your snippet will now be ready.

7. Try adding the snippet into your editor just like before. Simply type in the completion for your snippet.

Dragging snippets

We can use the autocompletion we saw earlier. But it is also possible for us to drag snippets.

Exporting code snippets

Once created it is possible to export/import code snippets too. All the snippets are located in the following folder.

~/Library/Developer/Xcode/UserData/CodeSnippets/

Any snippets you have created will be located there.

Any new snippets to be added will have to be added there.

Summary

Code snippets are easy to create and have several advantages:

  1. They improve the developers experience
  2. Promote consistent code
  3. Speeds up the process of writing code
  4. Encourages developers to use each others snippets and gain the first 3 advantages.

Creating and using snippets is very very easy and has a lot of benefits. So go ahead and create snippets.

Advertisement

Creating custom templates for iOS App Development

What are Xcode templates?

Xcode templates are basically pre-created files which we use when we create new projects or project files. So every time you go through the process of creating a new project File > New > Project > iOS > Single View App you are using the Single View App template.

While most of the templates are good enough we can easily create our own templates.

Why do we need custom templates?

The templates available out of the box are good for common situations. But we find that most of the times we end up creating a lot of file in our project. Sometime we implement common design patterns and architectures on a regular basis.

In such situations creating out own custom templates will help us save a lot of time during development.

The other advantage is that this promotes a more consistent development experience in any organisation.

Now that we know what templates are and why we may need custom templates let us look at how we can create them.

Template Types

Before we go ahead and create templates let us examine what a typical template includes.

Navigate to the following path:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Templates/

Notice that there are 2 folders already created out here. File Templates & Project Templates. Let us browse through these folders.

File Templates

These are the templates used when a developer wishes to add a new file to an existing project. Under file templates you should see different folders in there. Each folder represents a certain category of templates. For example, User Interface is one category. Select it.

You should see multiple folders under it. The screenshot above shows the View template. As we can see the template itself is a folder with multiple files inside. The template ends with an extensions xctemplate. Let us look at those files.

  • ___FILEBASENAME___.xib
  • TemplateIcon.png
  • TemplateIcon@2x.png
  • TemplateInfo.plist

The first one is the XIB file which will be generated by this template. The ___FILEBASENAME___ placeholder will be replaced with an actual name when it is created.

The next 2 are simply images that will be used as icons for the template when we bring up the template wizard in Xcode.

The last one is the more important one. The TemplateInfo.plist. This is where we describe how the file creation process works. This is also where we configure options which will be presented to the user. We will look at this file in greater depth later on when we try to create our own templates.

Project Templates

These are the templates that are used when a developer decides to create a new project. Under project templates you should see different folders in there. Each folder represents a certain category of templates. For example, Application is one category. Select it.

I have the single view app template inside it. This is the most commonly used template when starting out with iOS App Development. You should see other familiar project templates. Feel free to examine the files in the folder. Let us have a look inside the Single View App template folder. You should see these items:

  • ContentView.swift
  • Main.storyboard
  • TemplateIcon.png
  • TemplateIcon@2x.png
  • Preview Assets.xcassets folder
  • TemplateInfo.plist

The first 2 files are the UI related files. One of the 2 will be selected based on the users choice between Storyboard and SwiftUI.

The next 2 are simply images that will be used as icons for the template when we bring up the template wizard in Xcode.

The Preview Assets folder is used with SwiftUI for previewing purposes.

Here too we have the TemplateInfo.plist file which configures the template options at the time of creation. We will explore this file in greater depth when we try to create our own project template.

How can we create them?

In this article we will look at creating 2 types of templates.

  1. File Templates
  2. Project Templates

Warning: It may be a good idea to try this out on a test computer so that you do not break anything on the computer you use everyday.

Preparation

Before we get started let us prepare the folders where we will be storing our custom templates.

  1. Navigate to the following folder.
~/Library/Developer/Xcode/Templates/

Note, you may have to create this folder.

  1. There should be 2 folders inside: File Templates, Project Templates. If these folders are not there then go ahead and create them.

We will be placing our templates in these folders.


TopicPage
Creating File templates2
Creating Project templates3

Download

You can download the templates from these links.

Note

This code has been tested on Xcode 11.3.1 on macOS Catalina 10.15.3

Creating your own Drag and Drop DMG

What are Disk Images?

Disk images are a means of archiving data. They are created using a tool called Disk Utility which is a File System Management Utility of macOS. Disk Images follow the extension ‘.dmg‘ and are only compatible with macOS.

Disk Images are a popular way of distributing applications for macOS. They provide the capability of compressing large files and make delivery over the internet very easy.

In this article we are going to look at how we can create disk images for application distribution.

Creating the DMG Folder for distribution

  1. Create a Background image. This can have any design. It’s a good idea to have arrows or other visual aids to assist others during installation.
  2. Create a new Disk Image. Open Disk Utility.
  3. Click on File > New Image > Blank Image
  4. Leave the default settings as is. Choose the size that you desire.
  5. Mount the Disk Image.
  6. Create a folder called background in the mounted volume.
  7. Save the background image in the folder we just created.
  8. Now we will hide the background folder. Switch to terminal and run the following command.

     
    cd /Volume/InstallDMG/
    mv background .background
    


    Here we are simply renaming the background folder with a ‘.’ before it. This hides the folder from the GUI.

    Now we will prepare the payload. This can be any file or folder we wish to install. For the sake of this demo I will be choosing Mozilla FireFox. In reality you would be distributing your own application.
  9. Copy the FireFox app into the mounted volume.
  10. Open “Show View Options“.
  11. Restrict the mounted volume to icon view only. Feel free to customise the other settings as you wish. This includes icon size.
  12. Drag and arrange the icons in your mounted window to match the background.
  13. Eject the disk image. 
  14. Make a duplicate copy of the image file. This can act as a reference for future images you wish to create.
  15. Now we will convert the disk image into a read only compressed disk image. This will be the one that we will use for distribution. Open Disk Utility.
  16. Click on Images > Convert
  17. Select the InstallerDMG.dmg from Desktop or wherever you had saved it.
  18. Give it a new name and convert it to compressed format.

That’s it. You now have your own drag drop window ready for distribution.