開始用Swift開發(fā)iOS 10 - 6 創(chuàng)建簡單的Table Based App是basic風(fēng)格的Table，這一部分將：

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

使用UITableViewController新建一個(gè)Table View App

• 新建項(xiàng)目FoodPin，模板為"Single View application"
• 刪除Main.storyboard中的 view controller，刪除ViewController.swift
• 拖動一個(gè)Table View Controller到IB中，選中其Is Initial View Controller
• 新建類RestaurantTableViewController，繼承至UITableViewController。將Table View Controller的Class屬性設(shè)置為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"]

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

定制Table View Cells

• 修改Table View Cell的Sytle變?yōu)?code>Custom，Identifier為Cell

• 修改Table View 的Row Height為80

• 確認(rèn)Table View Cell 的Custom被選擇和Row Height為80

• 拖動image view到Cell中
  

• 拖動三個(gè)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。

• 把三個(gè)label設(shè)置成一個(gè)vertical stack view，其spacing為1

• 把vertical stack view和Image View設(shè)置成一個(gè)horizontal stack view，其spacing為10

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

  
  

• 處理約束問題

  
  

為Custom Cell創(chuàng)建類

• 創(chuàng)建繼承至UITableViewCell的類RestaurantTableViewCell
• 在RestaurantTableViewCell中建立四個(gè)outlet，分別對應(yīng)圖片和三個(gè)label

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

• 建立代碼中接口與storyboard之間的聯(lián)系

  
  

修改Table View Controller代碼

• 由于已經(jīng)為Custom Cell創(chuàng)建了類RestaurantTableViewCell，所以Table View Controller中生成Cell的待修改為：

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

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

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

圖片圓角

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

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

練習(xí)

• 添加“Type”和“Location”。添加如下兩個(gè)數(shù)組變量：

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時(shí)賦值即可：

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

• 重新設(shè)計(jì)界面：

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

  • 重新設(shè)計(jì)圖片與label的之間的層次結(jié)構(gòu)，并修改圖片的大小和其他一些約束。

    
    
  • 刪除圖片圓角

代碼

Beginning-iOS-Programming-with-Swift

說明

此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄