Show Menu

Looking to hire an app developer?

Submit your 30 day Job Listing for FREE

In this iOS8 Swift Tutorial, I will show you how to create a To-Do like application using Swift, the new programming language from Apple. This tutorial is based on the Objective-C Counterpart over on the Apple Website

Are you wanting to build a Swift application that connects to a server? You might be interested in this back-end tutorial with Parse.com: Swift: Create user sign up based app with Parse.com using PFUser

If, you’re new to the iOS8 Swift programming language, you might find these resources extremely useful:

Setting up the project

Create a new project on Xcode. I selected Single-View Application as a template so a storyboard and view controller is already created. Name the project and select Swift as the language.

xcode 6 swift single view application

Building the interface

Now we need to add in the Text Field, Navigate to Main.storyboard and you will see a View Controller object on the storyboard canvas. Now drag a Text Field object to the View Controller.

xcode 6 swift view controller

Resize the text field so it fills the width of the View Controller. You can see the guides appear to help you place it right.

xcode 6 swift uitextfield objects

Now, open the Attributes Inspector on the left sidebar and look for ‘Placeholder’ and add the value New to-do item.

xcode 6 attributes inspector

credit: https://developer.apple.com/library/prerelease/ios/referencelibrary/GettingStarted/RoadMapiOS/Art/attributes_inspector_2x.png

Run the app on the Simulator and you will be able to see the text field on the screen.

Auto Layout

While the app displays fine when on Portrait mode, the layout isn’t right when viewed in Landscape mode. To fix this, go to Main.storyboard and select the text field. Follow the next three steps:

1. Control-drag the text field to the top of the screen. A shortcut menu appears when you release the drag. Select “Top Space to Top Layout Guide”.

Xcode 6 Auto Layout

credit: https://developer.apple.com/library/prerelease/ios/referencelibrary/GettingStarted/RoadMapiOS/Art/autolayout_menu_2x.png

2. Similar to Step 1, control-drag the text field to the right. Select “Trailing Space to Container”.

3. Control-drag the text-field to the left and select “Leading Space to Container”.

Now if you rotate the app on the simulator the text field resizes depending on the device’s orientation.

Table View

We will need a view with a list of to-do items. This can be done using the Table View Controller.

1. Drag a Table View Controller to the canvas

2. In the Attributes Inspector, check the ‘Is Initial View Controller’ option

3. Select the Table View which is under the Table View Controller, and in the Attributes Inspector select ‘Static Cells’ for the Content option

4. Select the top cell and select ‘Basic’ for the Style option.

5. Select the label on the cell and add a task name.

Navigation Controller

Right now there are two View Controllers in our app but there is no transition between them. We’ll need to add a navigation controller and segues (which are transition between scenes).

1. Select the Table View Controller and in the menu go to Editor > Embed In > Navigation Controller. This adds a Navigation Controller to the storyboard with an initial scene.

2. Select the Navigation Item under the Table View Controller, and in the Attributes Inspector type My to-do list as the Title.

3. From the Object Library, drag a Bar Button Item to the right of the navigation bar on the Table View Controller.

4. Select the Bar Button Item (which has a default value of “Item”) and in the Attributes Inspector, in the Identifier option, choose Add. This will change the button to the Add symbol (+).

xcode 6 iOS Simulator

credit: https://developer.apple.com/library/prerelease/ios/referencelibrary/GettingStarted/RoadMapiOS/Art/ios_simulator_nav_bar_2x.png

To configure the add button:

1. Control drag the Add Button to the ViewController

2. On the shortcut menu that appears, select “show detail”

xcode 6 show detail add button

ViewController Navigation Bar

We’re going to have a different Navigation Bar on the ViewController to accommodate different actions.

1. Select the ViewController and in the menu go to Editor > Embed > Navigation Controller

2. Select the Navigation Item under the View Controller and in the Attributes Inspector set ‘Add To-do Item’ as the title.

3. Drag a Bar Button Item to the right of the navigation bar and choose ‘Done’ as the identifier (in the Attributes Inspector).

4. Drag another Bar Button Item to the left of the navigation bar and choose ‘Cancel’ as the identifier.

Custom View Controllers

1. Select the View Controller, go to the Identity Inspector and in the class select AddToDoViewController.

2. Create another View Controller file by selecting the Cocoa Touch Class template. Name it ToDoListTableViewController and make it a subclass of UITableViewController

xcode 6 show UITableViewController

3. Select the TableViewController in Main.storyboard, go to the Identity Inspector and in the class select ToDoListTableViewController

Add a Segue to Navigate Back

We need to add a segue for users to go back to ToDoListViewController when clicking ‘Cancel’ and ‘Done’ in AddToDoViewController.

Unwind segue actions declared in Swift classes are not recognised by Interface Builder. Therefore, we need to write some Objective-C code.

1. Create a Objective-C header file and name it ToDoListTableViewController.h and add the following code:


@interface ToDoListTableViewController (Workaround)

-(IBAction)unwindToList: (UIStoryboardSegue *)segue;

@end

2. In the ToDoListTableViewController.swift, change class ToDoListTableViewController to @objc(ToDoListTableViewController)class ToDoListTableViewController: UITableViewController

3. Reset the custom class for the TableViewController in the storyboard to ToDoListTableViewController

Now, go to Main.storyboard and Control-drag the Cancel button to the Exit item, and select unwindToList: from the shortcut menu. Do the same for the Done button.

xcode 6 swift to do ToDoListTableViewController

Running your app now will give you two views and you can navigate between them using the Add, Cancel, and Done buttons.

Adding Data to Views

Now, we are going to add data storage and behaviour using model objects so we can add our own to-do items into the app.

Creating a ToDoItem class

We’re going to create a ToDoItem class to represent an individual to-do item.

1. Create a new file. Select Cocoa Touch Class as the template and name it ToDoItem with NSObject as the subclass.

2. Add the following code to ToDoItem.swift to declare and initialize the properties of the class:


var itemName: NSString = ""
var completed: Bool = false
var creationDate: NSDate = NSDate()

init(name:String){
self.itemName = name

}

Load initial data

In ToDoListTableViewController.swift we need to initialize an array for the to-do items and load some initial data to the list.

1. Declare the to-do items array:


var toDoItems: NSMutableArray = []

2. Add a function to load some initial data:


func loadInitialData(){

var item1 = ToDoItem(name: “Buy milk”)
self.toDoItems.addObject(item1)

var item2 = ToDoItem(name: “Buy eggs”)
self.toDoItems.addObject(item2)

var item3 = ToDoItem(name: “Read a book”)
self.toDoItems.addObject(item3)

}

3. Call loadInitialData() in the viewDidLoad() method:


override func viewDidLoad(){

super.viewDidLoad()
loadInitialData()

}

Display the data

1. In ToDoListTableViewController.swift, you need to override the numberOfSectionsInTableView method:


override func numberOfSectionsInTableView(tableView: UITableView!) -> Int {

return 1

}

2. Next, override the numberOfRowsInSection method to return all the to-do items as rows:


override func tableView(tableView: UITableView!, numberOfRowsInSection section: Int) -> 

Int {

return self.toDoItems.count

}

Before you override the cellForRowAtIndexPath method, you must configure the cells in the storyboard:

1. In Main.storyboard, select the Table View.

2. Go to the Attributes Inspector and switch the Content attribute from Static Cells to Dynamic Prototype

3. Select the first cell and in the Attributes Inspector, locate the Identifier field and type ListPrototypeCell, and in the selection field choose None.

4. Now in ToDoListTableViewController.swift, override the cellForRowAtIndexPath method:


override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: 

NSIndexPath!) -> UITableViewCell! {

let CellIndentifier: NSString = "ListPrototypeCell"

var cell : UITableViewCell 

=tableView.dequeueReusableCellWithIdentifier(CellIndentifier) as UITableViewCell

var todoitem: ToDoItem = self.toDoItems.objectAtIndex(indexPath.row) as ToDoItem 

cell.textLabel.text = todoitem.itemName

return cell

}

If you run the app, you can see the initial data loaded in the list.

Mark As Completed

Now that our to-do items can be added to the list dynamically, we need a way to mark them as completed.

1. In ToDoListTableViewController.swift, override the didSelectRowAtIndexPath method:


override func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: 

NSIndexPath!) {

tableView.deselectRowAtIndexPath(indexPath, animated: false)

var tappedItem: ToDoItem = self.toDoItems.objectAtIndex(indexPath.row) as 

ToDoItem

tappedItem.completed = !tappedItem.completed

tableView.reloadData()

}

2. Go to the cellForRowAtIndexPath method and add the following code below the code that sets the text label of the cell:


if todoitem.completed{

cell.accessoryType = .Checkmark

}

else{

cell.accessoryType = .None

}

Now if you run the app, a checkmark will appear when you tap an item on the list. Tapping the item again will uncheck it.

xcode 6 swift to do tutorial checked complete uitableview

Add New Items

We can load initial to-do items and complete them but now we want to add our own items:

In AddToDoViewController.swift, you need to add a ToDoItem:


var toDoItem: ToDoItem?

Now we need to connect the text field and Done button to the view controller.

1. Open Main.storyboard.

2. Now open the Assistant Editor and select AddToDoViewController.swift so it opens in the assistant editor.

3. Control-drag the text field from the storyboard canvas to the swift file, and place it below the toDoItem variable we declared.

xcode 6 assistant editor

credit: https://developer.apple.com/library/prerelease/ios/referencelibrary/GettingStarted/RoadMapiOS/Art/assistant_editor_drag_2x.png

4. In the dialog that appears, type textField for the name.

5. Do the same for the Done button and type doneButton for the name.

6. The code would look like this:


@IBOutlet var textfield : UITextField

@IBOutlet var doneButton : UIBarButtonItem

To create a to-do item after tapping the Done button, we need override the prepareForSegue method:


override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!) {
    if sender as? NSObject != self.doneButton{
       return
    }
    if self.textfield.text.utf16count > 0{
       self.toDoItem = ToDoItem(name: self.textfield.text)
    }
}

The method checks if the Done button was tapped and if there is text in the text field. It then creates a ToDoItem. utf16count was used to calculate the length of the String. I’ve also added the following code to hide the keyboard when the background is touched:


override func touchesBegan(touches: NSSet!, withEvent event: UIEvent!) {
    self.view.endEditing(true)
}

Now that we have created a toDoItem, we need to display it in the list. In ToDoListTableViewController.swift, use the unwindToList method to add a new item:


@IBAction func unwindToList(segue:UIStoryboardSegue){

var source: ViewController = segue.sourceViewController as ViewController

var item: ToDoItem = source.toDoItem!

if item != nil{

self.toDoItems.addObject(item)

self.tableView.reloadData()

}

}

Now if you run the app, you are able to add new to-do items to the list.

xcode 6 swift to do tutorial final result

Download the application: [socialRansom link=”https://github.com/shivanarrthine/Todo-List-iOS-App-using-Swift/archive/master.zip” text=”Thank you, Download the Application here”]

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly


Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.


Written by:

iOS Developer and Tutorial Author

Comments

comments