{"id":554,"date":"2014-06-02T14:37:18","date_gmt":"2014-06-02T20:37:18","guid":{"rendered":"http:\/\/jamesonquave.com\/blog\/?p=554"},"modified":"2020-06-15T03:58:50","modified_gmt":"2020-06-15T09:58:50","slug":"developing-ios-apps-using-swift-tutorial","status":"publish","type":"post","link":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/","title":{"rendered":"Swift Tutorial  &#8211; Developing iOS Apps Part 1"},"content":{"rendered":"<h3 id=\"swift-tutorial\"><span style=\"color: #000000;\">Swift Tutorial<\/span><\/h3>\n<p><span style=\"color: #000000;\"><img decoding=\"async\" src=\"https:\/\/tctechcrunch2011.files.wordpress.com\/2014\/06\/img_0256.jpg?w=310\" alt=\"iOS Development moves to Swift\" \/><\/span><\/p>\n<p><span style=\"color: #000000;\"><strong>This tutorial updated to reflect changes in Xcode 8.3.1 and iOS 10, as of April 17, 2017<\/strong><\/span><\/p>\n<p><span style=\"color: #000000;\">Apple announced at WWDC a major change to the way iOS apps are developed, it can now be done using a new programming language called Swift. In my efforts to adapt and learn the language\u2019s common patterns and best practices, I will be posting regularly as I step through the learning process, sharing everything I find. I hope you decide to follow along!<\/span><\/p>\n<p><span style=\"color: #000000;\">In this tutorial we will build an iOS application that will pull down iTunes tracks from the iTunes web API (or application programming interface), display that information on the iPhone using a common UI element called a Table View, and finally allow us to drill down in to an album and play some of the tracks. If you are looking to develop your website further hire professional <span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/trustedmedia.co.uk\">web development agency<\/a><\/span> services, to help you. Web designers are in the business of selling web designs. That is the first principle of business for a web design firm, as it is for many other types of businesses. There is nothing new here except that the whole purpose of a web site is to create business for the owner, and a site just gathering dust does not do that. No one says that a web design needs to create direct sales for any business but it must connect with the business owner&#8217;s market and engage that market. If the site doesn&#8217;t connect with the market it is just junk collecting dust. It may be a beautiful piece of work but it&#8217;s still collecting dust. You can <span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;check this link right here now&quot;}\" data-sheets-userformat=\"{&quot;2&quot;:6334,&quot;4&quot;:[null,2,16777215],&quot;5&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;6&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;7&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;8&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:[null,2,0]},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;10&quot;:2,&quot;14&quot;:[null,2,0],&quot;15&quot;:&quot;Arial&quot;}\"><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/webdesignottawa.com\/why-it-is-a-bad-idea-to-get-an-offshore-web-developer\/\">check this link right here now<\/a><\/span> for the web design ottawa.<\/span><br \/>\n<\/span><\/p>\n<h3 id=\"tutorial-index\"><span style=\"color: #000000;\">Tutorial Index<\/span><\/h3>\n<ul>\n<li><span style=\"color: #000000;\">Hello World (You are here!)<\/span><\/li>\n<li><span style=\"color: #000000;\">Making a web API request and parsing the JSON<\/span><\/li>\n<li><span style=\"color: #000000;\">Some best practices using Protocols and Delegates<\/span><\/li>\n<li><span style=\"color: #000000;\">Adding an interactive Table View<\/span><\/li>\n<li><span style=\"color: #000000;\">Async image loading and caching<\/span><\/li>\n<li><span style=\"color: #000000;\">Interaction with multiple views<\/span><\/li>\n<li><span style=\"color: #000000;\">Animations, Audio, and Custom Table View Cells<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #000000;\">So I\u2019m going to start with a pretty basic app and explain how the code works. Ready? Here we go\u2026<\/span><\/p>\n<h3 id=\"the-basics\"><span style=\"color: #000000;\">The Basics<\/span><\/h3>\n<p><span style=\"color: #000000;\">Swift opts to use a Javascript-like \u2018var\u2019 keyword to define any new variable.<\/span><\/p>\n<p><span style=\"color: #000000;\">So for example to create a new variable with a bit of text in it, you would have this:<\/span><\/p>\n<div id=\"highlighter_871847\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">var<\/code> <code class=\"plain\">myString = <\/code><code class=\"string\">\"This is my string.\"<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">This is declared with a <code>var<\/code> so the variable can change at any time, similar to most languages.<\/span><\/p>\n<p><span style=\"color: #000000;\">However the <code>let<\/code> keyword creates constants. These can not ever be changed once they are defined. If you try, a compiler error will appear and the program just won&#8217;t run.<\/span><\/p>\n<div id=\"highlighter_290128\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">let<\/code> <code class=\"plain\">someConstant = 40<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">In this case kSomeConstant is implicitly defined as an integer, or <code>Int<\/code>. If you want to be more specific you can specify which type it is like so:<\/span><\/p>\n<div id=\"highlighter_521011\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">let<\/code> <code class=\"plain\">someOtherConstant: <\/code><code class=\"color1\">Int<\/code> <code class=\"plain\">= 40<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">With both arrays and dictionaries, they are described using brackets []<\/span><\/p>\n<div id=\"highlighter_242508\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">var<\/code> <code class=\"plain\">colorsArray = [<\/code><code class=\"string\">\"Blue\"<\/code><code class=\"plain\">, <\/code><code class=\"string\">\"Red\"<\/code><code class=\"plain\">, <\/code><code class=\"string\">\"Green\"<\/code><code class=\"plain\">, <\/code><code class=\"string\">\"Yellow\"<\/code><code class=\"plain\">]<\/code><\/span><\/div>\n<div class=\"line number2 index1 alt1\"><span style=\"color: #000000;\">\u00a0<\/span><\/div>\n<div class=\"line number3 index2 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">var<\/code> <code class=\"plain\">colorsDictionary = [<\/code><code class=\"string\">\"PrimaryColor\"<\/code><code class=\"plain\">:<\/code><code class=\"string\">\"Green\"<\/code><code class=\"plain\">, <\/code><code class=\"string\">\"SecondaryColor\"<\/code><code class=\"plain\">:<\/code><code class=\"string\">\"Red\"<\/code><code class=\"plain\">]<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">You can access the members of an array with integer value indexes, and the members of a dictionary with String keys (or other types, but that&#8217;ll come in later tutorials)<\/span><\/p>\n<div id=\"highlighter_492763\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">let<\/code> <code class=\"plain\">firstColor = colorsArray[0]<\/code><\/span><\/div>\n<div class=\"line number2 index1 alt1\"><span style=\"color: #000000;\"><code class=\"comments\">\/\/ firstColor is now \"Blue\"<\/code><\/span><\/div>\n<div class=\"line number3 index2 alt2\"><span style=\"color: #000000;\">\u00a0<\/span><\/div>\n<div class=\"line number4 index3 alt1\"><span style=\"color: #000000;\"><code class=\"keyword\">let<\/code> <code class=\"plain\">aColor = colorsDictionary[<\/code><code class=\"string\">\"PrimaryColor\"<\/code><code class=\"plain\">]<\/code><\/span><\/div>\n<div class=\"line number5 index4 alt2\"><span style=\"color: #000000;\"><code class=\"comments\">\/\/ aColor is now \"Green\"<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">There\u2019s a lot more to go over, but I think these basics are important to get a start going on to the tutorial. So with that, let\u2019s move on to Hello World. If you want to play around with this a bit yourself before getting going on our first iPhone App. Be sure to <span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/github.com\/jquave\/Swift-Tutorial\/tree\/Part1Playground\">check out the Playground containing this sample code on Github<\/a><\/span>.<\/span><\/p>\n<h3 id=\"hello-world\"><span style=\"color: #000000;\">Hello World<\/span><\/h3>\n<p><span style=\"color: #000000;\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/blog\/wp-content\/uploads\/helloWorld-300x199.jpg\" alt=\"Hello World in Swift and iOS\" \/><\/span><\/p>\n<p><span style=\"color: #000000;\">First, we\u2019re going to write the simplest app imaginable to get started, Hello World. This segment comes directly from my upcoming book on Swift development, but it\u2019s so important and fundamental to getting started I thought it would be good to release for free here.<\/span><\/p>\n<p><span style=\"color: #000000;\">Our app will only do one thing: print \u201cHello World\u201d to the console. You\u2019ll need a developer copy of Xcode in order to follow along, which requires a developer account. If you have one, head on over to <span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"http:\/\/developer.apple.com\">http:\/\/developer.apple.com<\/a><\/span> and get your copy before we begin.<\/span><\/p>\n<p><span style=\"color: #000000;\">So now you\u2019ve got your IDE set up. Let\u2019s write hello world out to the console. This example demonstrates the simplest app that can be built, and more importantly shows that you\u2019re environment is set up correctly.<\/span><\/p>\n<p><span style=\"color: #000000;\">Set up an Xcode project using the single-view application template, and make sure you opt for Swift as the language.<\/span><\/p>\n<p><span style=\"color: #000000;\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/tutImg\/SingleViewApp.png\" alt=\"\" \/><\/span><br \/>\n<span style=\"color: #000000;\"> <img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/tutImg\/SwiftLang.png\" alt=\"\" \/><\/span><\/p>\n<p><span style=\"color: #000000;\">You should now find an AppDelegate.swift file in the project hierarchy. Inside of this file find the line that says:<\/span><\/p>\n<div id=\"highlighter_126287\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"string\">\"\/\/ Override point for customization after application launch.\"<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">Replace this line with our amazing hello world code:<\/span><\/p>\n<div id=\"highlighter_683595\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"functions\">print<\/code><code class=\"plain\">(<\/code><code class=\"string\">\"Hello World\"<\/code><code class=\"plain\">)<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/images\/HelloWorldCode.png\" alt=\"Hello World Swift Code\" \/><\/span><\/p>\n<p><span style=\"color: #000000;\">Now press run and you should see a blank app boot up, and the words \u201cHello World\u201d print to the console.<\/span><br \/>\n<span style=\"color: #000000;\"> Note that this will not show up in the iPhone simulator. Look at the bottom of your Xcode window and you\u2019ll see a console that says \u2018Hello World!\u2019.<\/span><\/p>\n<p><span style=\"color: #000000;\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/images\/HelloWorldOut.png\" alt=\"Hello World Output\" \/><\/span><\/p>\n<p><span style=\"color: #000000;\">Congratulations! You just wrote your first app in Swift! This app probably won\u2019t win any awards, let\u2019s trying doing something a little deeper\u2026<\/span><\/p>\n<h3 id=\"adding-a-table-view\"><span style=\"color: #000000;\">Adding a Table View<\/span><\/h3>\n<p><span style=\"color: #000000;\">In this section, we\u2019re going to actually put some stuff on the screen.<\/span><br \/>\n<span style=\"color: #000000;\"> Open up your Main.storyboard file in Xcode and lets drag in a \u201cTable View\u201d object from the Object Library (don\u2019t use a table view controller.) Position this fullscreen in your app window and make sure it lines up with the edges. Then resize the height by dragging down the top edge and giving a little bit of space (this gives room for the status bar at the top of the phone.) If you run the app at this point, you should see an empty table view in the simulator.<\/span><\/p>\n<p><span style=\"color: #000000;\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/tutImg\/TableView.png\" alt=\"UITableView drag on to StoryBoard\" \/><\/span><\/p>\n<p><span style=\"color: #000000;\">The empty table view in the iPhone Simulator:<\/span><\/p>\n<p><span style=\"color: #000000;\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/images\/emptyTableview.png\" alt=\"The empty table view in the iPhone Simulator\" \/><\/span><\/p>\n<p><span style=\"color: #000000;\">Now we need to set up a delegate and data source for the table view. The Data Source is an object that informs the Table View of which data to show. The delegate let&#8217;s us handle interactions such as tapping a row on the Table View.<\/span><\/p>\n<p><span style=\"color: #000000;\">Setting these outlets is easy to do in interface builder. Just hold control, and then click and drag from the tableview to the \u201cView Controller\u201d object in your storyboard\u2019s hierarchy, and select \u2018data source\u2019. Repeat with the \u2018delegate\u2019 options.<\/span><\/p>\n<h3 id=\"setting-up-the-uitableview-data-source-and-delegates\"><span style=\"color: #000000;\">Setting up the UITableView Data Source and Delegates<\/span><\/h3>\n<p><span style=\"color: #000000;\">I\u2019ve received a ton of questions about this, and many people reporting errors about the table view not being set, so to make things a little easier I made a quick video showing how connecting Storyboard objects to your code works. Make sure to go fullscreen and select the 720p option to make sure you can see what\u2019s happening. This will look slightly different from the Xcode interface you are using, but functionally all this works the same.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/AiKOvoRFOCM\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n<span style=\"color: #3366ff;\"> <a style=\"color: #3366ff;\" href=\"https:\/\/youtu.be\/AiKOvoRFOCM\">Connecting Storyboard Objects to Code in Xcode<\/a><\/span><\/p>\n<p><span style=\"color: #000000;\">Okay, now let\u2019s dig in to the protocol methods for Table Views. Because we\u2019re using the <code>UITableViewDataSource<\/code> and <code>UITableViewDelegate<\/code> in our view controller, we need to modify the class definition to say as much.<\/span><\/p>\n<p><span style=\"color: #000000;\">So open <strong>ViewController.swift<\/strong> and modify this line:<\/span><\/p>\n<div id=\"highlighter_343796\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">class<\/code> <code class=\"color2\">ViewController<\/code><code class=\"plain\">: <\/code><code class=\"color2\">UIViewController<\/code> <code class=\"plain\">{<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">to this:<\/span><\/p>\n<div id=\"highlighter_370827\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">class<\/code> <code class=\"color2\">ViewController<\/code><code class=\"plain\">: <\/code><code class=\"color2\">UIViewController<\/code><code class=\"plain\">, <\/code><code class=\"color2\">UITableViewDataSource<\/code><code class=\"plain\">, <\/code><code class=\"color2\">UITableViewDelegate<\/code> <code class=\"plain\">{<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><span style=\"color: #000000;\">This will cause some errors to pop up, but don\u2019t worry this is expected. In fact, the errors are the primary purpose of indicating these protocols on our class. It lets us know that we aren\u2019t done actually implementing the UITableViewDataSource or the UITableViewDelegate yet.<\/span><\/p>\n<p><span style=\"color: #000000;\">Command+clicking on either of these protocols will show the required functions at the very top. In the case of a tableview <strong>dataSource<\/strong>, we need at least these two:<\/span><\/p>\n<pre><span style=\"color: #000000;\">\u00a0<\/span><\/pre>\n<div id=\"highlighter_575313\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">public<\/code> <code class=\"keyword\">func<\/code> <code class=\"plain\">tableView(_ tableView: <\/code><code class=\"color1\">UITableView<\/code><code class=\"plain\">, numberOfRowsInSection section: <\/code><code class=\"color1\">Int<\/code><code class=\"plain\">) -&gt; <\/code><code class=\"color1\">Int<\/code><\/span><\/div>\n<div class=\"line number2 index1 alt1\"><span style=\"color: #000000;\"><code class=\"keyword\">public<\/code> <code class=\"keyword\">func<\/code> <code class=\"plain\">tableView(_ tableView: <\/code><code class=\"color2\">UITableView<\/code><code class=\"plain\">, cellForRowAt indexPath: <\/code><code class=\"color2\">IndexPath<\/code><code class=\"plain\">) -&gt; <\/code><code class=\"color1\">UITableViewCell<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<pre><span style=\"color: #000000;\">\u00a0<\/span><\/pre>\n<p>&nbsp;<\/p>\n<pre><span style=\"color: #000000;\">\u00a0<\/span><\/pre>\n<p><span style=\"color: #000000;\">So let\u2019s modify our View Controller class by adding these two functions.<\/span><\/p>\n<pre><span style=\"color: #000000;\">\u00a0<\/span><\/pre>\n<div id=\"highlighter_720375\" class=\"syntaxhighlighter nogutter highlightedCode \">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">func<\/code> <code class=\"plain\">tableView(_ tableView: <\/code><code class=\"color2\">UITableView<\/code><code class=\"plain\">, numberOfRowsInSection section: <\/code><code class=\"color2\">Int<\/code><code class=\"plain\">) -&gt; <\/code><code class=\"color2\">Int<\/code> <code class=\"plain\">{<\/code><\/span><\/div>\n<div class=\"line number2 index1 alt1\"><span style=\"color: #000000;\"><code class=\"undefined spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"keyword\">return<\/code> <code class=\"plain\">10<\/code><\/span><\/div>\n<div class=\"line number3 index2 alt2\"><span style=\"color: #000000;\"><code class=\"plain\">}<\/code><\/span><\/div>\n<div class=\"line number4 index3 alt1\"><span style=\"color: #000000;\">\u00a0<\/span><\/div>\n<div class=\"line number5 index4 alt2\"><span style=\"color: #000000;\"><code class=\"keyword\">func<\/code> <code class=\"plain\">tableView(_ tableView: <\/code><code class=\"color2\">UITableView<\/code><code class=\"plain\">, cellForRowAt indexPath: <\/code><code class=\"color2\">IndexPath<\/code><code class=\"plain\">) -&gt; <\/code><code class=\"color2\">UITableViewCell<\/code> <code class=\"plain\">{<\/code><\/span><\/div>\n<div class=\"line number6 index5 alt1\"><span style=\"color: #000000;\"><code class=\"undefined spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"keyword\">let<\/code> <code class=\"plain\">cell = <\/code><code class=\"color2\">UITableViewCell<\/code><code class=\"plain\">(style: .subtitle, reuseIdentifier: <\/code><code class=\"string\">\"MyTestCell\"<\/code><code class=\"plain\">)<\/code><\/span><\/div>\n<div class=\"line number7 index6 alt2\"><span style=\"color: #000000;\">\u00a0<\/span><\/div>\n<div class=\"line number8 index7 alt1\"><span style=\"color: #000000;\"><code class=\"undefined spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"plain\">cell.textLabel?.text = <\/code><code class=\"string\">\"Row \\(indexPath.row)\"<\/code><\/span><\/div>\n<div class=\"line number9 index8 alt2\"><span style=\"color: #000000;\"><code class=\"undefined spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"plain\">cell.detailTextLabel?.text = <\/code><code class=\"string\">\"Subtitle \\(indexPath.row)\"<\/code><\/span><\/div>\n<div class=\"line number10 index9 alt1\"><span style=\"color: #000000;\">\u00a0<\/span><\/div>\n<div class=\"line number11 index10 alt2\"><span style=\"color: #000000;\"><code class=\"undefined spaces\">\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"keyword\">return<\/code> <code class=\"plain\">cell<\/code><\/span><\/div>\n<div class=\"line number12 index11 alt1\"><span style=\"color: #000000;\"><code class=\"plain\">}<\/code><\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<pre><span style=\"color: #000000;\">\u00a0<\/span><\/pre>\n<p>&nbsp;<\/p>\n<pre><span style=\"color: #000000;\">\u00a0<\/span><\/pre>\n<p><span style=\"color: #000000;\">As a handy trick, when you need to write these long methods for cases like this, you can just start typing the function in Xcode, focusing on the unique part of the name such as &#8220;cellForRo&#8230;&#8221; and Xcode will usually auto-complete what you were typing.<\/span><\/p>\n<p><span style=\"color: #000000;\">The first method is asking for the number of rows in our section, in this simple tutorial we just hard-code 10, but normally it would be the length of an array controller. This example is intentionally simple.<\/span><\/p>\n<p><span style=\"color: #000000;\">The second method is where the magic happens. Here we create a new instance of a UITableViewCell called cell, using the Subtitle cell style.<\/span><br \/>\n<span style=\"color: #000000;\"> Then, we assign the text value of this cell to the string \u201cRow #(indexPath.row)\u201d<\/span><br \/>\n<span style=\"color: #000000;\"> In Swift, this is how variables are embedded within a string. What we\u2019re doing is retrieving the value of indexPath.row by inserting (indexPath.row) in to our string, and dynamically replacing it with the row number of the cell. This allows results such as \u201cRow #1\u2033, \u201cRow #2\u2033, etc.<\/span><\/p>\n<p><span style=\"color: #000000;\">The detail text label is only available in the Subtitle cell class, which we are using here. We set it similarly to \u201cSubtitle #1\u2033, \u201cSubtitle #2\u2033, and so on.<\/span><\/p>\n<p><span style=\"color: #000000;\">Go ahead and run your app and you\u2019ll now see an amazing list of cells with titles and subtitles indicating their row numbers. Don&#8217;t see the cells? Make sure you connected your storyboard delegate and data source to the ViewController class. See the Youtube video here<\/span><\/p>\n<p><span style=\"color: #000000;\">This is one of the most common ways to display data in iOS, and will be sure to serve you well. For the full code to my View Controller file, take a look at the <span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/github.com\/jquave\/Swift-Tutorial\/tree\/Part1\">full source for this section on github<\/a><\/span>.<\/span><\/p>\n<h3 id=\"you-re-doing-great-\"><span style=\"color: #000000;\">You&#8217;re doing great!<\/span><\/h3>\n<p><span style=\"color: #000000;\">Made it this far and everything is working? Awesome! If not, <span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"mailto:jquave@gmail.com\">let me know<\/a><\/span> if you got stuck. I&#8217;m happy to help \ud83d\ude42<\/span><\/p>\n<p><span style=\"color: #000000;\">In my Swift book we spend some more time going over the basics, as well as delving much deeper in to the advanced details. Learn more about it here.<\/span><\/p>\n<p><span style=\"color: #000000;\">In part 2, we\u2019re going to explore using the iTunes search API to create an app capable of finding and displaying albums within the iTunes store.<\/span><\/p>\n<p><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/github.com\/jquave\/Swift-Tutorial\/tree\/Part1\">Full code for this part here \u00bb<\/a><\/span><\/p>\n<p><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"http:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial-part-2\/\">Go To Part 2 \u00bb<\/a><\/span><\/p>\n<p><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/github.com\/jquave\/Swift-Tutorial\/tree\/Part1\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/images\/getTheSource.png\" alt=\"Get The Source\" \/><\/a><\/span><br \/>\n<span style=\"color: #000000;\"> <a style=\"color: #000000;\" href=\"http:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial-part-2\/\"><img decoding=\"async\" src=\"http:\/\/jamesonquave.com\/images\/nextPart.png\" alt=\"Next Part\" \/><\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Swift Tutorial This tutorial updated to reflect changes in Xcode 8.3.1 and iOS 10, as of April 17, 2017 Apple announced at WWDC a major change to the way iOS apps are developed, it can now be done using a new programming language called Swift. In my efforts to adapt and learn the language\u2019s common&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[26,21,25,10,32],"tags":[15,34,33],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Swift Tutorial - Developing iOS Apps Part 1 - Jameson Quave<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Swift Tutorial - Developing iOS Apps Part 1 - Jameson Quave\" \/>\n<meta property=\"og:description\" content=\"Swift Tutorial This tutorial updated to reflect changes in Xcode 8.3.1 and iOS 10, as of April 17, 2017 Apple announced at WWDC a major change to the way iOS apps are developed, it can now be done using a new programming language called Swift. In my efforts to adapt and learn the language\u2019s common...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Jameson Quave\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-02T20:37:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-15T09:58:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tctechcrunch2011.files.wordpress.com\/2014\/06\/img_0256.jpg?w=310\" \/>\n<meta name=\"author\" content=\"Jameson Quave\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jameson Quave\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/\",\"url\":\"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/\",\"name\":\"Swift Tutorial - Developing iOS Apps Part 1 - Jameson Quave\",\"isPartOf\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\"},\"datePublished\":\"2014-06-02T20:37:18+00:00\",\"dateModified\":\"2020-06-15T09:58:50+00:00\",\"author\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc\"},\"breadcrumb\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jamesonquave.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Swift Tutorial &#8211; Developing iOS Apps Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\",\"url\":\"https:\/\/jamesonquave.com\/blog\/\",\"name\":\"Jameson Quave\",\"description\":\"Using computer technology to educate, and improve lives.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc\",\"name\":\"Jameson Quave\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg\",\"caption\":\"Jameson Quave\"},\"sameAs\":[\"http:\/\/jamesonquave.com\"],\"url\":\"https:\/\/jamesonquave.com\/blog\/author\/jquave\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Swift Tutorial - Developing iOS Apps Part 1 - Jameson Quave","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Swift Tutorial - Developing iOS Apps Part 1 - Jameson Quave","og_description":"Swift Tutorial This tutorial updated to reflect changes in Xcode 8.3.1 and iOS 10, as of April 17, 2017 Apple announced at WWDC a major change to the way iOS apps are developed, it can now be done using a new programming language called Swift. In my efforts to adapt and learn the language\u2019s common...","og_url":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/","og_site_name":"Jameson Quave","article_published_time":"2014-06-02T20:37:18+00:00","article_modified_time":"2020-06-15T09:58:50+00:00","og_image":[{"url":"https:\/\/tctechcrunch2011.files.wordpress.com\/2014\/06\/img_0256.jpg?w=310"}],"author":"Jameson Quave","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jameson Quave","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/","url":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/","name":"Swift Tutorial - Developing iOS Apps Part 1 - Jameson Quave","isPartOf":{"@id":"https:\/\/jamesonquave.com\/blog\/#website"},"datePublished":"2014-06-02T20:37:18+00:00","dateModified":"2020-06-15T09:58:50+00:00","author":{"@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc"},"breadcrumb":{"@id":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jamesonquave.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Swift Tutorial &#8211; Developing iOS Apps Part 1"}]},{"@type":"WebSite","@id":"https:\/\/jamesonquave.com\/blog\/#website","url":"https:\/\/jamesonquave.com\/blog\/","name":"Jameson Quave","description":"Using computer technology to educate, and improve lives.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc","name":"Jameson Quave","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg","caption":"Jameson Quave"},"sameAs":["http:\/\/jamesonquave.com"],"url":"https:\/\/jamesonquave.com\/blog\/author\/jquave\/"}]}},"_links":{"self":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/554"}],"collection":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/comments?post=554"}],"version-history":[{"count":94,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/554\/revisions"}],"predecessor-version":[{"id":2647,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/554\/revisions\/2647"}],"wp:attachment":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/media?parent=554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/categories?post=554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/tags?post=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}