开始用Swift开发iOS 10 - 7 定制Table Vie

开始用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》 的一篇记录