開始用Swift開發(fā)iOS 10 - 6 創(chuàng)建簡(jiǎn)單的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
• 拖動(dòng)一個(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"]

并修改對(duì)應(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

• 拖動(dòng)image view到Cell中
  

• 拖動(dòng)三個(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仲器，分別對(duì)應(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》 的一篇記錄