[iOS study] 情歌對嗆的聊天室畫面 — cell 的 auto layout

用歌詞對唱聊天室畫面，學習定義 UITableViewDataSource 的相關 function ＆ cell 的 auto layout。由於我不想在程式裡用array直接指定，參考飲料清單方式，將下載的歌詞txt編輯好匯入後，讀取資料來應用。

swift struct

import Foundation
struct Lyrics {
var songTime:String
var songRole:String
var songLyric:String
}

tableview controller

var songTimes = [String]()
var songRoles = [String]()
var songLyrics = [String]()
var lyrics = [Lyrics]()
override func viewDidLoad() {
super.viewDidLoad()
if let asset = NSDataAsset(name: "whoAreYouAfraid"), let content =
String(data: asset.data, encoding: .utf8) {
let array0 = content.components(separatedBy: "\n")
print(array0[0], array0[1])
print(array0.count)
for lyric in array0 {
let array = lyric.components(separatedBy: ",")
songTimes.append(array[0])
songRoles.append(array[1])
songLyrics.append(array[2])
}
for i in 0...array0.count-1 {
lyrics.append(Lyrics(songTime: songTimes[i], songRole: songRoles[i], songLyric: songLyrics[i]))
}
}

tips：善用print可以測試各階段是否成功，以及出現的順序；txt的檔案編碼錯誤可能導致讀取失敗，建議多試試txt檔案重新建立及匯入

語法參考自：
https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/100%E9%81%93iosapp%E8%AC%8E%E9%A1%8C-20-%E8%A8%82%E9%A3%B2%E6%96%99-app-%E4%B8%8A%E5%82%B3%E8%B3%87%E6%96%99%E5%88%B0%E5%BE%8C%E5%8F%B0-f2e74e3bca91

將讀取的資料呈現到tableview的cell

由於對唱有兩個角色的不同格式設計，新增兩個file class的cell

storyboard建立兩個cell並將class指定到對應的名稱

兩個cell的identifier分別給予命名

把元件拉入cell的swift

程式：

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return lyrics.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let tableLyric = lyrics[indexPath.row]
print(tableLyric.songRole)
if tableLyric.songRole == " 女" {
let cell = tableView.dequeueReusableCell(withIdentifier: "girlChat", for: indexPath) as! girlTableViewCell
cell.lyricLabel.text = tableLyric.songLyric
print(lyrics[10].songLyric)
return cell
} else {
let cell = tableView.dequeueReusableCell(withIdentifier: "boyChat", for: indexPath) as! boyTableViewCell
cell.roleImage.image = UIImage(named: "role0")
cell.lyricLabel.text = tableLyric.songLyric
print(lyrics[11].songLyric)
return cell
}
}

tip: 我的資料內有 空格，導致一開始辨識有問題，若遇類似資料辨識不到，可朝此方向調查。本次我配合不修改資料，而是在程式內先以tableLyric.songRole == “ 女” 來完成分類。

cell的auto layout

將label的lines改為0，並將line break改為wrap

設定label的上下左右邊界

為使label的寬度可隨文字內容伸縮，多水平添加一個無內容的label

將無內容label設定邊界，並將horizontal數值改小

如此，有內容label就可依據文字內容橫向加長，多行狀況的cell也會向下加長（不會遮蔽到cell內的內容）

網路上的歌詞常見有音樂時間序，感覺也可以運用timer練習，但是這次花很多時間研究以上，timer這次就先跳過了。

github:

yolanda0213h/whoAreYouAraid