xCode Workshop 2 – Tables and Checklists

Today’s morning workshop was all about creating those all so familiar table structures that I am all to familiar seeing on the iOS platform. Although I was keen to see how these were created, I knew from some tutorials I had looked at before this that it required a step up in coding knowledge needed. Despite these reservations, I cracked on to see if I could get my head round it.

The first step was to load a ‘Table View Controller’ into the ‘Main.Storyboard’. This function allowed a simple table interface to be created by just dragging it into the space. Unfortunately for me, this was the only step using the ‘Main.Storyboard’ interface for the creation of the table and checklist application. It was now time to go to the ‘View.Controller’ for the actual coding to begin.

Screen Shot 2015-02-12 at 13.45.42The fist stage was to create an array to contain the checklist objects. Once the first one had been created, the following objects simply used the same three lines, only altering the ‘var’ class title so that it knows where to add the information to in the table. For this test app I just used:
‘New Task 1’, ‘New Task 2’ and ‘New Task 3’ so that I could easily identify if they appeared correctly when testing it out in the xCode application simulator.

Next we created the first of two table view data delegate methods. In this, we needed to tell the ‘TableView’ how many rows the table will contain using:

Screen Shot 2015-02-12 at 13.52.50

to count the number of items in the array to get that value to display in the table.

The second table view delegate method was used to return the fully configured cell that the ‘TableView’ is going to display. After creating a cell from the prototype we allocated an identifier ‘ItemCell’ in the storyboard, the next stage was to create a reference to the label that was placed in the cell. To do this, the label was simply given a tag (in this case 100) so that it could be referenced at any point within a cell.

Screen Shot 2015-02-12 at 13.58.27

Creating a simple instance of an item from the item array, Screen Shot 2015-02-12 at 14.07.49the ‘indexPath.row’ was used which was passed into the method to act as the index for the array.

After that, we set the labels text to the name taken Screen Shot 2015-02-12 at 14.25.15out from the array created earlier. We then called the method created to configure the checkmark feature, passing it to the cell and the items. I simply then returned the cell from the ‘TableView’ to display in the list.

To toggle the checkmark icon to the ‘on’ and ‘off’ state accordingly and to make sure that it only displays when a user selects it, the ‘deselectRowAtIndexPath’ toggles the selected state of the cell off after touching it. I also added the feature to be able to un-check the item from a list so that tasks could be easily changed between the two options.Screen Shot 2015-02-12 at 14.32.26

Below is what I finished with a the end of the workshop:

I have to say that this workshop was slightly more tricky to get my head around than the others had so far, but I guess that was to be expected. On a more positive note, I am preferring these xCode using Swift workshops much more in comparison to the Processing ones as I think that I am progressing with my coding ability as a more solid rate.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s