Tag: Tutorial

Tutorial: Introduction to Apple’s new SwiftUI framework

Apple’s all-new declarative UI framework SwiftUI is here! It is not likely that adoption will be high in a professional environment for a little while, however, it is still fun to play with this new framework which could revolutionize app development. SwiftUI has some very powerful capabilities built in, such as the cross-device compatibility, automatic dynamic type support, automatic dark mode support, built in localization and accessibility features. In this tutorial, we will be creating a small app where we will display a list of safari animals and then be able to see details on our selected animal.

Let’s start by creating our project, make sure that when you are setting up you select the “Use SwiftUI” tickbox. This will set up your default project with a different looking AppDelegate and a new SceneDelegate.swift file.

First of all, we want to create our Animal model file, which will contain all of our attributes for our given animal. Our Animal is going to conform to the Identifiable protocol, by having an id Int variable and also have a name, description and imageName. We also will have a dynamic variable which will return an Image object (this is comparable to a UIImageView in UIKit).

https://gist.github.com/rtking1993/50f433758c9bc43cb444bf7ad5d5c7c7

Then we will add this extension file on Animal, containing static constants of animals that we are going to hardcode into our app. Here we are going to just add four animals, however, feel free to add more yourself. Don’t forget to add an image to the project for each animal you add.

https://gist.github.com/rtking1993/0961143d63c39ea7488405cd371e843a

Now we have our animal information in our app, we can work with our new framework SwiftUI. Let’s start by adding this code as AnimalList.swift, here we are going to create our list of animals that when tapped will navigate us through to our details page.

First of all, take a good look at the syntax below. All of the Navigation and View objects are carefully nested in a specific order. We have the NavigationView encompassing everything at the top layer, inside this, we have a List which takes an array of our Animal objects. The list is composed of NavigationButtons which have a destination of our AnimalDetails view. Inside the NavigationButton we have our AnimalRow to give us our list. You will also notice the navigation bar title modifier which changes the title attributes of our NavigationView.

https://gist.github.com/rtking1993/872f24ea180a58f05ba416346b460a36

For each row in the list, we need to create our AnimalRow view. To do this we will create AnimalRow.swift, which will be instantiated with an animal and simply display the name of the animal.

https://gist.github.com/rtking1993/8a75a007e64bd319d66211184a246f04

Then we need to create our details page, our details page takes an animal model and uses that to display relevant information on the page. Here we create a VStack (vertical stack view) and add a CircleImage and another VStack. Our second VStack will contain our Text elements (comparable to UILabel’s) with animal name and description. We also add some spacing and padding to help let the views breath a little bit.

https://gist.github.com/rtking1993/931e6b513a3e6dc140d848eddb7db2ba

Finally, we will add this simple supporting view which will help us elegantly display the image of our animal. This view takes an image, clips it to the shape of a circle, overlays a white circle around the image and then provides a shadow underneath to give a perception of depth. This creates a great visual effect for your users, all inside a handy little self-contained view.

https://gist.github.com/rtking1993/e32de623605e2380a9a168f9abdddda5

That is it, we are all done and now if you build the project you should see your first SwiftUI app running. This is only a very simple example and my first time using SwiftUI. It will be exciting to see how others use SwiftUI for much more complicated use cases, as I can already see how powerful this framework is.

The source code for the finished SwiftUI example project is available here:

https://github.com/rtking1993/Safari-Animals

June 5, 2019
Tutorial: Creating CAShapeLayers using UIBezierPaths
Icons are essential in iOS development. They can be used to display navigational information throughout your application, many of which will be familiar to the user, such as the search and home icon, as they are similar throughout app design.

But what is the best way of delivering these icons to your users? We could create image assets, drag them into your project and set a UIImageView image property to that icon. This is simple, easy and painless.

Another option is to draw your icon using CAShapeLayer. This sounds like more work than the original option, but don’t tune out just yet because I am going to explain to you the advantages of drawing your assets using CAShapeLayers and UIBezierPaths.
1. Your drawing is going to look crystal clear on any screen, no matter what screen resolution you are working with. You can draw your icon on 1x, 2x or future 5x screens and it will not degrade at all.
2. If you have to change your icon color to indicate a selected state, this is as easy as one line of code setting the color of the CAShapeLayer.
3. You are able to make adjustments to the size, line thickness, color and other properties with minimal code change as opposed to creating multiple assets for different sizes.
4. If you have one image asset, that needs to also have a selected state. You there are two image assets. Each image asset will need to exist in 1x, 2x and 3x resolution. Now you have six image assets. Six image assets which are a variation of one image. This is not efficient and will increase your application bundle size, which means larger downloads every time your user updates your app.
Hopefully, now I have convinced you that drawing your icons is a good idea, let me now show you how easy it is to do!

Tutorial:

We are going to start with a single view application template. Inside the first view controller, we are going to put a UIView and two buttons. The two buttons are going to be used to cycle through our shapes that we will be drawing inside our UIView. Connect the UIView and two buttons up with some outlets and IBActions like I have in the picture below.

I always like to deal with degrees instead of radians so I have used a small utils class with a top-level function to help me work in degrees. You can copy it below.

https://gist.github.com/rtking1993/a2ddbfd6d46d1caa7f82f55d7f715680

Now we are going to start drawing our shapes, all of our shapes are going to be created using UIBezierPaths. Our UIBezierPaths are going to be instantiated with a CGRect which is going to be the bounds of our UIView. Inside this coordinate space we are going to be manually drawing the lines, points, and arcs of the shapes. This requires a little bit of practice but is very rewarding once you get the hang of it. For now, you can just copy some of the shapes I have created for you.

https://gist.github.com/rtking1993/c0c7eaab374e1d25a3e2944f370771df

Now we just have to add the code to our UIViewController to show our UIBezierPaths as CAShapeLayers. Here you can see that we are instantiating an array of CAShapeLayers which is going to contain all of our shapes.

We have an index which we will be modifying using our two buttons, previous and next. Every time the index changes, our property observer, didSet, on the index will change the current shape being displayed inside our UIView, called shapeView.

If we wish to modify the stroke color, fill color, stroke width of the icons we can do so inside the shapeCreator helper function.

https://gist.github.com/rtking1993/36a0686c5d47af88848994fc075ddedd

When you build and run your project you should see something similar to this screenshot. You should be able to cycle through a selection of four icons. I would encourage you to have a play around with UIBezierPaths to see what icons you can create inside your applications using CAShapeLayers.

The source code for the finished CAShapeLayer example project is available here:

https://github.com/rtking1993/CAShapeLayers
April 18, 2018
Tutorial: Using Swifts Codable Protocol

Parsing JSON into objects is a core part of object orientated programming. Almost every application relies on using a process to decode JSON safely. In Swift now, Apple has provided a mechanism to help simplify this process for developers.

Swifts Codable protocol maps the coding keys on your object models to the JSON that has been retrieved. This means that developers have to write very little code in the process. We only have to ensure that our coding keys map correctly to the values we are expecting in our JSON.

Tutorial:

We are going to make a simple app that uses the Decodable protocol to create Article objects from New York Times’ free article API. It is time to start off with a new single view application and create a UITableView inside your first ViewController.

If you would like to access the New York Times’ free API you will need to register here:

https://developer.nytimes.com

After you have registered you will be given an API key, which you will need to attach to the API call in the Networking class we will build later.

We are going to start the project by building the model file. This is going to be the structure that our Article will be created from with the JSON that we retrieve from the New York Times API. We are going to define two structures in this file, one will be Articles (plural) and one will be Article (singular).

Our JSON will be decoded into Articles, which is simply the number of articles in an Integer and an array of Articles. One important thing to remember when using Codable and Decodable protocols is that all of the objects inside the Decodable object must also be Decodable. This means our Article struct also has to be Decodable.

Now inside our structs, we are going to define our coding keys. These are the strings that will map our JSON values into our objects properties.

https://gist.github.com/rtking1993/67337dc066295f38c069240154e57fac

Next, we want to create our ArticleRemote class, this is going to contain our networking code. By putting your networking code into a separate class it will tidy up your view controllers.

Inside our ArticleRemote class, we just have one static function that will retrieve our Articles in JSON. Once the network call has been completed and we are sure there are no errors we can instantiate a JSONDecoder object, this will decode the JSON into our Articles object.

https://gist.github.com/rtking1993/84db0ac692f088243ec86b19c0d039c0

Now we can fill our ArticleViewController with the code required to display the Articles that we have now created using our remote request. We are simply going to display the title for each article and give the ability for the user to tap the cell and be taken to the article.

https://gist.github.com/rtking1993/37f0c3faadaf75d271873f845ab9235e

The last thing we want to do is connect up our ArticleViewController to the storyboard. We need to create a UITableView that is constrained to the edges and connect it up to the outlet, datasource, and delegate for the UIViewController.

If you build and run your project now you should get a live list of the latest Technology articles fresh from the New York Times!

The source code for the finished codable example project is available here:

https://github.com/rtking1993/CodableTests

April 11, 2018