在這裡要說明一下，到目前為止已經算是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。字體修改成 Avniernext。字體大小修改成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按下右鍵來檢視一下裡面的屬性，完成之後如下圖： 好了，到目前為止我們完成了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]) 再來看看修改之後的設計，是不是有一種煥然一新的感覺呢？ 自從iOS7之後Apple越來越愛用圓形的圖案的設計風格，所以在這裡阿達也分享一下如何將餐廳的圖片修改成圓形。你不需要使用Photoshop來一張一張的修改，只需要兩行程式就搞定了，你不信嗎？讓我們看下去！ 一樣來到cellForRowAtIndexPath這個地方（這裡真的是太重要了！），我們將下面兩行程序加下去 cell.thumbnailImageView.layer.cornerRadius = cell.thumbnailImageView.frame.size.width / 2 cell.thumbnailImageView.clipsToBounds= true 接下來就是愉快的command+R時間了，小夥伴們見證奇蹟的時候到了！ 感謝小夥伴們今天抽空來看阿達的分享，有小夥伴們會問說，你的Loacation 還有Type 還是空的啊！ 沒錯這個部分阿達打算留給小夥伴們自己練習，為了節省大家打字的時間，阿達把資料也留給大家。（這跟我偷懶不想寫一點關係也沒有） varrestaurantLocations = ["Hong Kong", "Hong Kong", "HongKong", "Hong Kong", "Hong Kong", "HongKong", "Hong Kong", "Sydney", "Sydney","Sydney", "New York", "New York", "NewYork", "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的小夥伴們一點幫助，也希望小夥伴能夠提供阿達一些寶貴的意見。希望大家都能夠互相進步，一起成長。讓我們用一行一行的代碼，來一步一步地實現我們的夢想。我是阿達，我們下回見！
| 
收藏
淘帖
踩
