開始用Swift開發iOS 10 - 6 創建簡單的Table Based App是basic風格的Table，這一部分將：

1. 使用UITableViewController 代替 UITableView
2. 展示table view cell中不同的圖片顯示方式
3. 設計定制的table view cell來替代basic的table view cell

使用UITableViewController新建一個Table View App

• 新建項目FoodPin，模板為"Single View application"
• 刪除Main.storyboard中的 view controller，刪除ViewController.swift
• 拖動一個Table View Controller到IB中，選中其Is Initial View Controller
• 新建類RestaurantTableViewController，繼承至UITableViewController。將Table View Controller的Class屬性設置為RestaurantTableViewController。
• 在simpletable-image1.zip和simpletable-image2.zip處下載圖片，拖到asset catalog
• 在類RestaurantTableViewController中添加以變量

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

• 在類RestaurantTableViewController中添加代碼：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath:
IndexPath) -> UITableViewCell {
    let cellIdentifier = "Cell"
    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
for: indexPath)
    // Configure the cell...
    cell.textLabel?.text = restaurantNames[indexPath.row]
    cell.imageView?.image = UIImage(named: "restaurant.jpg")
return cell }

• 插入代碼

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellIdentifier = "Cell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
                                                 for: indexPath)
        // Configure the cell...
        cell.textLabel?.text = restaurantNames[indexPath.row]
        cell.imageView?.image = UIImage(named: "restaurant.jpg")
        return cell
   }

  override func numberOfSections(in tableView: UITableView) -> Int {
    return 1
  }

  override func tableView(_ tableView: UITableView, numberOfRowsInSection
section: Int) -> Int {
    return restaurantNames.count
  }

• 在類RestaurantTableViewController中加入圖片名稱變量：

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", "caskpubkitchen.jpg"]

并修改對應代碼：
cell.imageView?.image = UIImage(named: restaurantImages[indexPath.row])

定制Table View Cells

• 修改Table View Cell的Sytle變為Custom，Identifier為Cell

• 修改Table View 的Row Height為80

• 確認Table View Cell 的Custom被選擇和Row Height為80

• 拖動image view到Cell中
  

• 拖動三個label到Cell中，文本分別是Name，Location，Type。Name 的font為Headline；Location的font style為Light，font size為14，font color為Dark Gray；Typefont style為Light，font size為13。

• 把三個label設置成一個vertical stack view，其spacing為1

• 把vertical stack view和Image View設置成一個horizontal stack view，其spacing為10

• 為vertical stack view設置上下左右邊距約束；為圖片設置寬和高的約束

  
  

• 處理約束問題

  
  

為Custom Cell創建類

• 創建繼承至UITableViewCell的類RestaurantTableViewCell
• 在RestaurantTableViewCell中建立四個outlet，分別對應圖片和三個label

    @IBOutlet var nameLabel: UILabel!
    @IBOutlet var locationLabel: UILabel!
    @IBOutlet var typeLabel: UILabel!
    @IBOutlet var thumbnailImageView: UIImageView!

• 建立代碼中接口與storyboard之間的聯系

  
  

修改Table View Controller代碼

• 由于已經為Custom Cell創建了類RestaurantTableViewCell，所以Table View Controller中生成Cell的待修改為：

let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier,
                                                 for: indexPath) as! RestaurantTableViewCell

• 由于Cell的風格不是sytle了，而是定制的，所以文本和圖片代碼要做出修改：

cell.nameLabel.text = restaurantNames[indexPath.row]
cell.thumbnailImageView.image = UIImage(named: restaurantImages[indexPath.row])

圖片圓角

• 可通過UIView的layer屬性（CALayer）修改圖片圓腳，cornerRadius表示圓角的半徑，由于圖片的尺寸是60*60，所以圓角的半徑設置為30后，圖片看上去是個圓。

cell.thumbnailImageView.layer.cornerRadius = 30.0
cell.thumbnailImageView.clipsToBounds = true

練習

• 添加“Type”和“Location”。添加如下兩個數組變量：

var restaurantLocations = ["Hong Kong", "Hong Kong", "Hong Kong", "Hong Kong",
                               "Hong Kong", "Hong Kong", "Hong Kong", "Sydney", "Sydney", "Sydney", "NewYork", "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"]

然后再在Cell時賦值即可：

cell.locationLabel.text = restaurantLocations[indexPath.row] 
cell.typeLabel.text = restaurantTypes[indexPath.row]

• 重新設計界面：

  
  
  • 修改Table View和Table View Cell的Row Height都為300。

  • 重新設計圖片與label的之間的層次結構，并修改圖片的大小和其他一些約束。

    
    
  • 刪除圖片圓角

代碼

Beginning-iOS-Programming-with-Swift

說明

此文是學習appcode網站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄