使用swift3從零寫一個基於位置信息的照片集iOS應用系列一

記錄和分享一下使用swift開發一個app的過程，和你們交流學習。

從一個簡單的UITableViewController開始

建立gitub倉庫

按照個人習慣首先github網站上面創建一個倉庫，這樣方便交流和學習的時候更加便捷。
這裏我使用的是mac上的github桌面應用，若是你不熟悉git命令行操做，也能夠下載

這裏我由於我已經在github遠端建立好了，因此會有一個已經存在的警告提示。若是你是新建立的，那麼是不會有這個警告的

建立新的swift項目

我使用的是最新的macos/sierra/，若是你也是，那麼應該已是最新的xcode8和swift3了。
若是你不肯定本身的swift版本，能夠在 Finder-其餘-終端 打開後輸入 swift -version 查看一下。

接下來我要作下面幾件事情來新建一個項目結構

• 建立項目。

• 選擇應用模板。

• 完成項目的基礎信息配置。

這裏我選擇一個空的模板

項目的基礎信息配置這裏解釋一下

• Product Name: 這個就是項目名稱，咱們這裏起的是 PhotosPin

• Team: 這裏會自動有的，就是你的開發者的帳號

• Organization Name: 組織名稱，通常多是你告訴的域名

• Organization Identifier: 組織標識，通常這裏會將你的我的或是公司的域名反轉寫，好比: com.appledev

• Bundle Identifier: 這裏會根據你寫的組織標識自動生成，不用管

• Language: Swift – 選擇開發語言，這裏固然是選 swift

• Devices: iPhone – 這裏選擇你是爲何設備開發的，咱們這裏選iPhone

• Use Core Data: [不選] – 這裏是問你項目是否使用Core Data，它是apple官方支持的一個本地數據持久化框架，在咱們的應用中期會使用到，但這裏先不選

• Include Unit Tests: [不選] – 這裏是問你是否引入單元測試，咱們先不選

• Include UI Tests: [不選] – 這裏從名字能夠看出問你是否引入界面UI的測試，不選

點擊右下角的 Create 按鈕後你看到就是項目初始的結構了

上圖是我使用的一些習慣，你感興趣也能夠參考下，紅色數字與綠色數字的效果是對應

1. 顯示行號

2. 當鼠標碰到代碼塊時，高亮顯示代碼區域，方便我查看關注的代碼區域

3. 代碼字符的長度提示線，就是說在一行代碼字母數量80個的地方有一條線，提醒我這行代碼是否是不易於閱讀，固然根據你狀況而定

4. 項目的文件，快捷鍵是 control+5 ，你試試就知道了，對應左側的項目結構，由於我但願敲代碼的區域可以大一些，通常講最左側的項目結構關閉了

5. 羅列當前文件中的變量、方法、註釋...等等，快捷鍵是 control+6 很是有用，特別是你的代碼寫了不少的時候。

使用 UITableViewController 建立一個表格視圖的應用

在建立項目的時候回自動生成一個空的 ViewController 和一些文件，咱們這裏來看如何使用 UITableViewController 來建立一個簡單的表格應用。

首先要選擇 Main.storyboard 將自動生成的 view controller 刪除掉，選中後按 delete 鍵。也不須要默認與這個 view controller 關聯的 ViewController.swift 文件，同樣選中後按 delete 鍵，在彈出的確認框選中 "Move to Trash"（區別就是這個是真的吧文件從項目刪除了，前面一個選項只是把文件的引用清除了，文件仍是在）。

而後從右側下面的 Object library 中選擇 Table View Controller ，拖拽到中間的 Main.storyboard 中。能夠右側下面的 Object library 中長按一個組件就會彈出 名稱和說明，建議吧每一個都看一下，方便之後能快速的找到須要的組件。

1. 建立一個 UITableViewController

2. 有時候選擇不方便的時候，好比組件多了，鼠標很差選擇的時候，能夠在左側的 Document Outline 面板中經過結構選擇

3. 這裏會有個 M ，就是 modification 的意思，由於咱們使用了遠程代碼github，咱們本地的代碼與遠程的代碼不同了，這裏就會顯示一個標識，後面到了某個階段，咱們就會將修改的代碼內容同步到遠程庫，就不會有顯示了。

由於咱們是本身建立的一個 UITableViewController ，須要咱們手動的指定app的加載初始視圖是哪個，咱們這裏來按下面的步驟指定。

1. 在 Main.storyboard 中選中 TableViewController

2. 在左側面板選中 Attributes inspector 屬性面板

3. 在 View Controller 單元，將 Is Initial View Controller 勾選

4. 你會發如今 Main.storyboard 中的 TableViewController 左側多了一個箭頭，表示這個 View Controller 是app的第一個視圖

通常 Table View Controller 是要關聯 UITableViewController 類 class 的。下面來建立這個 class 類，並與 Main.storyboard 中的 TableViewController 關聯。

這裏注意新建 class 類 文件的時候，在左側的 Project Navigator 項目導航中，要選中項目下面黃色文件夾，不要選中項目，由於選中項目會將文件創造在項目的根文件夾中，到時候你再想移動到項目類文件夾時會出現 在xcode中結構移下去了，但在實際項目文件夾中仍是在外面。我還沒解決是什麼緣由，因此這裏注意下。

這裏選擇 Cocoa Touch Class ，而後命名爲 「PhotosTableViewController」，下面的 "Subclass of" 寫入 UITableViewController 。意思就是說咱們自定義的類是 UITableViewController 的子類。

這裏若是之前接觸過OOP面向對象編程會比較好理解。
簡單理解就是，咱們本身建立的 PhotosPinTableViewController 稱爲子類，它會繼承（擁有）UITableViewController 這個父類中定義的全部 狀態（變量、常量）和功能（方法）。

到這裏，在 Main.storyboard 裏剛剛咱們拖拽進去的的 TableViewController 要與剛剛咱們建立 PhotosPinTableViewController.swift 關聯起來。這樣就能夠理解爲當前在 Main.storyboard 中的這個視圖 view controller 爲剛剛建立的這個類來管理和控制。

1. 選中view controller

2. 在右側面板切換到第三個 Identity inspector

3. 在 Custom Class 單元下將 Class 下拉選中剛剛建立的類 PhotosPinTableViewController.swift

在開始階段，咱們會先模擬一些固定的假數據來測試功能是否可以正常跑通，邏輯是否正確。因此在 PhotosPinTableViewController.swift 中定義我copy 過來的一些數據。

var photoNames = ["Cafe Deadend", "Homei", "Teakha", "Cafe Loisl", "Petite Oyster", "For Kee Restaurant", "Po's Atelier", "Bourke Street Bakery", "Haigh's Chocolate", "Palomino Espresso", "Upstate", "Traif", "Graham Avenue Meats", "Waffle & Wolf", "Five Leaves", "Cafe Lore", "Confessional", "Barrafina", "Donostia", "Royal Oak", "CASK Pub and Kitchen"]

這裏注意如下，由於PhotosPinTableViewController繼承了UITableViewController，而UITableViewController實現了UITableViewDelegate和UITableViewDataSource兩個協議（也能夠理解爲接口）。因此PhotosPinTableViewContrller也就從UITableViewController裏面得到了UITableViewController和UITableViewDataSource裏面定義的功能（方法）。查看OOP面向對象編程

這裏推薦一個Mac上的應用Dash，用來查看各類開發API文檔，按照目前程序員的技能發展樹，掌握多門語言和技術是必備的，因此這個應用是很是不錯的選擇。Xcode中是自帶Apple開發文檔的。

查看一下UITableViewDelegate和UITableViewDataSource兩個協議

1. 能夠搜索「uitableviewcontroller」不區分大小寫

2. 顯示當前的Class的繼承樹，從上往下看

3. 顯示當前的Class實現了哪些協議 Protocol

4. 在TableViewController要關注的兩個基礎協議

簡單理解
UITableViewDelegate：主要管理處理表視圖的界面和功能相關的
UITableViewDataSource：主要處理表視圖中的數據和操做相關的

1. 方法名，有時候也這樣寫 tableView(_:numberOfRowsInSection:)，swift的方法做用從定義的名稱結構是很好理解的

2. tableView(_:numberOfRowsInSection:)的功能是返回的表格的塊組section裏面數據的行數。這裏就是咱們定義的數據數組的個數使用 .count 得到

3. 參數，表示當前的表視圖

4. 參數

5. 表示這個方法是必須實現

6. 方法的聲明結構

7. 參數，表視圖對象的信息

8. 參數，標識表視圖塊的索引

9. 返回值，數據的數量

在PhotosPinTableViewController.swift中加入如下代碼

override func numberOfSections(in tableView: UITableView) -> Int {
        // #返回在表的第幾個section中
        return 1
    }

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #返回行數
        return photos.count
    }
    
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //經過下圖指定的Identifier標識來得到cell
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        //下面是table view默認樣式下的右邊的文字與左邊的圖片排列
        cell.textLabel?.text = photoNames[indexPath.row]
        cell.imageView?.image = UIImage(named: photosImages[indexPath.row])
        
        return cell
    }

• tableView(_:numberOfRowsInSection:)方法返回的值決定調用tableView(_:cellForRowAt:)多少次

• 每次調用tableView(_:cellForRowAt:)就決定行裏面內容和數據的顯示。

將圖片資源加入到項目中 （提取：f6py）

1. 選中左側項目導航的 Assets.xcassets

2. 將圖片資源文件夾拖拽到中間的區域