swift实作app 交流分項一（tableview）

一行代碼一場夢，大家好我是阿達！

今天為大家帶來的是如何使用apple新寵swift來搭建一個簡單的app

其中的功能包括了前導畫面，記錄資料，地圖導覽，推播分享。。。

完成之後的成果大致上如下圖

此篇文章是由swift所寫成的感興趣的小夥伴們可以來看看

沒有基礎的小夥伴們也可以試著來把代碼複製貼上，一樣可以運行喔ＸＤ

好了 進入主題

在這裡我們假設大家對於Xcode都已經有了基本的認識還有一些程序基礎所以就不多提了。今天我們會先建立一張顯示資料用的表格，並且將它美觀。那麼首先呢當然是建立一個新的專案

選擇Single View Application，點擊 NEXT

填入專案名稱，身為超神級吃貨的阿達來說就叫他做FoodPin啦

記得語言的選擇是swift喔

接下來我們進入到Storyboard的畫面

在這裏，我們將不使用預設的視圖控制器，所以我們將它刪掉。點選StoryBoard上面的ViewController 按下delete,將它刪除。另外這個預設的viewcontroller 跟左邊欄位上面的 viewController.swift 是關聯的。所以我們也不需要他。點選這個檔案之後按下刪除(move to Trash)

 接下來我們回到StoryBoard 中選擇 Table View Controller 將它拖曳到Storyboard 中。並且將他設定成『初始控制器』,也就是載入畫面的時後第一個視圖控制器。因此我們還需要在右手邊的屬性檢閱器中啟動『Is Inutual  View Contrpller』。之後你就會看到旁邊多了一個箭頭。恭喜你 你成功了

不知道大家會不會跟我一樣每次做到一個階段就會很興奮的按下 command+ R 來測試運行一下現在的成果。但是很明顯的就是現在還沒有方東西進去，所以我們將會得到一個空白的畫面。

好的，畫面完成了之後我們現在需要實做這個元件，首先我們需要產生跟這個tableview controller  關聯的檔案。

在資料夾的上面按右鍵，選取『New File 』 產生一個新的檔案，接下來選取『Cocoa Touch Class 』

 完成了之後將會在旁邊看到多了這麼一個檔案，也就是你所生產的名稱。
接下來的步驟很重要，所以請大家務必要記得這麼做喔！

現在我們要將剛剛產生的ResturantTableViewController.swift檔案跟storyboard 上面的TableViewcontroller做連接。

 在storyboard 上面的TableViewcontroller點擊一下之後選擇識別檢閱區，將裡面的『Custon Class』設定成ResturantTableViewController

完成了之後小夥伴們會看到左手邊的tableview controller 的名字已經變成了ResturantTableViewController

如此就說明了已經將兩者成功地連接了！

對了tableviecontroller上面還有一個要設定的地方。選取tbaleviewController裡面的cell，將他修改成Basic，並且將 indentifier設定成Cell.

好了，現在我們正式的完成使用者介面的部分。接下來我們可以進入程式的部分了。選取ResturantTableView.swift，並宣告一個實體變數來存放資料。

    var restaurantNames = ["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", "Thai Cafe"]

UITableViewController 通常都預設了兩個方法的實作，但是通常都不符合我們的需求。所以我們要自己複寫他。將以下的部分加入RestaurantTableViewController中：

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

        

        return self.restaurantNames.count

    }

原本預設回傳 0 現在我們叫它回傳資料筆數的欄位，也就是說有幾筆資料，他就會出現幾個欄位。

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        

        let cellIdentifier = "Cell"

        

        let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! UITableViewCell

        

        cell.textLabel!.text = restaurantNames[indexPath.row]

               

        return cell

    }

在這裡我們叫tablecell去抓一個叫做Cell的cell然後讓裡面的文字顯示出剛剛我們宣告的那個變數裡面的資料。

接下來，修改一下預設的回傳表格區塊（table section）的數字原本是零，但是很明顯我們需要一個區塊，所以將他修改成 一  。

好了，我們按下了運行來試試看？出來畫面應該是如下圖一般，接下來我們要加些圖片進去，小夥 伴們可以點擊一下這個連接，裡面有阿達幫大家準備好的精美小圖 ，下載完成之後，將所有的圖片拖曳到『images.xcassets』

接著就是將這些圖片顯示在表格上啦，方法跟顯示文字是一樣的，小夥伴們可能很好奇，為什麼同樣的相片要準備這麼多尺寸，在這裡先簡單的說明一下。因為蘋果公司的上架審核非常的嚴格，所以以後在專案開發的時候最好是照規定準備符合各種螢幕尺寸的蒲片，這樣子上架會比較容易通過也比較美觀喔。

跟剛才一樣 我們在準備一個變數陣列，來存放圖片的檔名。

var restaurantImages = ["cafedeadend.jpg", "homei.jpg", "teakha.jpg", "cafeloisl.jpg", "petiteoyster.jpg", "forkeerestaurant.jpg", "posatelier.jpg", "bourkestreetbakery.jpg", "haighschocolate.jpg", "palominoespresso.jpg", "upstate.jpg", "traif.jpg", "grahamavenuemeats.jpg", "wafflewolf.jpg", "fiveleaves.jpg", "cafelore.jpg", "confessional.jpg", "barrafina.jpg", "donostia.jpg", "royaloak.jpg", “thaicafe.jpg"]

然後在cellForAtindexPath的方法中加入一條程式：

 cell.imageView!.image = UIImage(named: restaurantImages[indexPath.row])

修改好了之後的cellForAtindexPath方法應該是這樣的

接下來就是開心地按下  command+R啦！

感覺是不是好棒棒啊！我不知道小夥伴們是怎麼樣，可是我自己每次當程序願意照著自己腦海中的畫面來運行的時候都好開心啊！

在這裡要說明一下，到目前為止已經算是tableview的基本應用。小夥伴們只要多練習這個部分就可以掌握tableview的技巧。但是我們遇到客戶的時候，像這樣的表格一定會被狠狠的打槍。因為大家都喜歡美觀的表格，所以接下來阿達要跟大家分享的是，如何讓這樣的一個簡單的表格變得美觀。

小夥伴們接下來接觸到的將是：

• 改變cell的高度
• 讓圖片大一點
• 顯示餐廳資訊像是位置以及餐廳類型
• 改變字型與大小
• 以圓形取代方形的圖片

完成了之後結果將是這樣～

有沒有比剛剛的表格好看多了呢？該怎麼做到像這樣子呢？其實很簡單，讓我們繼續看下走下去。

在開始之前小夥伴們要記得選取cell的屬性從『Basic』修改成『Custom』

這樣子才能自訂cell裡面的內容。

為了容納更大的圖片，我們將變更cell的高度，選取表格視圖將列高改成『80』。

然後在選取cell點擊之後再將列高也設定成『80』並勾選旁邊的Custom。

修改好了之後，從元件庫裡面拖曳一個圖像視圖（Image View）到cell中。

你可以依照你喜歡的尺寸來修改，不過在這裡阿達為各位提供我覺得適合的尺寸

X:15     Y:10 Width :60 Height:60

接下來，我們加入三個標籤（Label）

第一個Label物件命名為Name 尺寸X:86     Y:9 Width :205 Height:21

之後的步驟就跟之前一樣啦！

把第二個標籤(Label)命名成『Location』X:86     Y:35 Width :205 Height:18

把第三個個標籤(Label)命名成『Type』X:86     Y:54 Width :205 Height:11

修改好了之後就是像這個樣子，但是還是覺得這樣的字體不夠輕切，不夠能凸顯出每個主題的不同。所以在這裡我們要調整一下字體還有大小。

點選第一個標籤(Label ) 也就是Name。將他的Font修改成Custom。字體修改成 Avnier next。字體大小修改成16

 點選第二個標籤(Label ) 也就是Location。將他的Font修改成Custom。字體修改成 Avnier next。字體大小修改成13

點選第三個標籤(Label ) 也就是Location。將他的Font修改成Custom。字體修改成 Avnier next。字體大小修改成11

修改好了之後看起來就像是這樣～

到目前為止，我們設計了表格cell，但是接下來我們要把我們所準備的資料，在表格上面顯示出來，所以我們要新建一個新的類別來連接這個cell。這個類別代表字定義cell 底下的資料模組。

跟之前一樣，在這裡我們介紹一下快捷鍵的使用方式，按下command+N 新增一個類別。

class 處填入：CustomTableViewCell

subclass of 處填入：UITableViewCell

別忘記要把cell 跟小夥伴們新建的CustomTableViewCell做連接喔！

點選 Name 按住control 會拉出一條線，將它拖曳到CustomTableViewCell裡面來新增變數將它命名成『nameLabel』

將這四個元件重複這個步驟，完成之後會像這樣子～

    @IBOutlet weak var nameLabel: UILabel!

    

    @IBOutlet weak var locationLabel: UILabel!

    

    @IBOutlet weak var typeLabel: UILabel!

    

    @IBOutlet weak var thumbnailImageView: UIImageView!

完成了之後點選cell按下右鍵來檢視一下裡面的屬性，完成之後如下圖：

再來看看修改之後的設計，是不是有一種煥然一新的感覺呢？

自從iOS7之後Apple越來越愛用圓形的圖案的設計風格，所以在這裡阿達也分享一下如何將餐廳的圖片修改成圓形。你不需要使用Photoshop來一張一張的修改，只需要兩行程式就搞定了，你不信嗎？讓我們看下去！

一樣來到cellForRowAtIndexPath這個地方（這裡真的是太重要了！），我們將下面兩行程序加下去

cell.thumbnailImageView.layer.cornerRadius = cell.thumbnailImageView.frame.size.width / 2

cell.thumbnailImageView.clipsToBounds = true

接下來就是愉快的command+R時間了，小夥伴們見證奇蹟的時候到了！

感謝小夥伴們今天抽空來看阿達的分享，有小夥伴們會問說，你的Loacation 還有 Type 還是空的啊！

沒錯這個部分阿達打算留給小夥伴們自己練習，為了節省大家打字的時間，阿達把資料也留給大家。（這跟我偷懶不想寫一點關係也沒有）

var restaurantLocations = ["Hong Kong", "Hong Kong", "Hong Kong", "Hong Kong", "Hong Kong", "Hong Kong", "Hong Kong", "Sydney", "Sydney", "Sydney", "New York", "New York", "New York", "New York", "New York", "New York", "New York", "London", "London", "London", "London"]

    

    var restaurantTypes = ["Coffee & Tea Shop", "Cafe", "Tea House", "Austrian / Causual Drink", "French", "Bakery", "Bakery", "Chocolate", "Cafe", "American / Seafood", "American", "American", "Breakfast & Brunch", "Coffee & Tea", "Coffee & Tea", "Latin American", "Spanish", "Spanish", "Spanish", "British", “Thai"]

阿達認為，所謂的技術交流就是有來有往才叫做交流，阿達在這裡分享了自己在設計這個app時後的心得，以及希望給那些有基礎迫不及待的想做出自己的一隻app的小夥伴們一點幫助，也希望小夥伴能夠提供阿達一些寶貴的意見。希望大家都能夠互相進步，一起成長。讓我們用一行一行的代碼，來一步一步地實現我們的夢想。我是阿達，我們下回見！

好了，到目前為止我們完成了tableview跟cell的設計跟設定。終於來到最後的程序修改的部分。

首先我們來看到cellForRowAtIndexPath方法中，裡面

let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! UITableViewCell

修改成：

let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! CustomTableViewCell

因為我們現在是用CustomTableViewCell來控制我們的cell 而不是系統所預設的UITableViewCell。

接下來我們再看看cellForRowAtIndexPath裡面關於內容的設定：

       

       cell.textLabel!.text = restaurantNames[indexPath.row]

        

        cell.imageView!.image = UIImage(named: restaurantImages[indexPath.row])

修改成

cell.nameLabel!.text = restaurantNames[indexPath.row]

        

cell.thumbnailImageView!.image = UIImage(named: restaurantImages[indexPath.row])