Tag: Tutorial

Tutorial: Firebase Dynamic Lists

Google’s Firebase platform includes the Real-Time Database. This is a fantastic way to coordinate quickly changing data to your application. The beauty of using this mechanism is the fact that when a change is made to your data, a notification is sent to your application to update the relevant piece of data.

There are two main advantages of using this push system as opposed to polling the data. Firstly, the changes to the database are sent and displayed on your device almost immediately. The second advantage is that this system doesn’t require downloading all of the data in the list multiple times, but only the data that has changed when it changes.

Tutorial:

You can start with a test project that I have already prepared, it has all of the Firebase frameworks that you will require already set up using Cocoapods. This will save you a bit of time and enable me to focus on the more important aspects of Firebases Real-Time Database. The test project is available here:

https://github.com/rtking1993/FirebaseTest

Now we should be starting with a single view application template with Firebase frameworks set up and ready. The first thing we should do is get the outlets properly connected to our MainViewController file. We will need a UIView, UIButton, UITextField and a UITableView. Place these onto your storyboard, similarly to what I have done below.

Next, we want to connect these objects up to some outlets, which should look something like this in your MainViewController.swift file.

We are going to be displaying a list of our items that are going to be connected to the Firebase Database. So we need to have a local instance of our items. Our items are going to be a simple model. Our model will look like this.

https://gist.github.com/rtking1993/4c0bc66ab37ab125ff92b7224e909295

This model will give us the ability to instantiate itself, either using regular parameters or a DataSnapshot that we will receive from the firebase server.

Now we can head over to our MainViewController.swift file and add an array of items. We are going to use a property observer called didSet on our array. The didSet property observer will be fired whenever the items array is set, we can put the code here to reload our table view. This way our UITableView will reload every time our items array is set.

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

Now that we have an array of items, we can fill our data source methods on our UITableView. If we do this as an extension of MainViewController outside of our class, we can keep the code nice and tidy. Just like the below example.

https://gist.github.com/rtking1993/69e4cce03241fc6f4f10c9f6d1c314de

Now we are going to create this class called ItemsRemote. It will allow us to remove networking code out of our MainViewController. It will have methods to post an item to the Database and get all of our items from the Database. Having this class improves the readability of the ViewController and also enables us to have a constant DatabaseReference point for our list of items, this is important so we know we are always reading and writing from the same place.

https://gist.github.com/rtking1993/7eb1c2c668bc01d80beddceb923690e2

The last thing we need to do is add the important methods into the MainViewController.

The MainViewController will start with the viewDidLoad method, so inside here, we will call the method loadItems(). Our loadItems function uses our ItemsRemote class to get the list of items from the database. It then sets the items that it retrieves into our array of items, which will then refresh the table view.

The other two methods are going to enable us to post items to the server. All we need to do is create the add IBAction which will be called whenever the add button is pressed. We can then use the text inside the UITextField to create an Item and post it to the database using our ItemsRemote class. The last helper function called textFieldFinished just dismisses the keyboard and sets the text of the UITextField to nil after we have finished posting.

https://gist.github.com/rtking1993/9d118e0a3539680c67eb77eb30184cd7

If you have followed all of the steps correctly and I haven’t missed anything out, your item list should be working.

The source code for the finished dynamic item list is available here:

https://github.com/rtking1993/FirebaseTest/tree/feature/finished

April 4, 2018
Tutorial: iOS Photo Slider View

This is an effective image slider that you can use to show your users multiple images inside a single window. This the user can swipe the Photo Slider or use the UIPageControl to change the current image.

Tutorial:

Start with an empty single application template. First, we put a UIView into the UIViewController in the main storyboard file. This UIView will become our Photo Slider. It needs to be constrained to the center of the UIViewController, have an aspect ratio of 1:1 and bound to the horizontal edges.

Then we want to make our custom photo slider view. We need to create the XIB and swift file for this view. The XIB will look something like this, with a UIScrollView, UIView for our content and a UIPageControl.

Now we want to create the PhotoSliderView.swift file. This is going allow us to configure our slider with as many images as we want. It will also be responsible for handling the tap event on the UIPageControl, allowing the user to tap it to change the picture. Most of the magic happens inside the configure method. This is where we will iterate through the images that we are passed and add a UIImageView to the correct frame.

https://gist.github.com/rtking1993/6990bb1a3220cc023ad62cf46e967404

We need to call the configure method in the UIViewController. We have defined an array of six images, which we pass into the configure method. We are going to call this configure method inside of viewDidAppear so that we are sure of the photo sliders frame before we start manipulating the frames inside the photoSliderView. If we try to do this inside viewDidLoad, we could get unexpected behavior.

The last thing we need to do is set up our outlet in the main ViewController and don’t forget to change your UIView class to the PhotoSliderView. Now it is time to build and run and you should see a great result.

The full source code for a test project I have created for creating this photo slider is available:

https://github.com/rtking1993/PhotoSlider

March 21, 2018
Tutorial: Improving your animations with UIViewAnimationOptions

Animations can add a lot of magic to your application. They can be used to impress your users with great effects and give important user feedback to encourage a positive behavior. Creating animations using the Apple supplied UIView API is quite easy and by using UIViewAnimationOptions correctly, you can either create or improve the animations in your app.

You might be familiar with the UIView animation API. However one of the lesser used parts of this API is including the UIViewAnimationOptions. This allows you to improve the realism of your animations. These options change the animations time over progress ratio. By doing this, objects accelerate or decelerate whilst animating. This is important because, in the real world, objects do not start and stop instantly and do require time to speed up and slow down. Here is a diagram which shows two of the options. EaseIn starts the animation slowly and accelerates the progress, while EaseOut starts the animation quickly and decelerates the progress.

Tutorial

Start off with a simple single page application template. Set yourself up three cars (all at the same Y position origin) and a race button above the vehicles. The labels above the vehicles and the red finish line are optional.

Then we want to create the necessary outlets for the cars and their top constraints. It is very important that the outlets to the constraints are correct, as these are the constraints that will be manipulated in the animation block.

Now we should be ready to start animating our outlets. I have created some constants within the UIViewController, to help simplify the animation code. You can do the same if you wish.

Our animation code is going to sit entirely within our IBAction method. It’s a good idea to keep your IBActions as short as possible. However, because this is a simple demo I will make an exception. When we press the “Race” button, the top constraints for the cars will be modified to the position needed to help them cross the finish line. The cars will be animated for the same length of time and cover the same distance, but each in a different way according to their UIViewAnimationOptions.

Modify your constraint constant and call layoutIfNeeded inside the animation block, this will use Auto-Layout to perform the animation. Note that it is best practice to call layoutIfNeeded function before the animation block as well to ensure that all pending layout operations have been completed.

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

Here is the full source code for the project:

https://github.com/rtking1993/UIViewAnimationOptions

March 14, 2018