#53 實作TableView功能-電影列表

目的:練習製作出客製化的TableView

TableView是很多App會用到的呈現方式,連iPhone內建很多地方也會用到,像是設定畫面、鬧鐘、行事曆…等等,都會大量使用到TableView,一起來看看TableView要怎麼實作吧!

TableView

Dynamic Prototypes & Static Cells

TableView的製作可以分成兩種,Dynamic Prototypes需要用程式去顯示,適合用在會顯示很多顯示格以及不確定數量的時候,Static Cells可以固定顯示格數並且直接在格內進行元件排版,適合用在少量且確定格數的地方

section & row

在實作前先來看看TableView的IndexPath,在表格上想要告訴TableView你要顯示的東西或是用使用的東西,都需要用IndexPath來告訴TableView那個東西的座標的概念,IndexPath內分為section和row,以下方圖片為例section像是分類,row則是section裡的每個顯示格,每個section裡row的位置都是獨立的,所以像是section 0的第一格就是(0,0),section 1的第一格就是(1,0),以此類推

電影列表

這次實作TableView我會試著列出五種電影,每種電影內會顯示五部電影,雖然我確定會有25格但因為數量多,所以我會以Dynamic Prototypes去表現

畫面

在ViewController放一個滿版的TableView,並且Content設定為Dynamic Prototypes,Prototypes Cells設為1,因為我們只會顯示一種Cell,只是內容由我們自己客製化而已

電影資料-自訂資料型別

MovieInfo是每部電影的資料,會包含一個電影名稱以及電影資訊的網址,MovieType是每種電影,所以每種電影內會有一個電影資料的Array,然後總共有五種電影所以AllData裡就有一個電影類別的Array

自訂TableViewCell類別

  1. 因為我們要客製化我們的TableViewCell,所以需要自訂我們的TableViewCell去控制我們要顯示的東西
  2. 將畫面中需要變更顯示的東西連結@IBOutlet,需要變更的有顯示電影海報的ImageView和顯示電影名稱的Label
  3. 建立一個function,去改變海報圖片跟電影名稱,這樣等等在TableViewDataSource就可以使用function就好,不用一個一個去做給值,然後帶入三個參數,我們自訂的資料型別以及IndexPath的section & row,用section去找到電影種類,用row去找到每部的電影資訊

TableViewDataSource

在TableView上顯示什麼資料我們需要告訴TableViewDataSource,像是最基本的幾個section以及幾個row等等,在這之前需要先連結TableView的dataSource跟delegate給我們的ViewController

cellForRowAt

取得轉型後的MovieInfoTableViewCell,就是我們要客製化的cell,然後用我們剛剛在TableViewCell裡寫好的function,帶入我們的資料以及indexPath,最後回傳這個客製的TableViewCell讓TableView顯示

section-Header

section裡有Header跟Footer可以顯示一些關於section的標題等等,那我就在Header內設定每種電影的類型名稱,然後設定Header高度50

TableViewDelegate

使用delegate裡的function ,didSelectRowAt可以獲得使用者點擊的cell,那我希望使用者點擊後可以跳出電影資訊的網頁,然後我要用SFSafariViewController去顯示,跟以上取得資料的方法一樣,用indexPath一層一層進去找到網址,並給SFSafariViewController顯示出來,使用前要記得import SafariServices

import SafariServices

操作畫面

參考連結:

GitHub連結:

--

--