DAY 6 『 TableView 』Part1

TableView：Storyboard + Table View + Table View Cell + Image View + Lable * 2

成品：

今天会分享如何使用 TableView 呈现清单，且 Table View 、 Table View Cell 皆利用 Storyboard 实作画面。

首先将准备好的图片拖曳到 Assets.xcassets

先拉一个 tableView，并且在右边的 Prototype Cells 更改为 1

将 tableView 的 Row Height 设为 100

在 Table View Cell 的 Identifier 更改 Table View Cell 的名称（ 此设为 cell ）

在 Table View Cell 的 Row Height 设为 Automatic

在 cell 内拉一个 Image View 和两个 Label 分别显示 Name 和 Date

在专案底下 New Group

然後 New File

选 Cocoa Touch Class

串连 Storyboard Cell 以及 MyTableViewCell

在 MyTableViewCell 档里，分别加入各个物件的 @outlet

在 ViewController 档里，加入 TableView 的 @outlet

在 ViewController 档里写一个 struct 函数，用来定义宣告型态

struct mvs {
    var image : UIImage?
    var date : String?
    var name : String?
    
    init(image: UIImage, date: String, name: String){
        self.image = image
        self.date = date
        self.name = name
    }
}

在 class ViewController: UIViewController 函数底下写一个 function 新增影片项目

var movies = [mvs]()
    func moviesitem(){
        movies.append(mvs(image: UIImage(named:"引爆摩天楼")! , date: "1997年4月19日", name: "引爆摩天楼"))
        movies.append(mvs(image: UIImage(named:"第14号猎物")!, date: "1998年4月18日", name: "第14号猎物"))
        movies.append(mvs(image: UIImage(named:"世纪末的魔术师")!, date: "1999年4月17日", name: "世纪末的魔术师"))
        movies.append(mvs(image: UIImage(named:"瞳孔中的暗杀者")!, date: "2000年4月22日", name: "瞳孔中的暗杀者"))
        movies.append(mvs(image: UIImage(named:"往天国的倒数计时")!, date: "2001年4月21日", name: "往天国的倒数计时"))
        movies.append(mvs(image: UIImage(named:"贝克街的亡灵")!, date: "2002年4月20日", name: "贝克街的亡灵"))
        movies.append(mvs(image: UIImage(named:"迷宫的十字路")!, date: "2003年4月19日", name: "迷宫的十字路"))
        movies.append(mvs(image: UIImage(named:"银翼的奇术师")!, date: "2004年4月17日", name: "银翼的奇术师"))
        movies.append(mvs(image: UIImage(named:"水平线上的阴谋")!, date: "2005年4月9日", name: "水平线上的阴谋"))
        movies.append(mvs(image: UIImage(named:"侦探们的镇魂歌")!, date: "2006年4月15日", name: "侦探们的镇魂歌"))
        movies.append(mvs(image: UIImage(named:"绀碧之棺")!, date: "2007年4月21日", name: "绀碧之棺"))
        movies.append(mvs(image: UIImage(named:"战栗的乐谱")!, date: "2008年4月19日", name: "战栗的乐谱"))
        movies.append(mvs(image: UIImage(named:"漆黑的追迹者")!, date: "2009年4月18日", name: "漆黑的追迹者"))
        movies.append(mvs(image: UIImage(named:"鲁邦三世VS名侦探柯南")!, date: "2009年3月27日", name: "鲁邦三世VS名侦探柯南"))
        // 重新将阵列资料载入tableview
        tableView.reloadData()
    }

在 override func viewDidLoad() 函数底下呼叫新增影片的函数

override func viewDidLoad() {
    super.viewDidLoad()
    // 呼叫新增影片的函数
    moviesitem()  
}

明天会介绍：

1. 扩充 ViewController（UITableViewDelegate,UITableViewDataSource）
2. delegate & dataSource 的拉线

敬请期待！