#63 情歌對唱的聊天室畫面：Can You Feel The Love Tonight
因為不久前看了獅子王真獅版，對於劇情、對白和音樂都還有很深的印象，所以這次練習UITableView就用Sima🦁和Nala對唱的Can You Feel The Love Tonight來完成！
1. 製作畫面
拉一個TableView到畫面中，並且設定約束條件為貼齊螢幕的四邊。再拉兩個Cell分別設定Identifier為simba、nala，以便後續重複使用時取用到正確的Cell。
因為兩個Cell的佈局和顯示內容都不同，所以新增兩個CocoaTouch File，同時建立XIB File(Figure 2)設計Cell的Layout，完成之後回到StoryBoard將Cell和Class連結(Figure 3)。
接著設計simbaCell和nalaCell的佈局。兩個Cell大同小異，sima置左、nala置右，其中比較需要注意的地方是ContainerView的寬度和高度，為了配合TextView顯示文字的多寡所以不用 ”=” ，而是用 ”≤” 或 “≥” 來設定。
2. 連結畫面上的元件
目前總共有三個地方設計畫面，要各自連結擁有的元件到對應的Class中。
Main.storyborad ➟ ViewController.swift：
@IBOutlet weak var tableView: UITableView!
simbaCell.xib ➟ simbaCell.swift：
@IBOutlet weak var simbaTextView: UITextView!、 @IBOutlet weak var containerView: UIView!
nalaCell.xib ➟ nalaCell. swift：
@IBOutlet weak var nalaTextView: UITextView!、 @IBOutlet weak var containerView: UIView!
3. ViewController遵從UITableView Protocol、註冊Cell Xib
UITableView需要遵從UITableViewDataSource、UITableViewDelegate使用相關的Function，也必須告訴UITableView委派物件為何。而Cell Xib則是需要註冊過後才能被使用。
DataSource ➟ 處理資料，將所有要顯示在畫面上的資料傳過去。
ex. numberOfRowsInSection、cellForRowAt…
Delegate ➟ 處理介面，將所有對於畫面上的操作反映回系統。
ex. heightForRowAt、willDisplay…
4. 設計Lyrics Model
因為歌詞很多還要對應唱的角色，如果直接用Array或Dictionary可讀性沒有那麼高，所以先用Struct Lyrics定義每句的歌詞和角色，再到ViewController建立Array lyrics物件存放資料會比較清楚。
5. 繪製ChatBubble
對我來說是這個App最困難的地方🥺其實就畫出ChatBubble這件事本身來說不難，但因為一開始我沒有弄清楚相對座標系統…所以畫得亂七八糟又歪七扭八😤來看看到底是怎樣！
Simba的ChatBubble：
Nala的ChatBubble：
這邊記得加入func layoutSubviews( )，才能得到依據AutoLayout約束條件計算出的各種元件位置大小，也才能在繪製ChatBubble時得到正確的width和height。
6. 定義UITableView Protocol的Function
一切都準備就緒之後，當然就是要呈現在畫面上！
nuberOfRowInSection：
區塊(Section)內有多少列(Cell)？在這個App中只有一個Section，而這個Section包含了所有的Cell，也就是所有的歌詞，所以回傳前面定義的Array lyrics物件的數量。
cellForRowAt：
每列(Cell)要顯示什麼內容？建立常數showLyrics來存放目前要顯示的Cell內容，如果showLyrics.name == “simba”就使用simbaCell，其餘則使用nalaCell並且顯示對應的歌詞。
heightForRowAt：
每列(Cell)的高度多少？因為每句歌詞的長短都不一樣，所以希望Cell可以利用AutoLayout的約束條件自動計算高度，這邊只要直接回傳UITableView.automaticDimension即可。
willDisplay：
每列(Cell)顯示前先做什麼？在Cell顯示之前利用layoutIfNeeded( )得到由AutoLayout計算出的X、Y、Width、Height，之後呼叫chatBubble( )才能繪製出正確的圖案。
7. 分類專案檔案
剛好這次練習建立比較多檔案，所以我試著用MVC架構將檔案分類了！
大功告成！程式的部分其實很快就完成了，我主要是卡在畫ChatBubble…被座標搞得暈頭轉向🤪花了不少時間寫文章希望能幫自己加深記憶和複習，寫程式的道路還很漫長！加油👊🏻👊🏻👊🏻
如果有什麼建議歡迎留言～有興趣可以取用我的程式碼🙆🏻♀️
最後附上好聽的Can You Feel The Love Tonight📽
