UITableView 會顯示一列 UITableViewCell 對象侠驯。對于大部分應用 , 基礎 UITableViewCell 的 textlabel 括堤、 detailTextlabel 和 image View 就夠用了厉熟。但是,如果要顯示更多內(nèi)容
缠黍,或者定制布局
,就需要創(chuàng)建 UITableViewCell 子類了药蜻。
向 UITableViewCell 子類的 contentView 添加子視圖瓷式,可以定制界面。
注意:不要直接向UITableViewCell 添加子視圖语泽,而要添加到 contentView 上贸典,因為有時 UITableViewCell 會改變 contentView 的大小 。
例如:當 UITableView 進入編輯模式時湿弦,為了顯示刪除按鈕瓤漏, contentView 的大小就會改變。如果直接向 UITableViewCell 添加子視圖颊埃,刪除按鈕就可能被擋住蔬充。進入編輯模式時, UITableViewCell 是不能調(diào)整大小的(它需要保待與 UITableView 一樣寬)班利,但是 contentView 可以改變大小饥漫。
- 創(chuàng)建一個叫 ItemCell 的 Swift 文件。
- 使用 storyboard 配置 UITableViewCell 子類罗标。
打開 Main.storyboard庸队,在文件大綱中選擇 UITableViewCell 积蜻。 打開屬性檢視面板,把
Style(樣式)
改為Custom(定制)
彻消,然后把 Identifier(標識)改為 ltemCell 竿拆。接著,打開標識檢視面板宾尚。 在Class
輸入框中輸入ItemCell
丙笋。把 prototype cell 的高度修改為 65 點 』吞可以直接在畫布上修改御板,也可以選中 prototype cell 后在尺寸檢視面板中修改 Row Height(行高)。
拖三個 UILabel 對象到storyboard并添加約束牛郑。
- 打開 ItemCell.swift,添加三個插座變量的屬性并與storyboard的Label進行關(guān)聯(lián)怠肋。
注意:ItemCell 的插座變量在子類視圖中。 可以打開 Main.storyboard 淹朋, 按住 Control 并點擊文件大綱中的 ItemCell 笙各。
class ItemCell: UITableViewCell{
@IBOutlet var nameLabel: UILabel!
@IBOutlet var serialNumberLabel: UILabel!
@IBOutlet var valueLabel: UILabel!
}
- 在 ItemViewController 的
tableView(_: cellForRowAtIndexPath: ) 方法
中, UITableView 的每行都會獲得一個 ItemCell 對象〈∩郑現(xiàn)在使用了自定義的 UITableViewCell 子類酪惭,因此 UITableView 需要知道每行的高度。有幾種方法可以完成這個任務 者甲,最簡單的是給 UITableView 的rowHeight 屬性
設置一個常量值。本章后面會介紹其他方法砌创。
override func viewDidLoad() {
super.viewDidLoad()
tableView.rowHeight = 65
}
- 現(xiàn)在已在 UITableView 中注冊過 ItemCell 了(在 storyboard 的原型 Cell 中)虏缸,因此可 以通過 “ ItemCell" 標識來獲得 ItemCell 了 。在 ItemsViewController.swift 中修改 tableView(_: cellForRowAtIndexPath: ) 嫩实,代碼如下:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//let cell = UITableViewCell(style: .value1, reuseIdentifier: "UItableViewCell")
//let cell = tableView.dequeueReusableCell(withIdentifier: "UITableViewCell", for: indexPath) //創(chuàng)建一個新的 UITableViewCell 對象或重用一個 UITableViewCell 對象
let cell = tableView.dequeueReusableCell(withIdentifier: "ItemCell", for: indexPath) as! ItemCell
let item = itemStore.allItems[indexPath.row] //將 tableview 中第n行的文字設置為第n個 item 對象的名字刽辙。
// cell.textLabel?.text = item.name
// cell.detailTextLabel?.text = "$\(item.valueInDollars)"
cell.nameLabel.text = item.name
cell.serialNumberLabel.text = item.serialNumber
cell.valueLabel.text = "$\(item.valueInDollars)"
return cell
}
- 以上代碼首先更新了重用標識 ,指向了新的對象甲献,然后宰缤,在方法末尾為 ItemCell 的每個 標簽設置合適的值。
動態(tài)計算Cell高度
使用自動布局來完成這個任務晃洒。 ItemCell 需要一個明確決定高度的約束慨灭,但是現(xiàn)在 ItemCell 還沒有這個約束,讀者需要在兩個標簽之間添加一個固定間距的約束球及。
打開 Main.storyboard 氧骤。按住 Control,從 nameLabel 拖到 serialNumberlLabel后選擇
Vertical Spacing (豎直間距)
吃引。下面打開 ItemsViewController.swift筹陵,更新 viewDidLoad() 方法 刽锤,讓UITableView根據(jù)約束計算 ItemCell 的高度。
override func viewDidLoad() {
super.viewDidLoad()
//tableView.rowHeight = 65
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 65 //設置 estimatedRowHeight 屬性可以讓這些計算延后朦佩,直到用戶滑動 UITableView 時才去計算并思。
}
- UITableViewAutomaticDimension 是 rowHeight 屬性的默認值,雖然沒有必要設置语稠, 但是加上可以讓代碼更容易理解宋彼。
動態(tài)類型
支持動態(tài)類型的應用會自動縮放字體。本節(jié)將會讓 ItemCell 支持動態(tài)類型颅筋。
打開 Main.storyboard 宙暇。下面讓標簽不再使用固定的字體,而是使用文字樣式议泵。選中 nameLabel 和 valuelabel 后打開屬性檢視面板占贫。點擊 Font(字體)右邊的文字圖標,在 Font 中選擇 Text Styles-Body先口。對 serialNumber 執(zhí)行相同的操作型奥,選擇 Caption 1 文字樣式。
編譯并運行應用(無論是使用任務切換器還是 Home 鍵切換回應用碉京,都不會看到剛才的修改厢汹。下一 節(jié)會修復這個問題),再向 UITableView 中添加一些 Item , 就可以看到新的小文字樣式了 谐宙。
響應用戶的修改
當用戶改變首選字體大小回到應用時烫葬, UITableView 應該重新加載數(shù)據(jù)。很不幸凡蜻,標簽并不知道新選擇的字體大小搭综,需要手動更新標簽來修復這個問題 。
- 打開 ItemCell. swift,
重載 awakeFromNib()方法
來讓標簽自適應字體大小划栓。
override func awakeFromNib() {
super.awakeFromNib()
nameLabel.adjustsFontForContentSizeCategory = true
serialNumberLabel.adjustsFontForContentSizeCategory = true
valueLabel.adjustsFontForContentSizeCategory = true
}
當 ItemCell 從 storyboard 文件中加載完成后兑巾,就會調(diào)用 awakeFromNib() 方法。調(diào)用這個方法時忠荞,所有插座變量都已經(jīng)有值了 蒋歌。
編譯并運行應用,然后添加一些 Item委煤。 到設置應用中把首選字體設置為最大堂油。與之前的不同,現(xiàn)在通過任務切換器或者 Home 鍵切換回 Homepwner素标,UITableView 會使用新的首選字體更新界面称诗。
L