創(chuàng)建UITableViewCell子類

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 可以改變大小饥漫。

截屏2021-11-27 22.35.36.png
  1. 創(chuàng)建一個叫 ItemCell 的 Swift 文件。
  2. 使用 storyboard 配置 UITableViewCell 子類罗标。
  • 打開 Main.storyboard庸队,在文件大綱中選擇 UITableViewCell 积蜻。 打開屬性檢視面板,把 Style(樣式) 改為 Custom(定制)彻消,然后把 Identifier(標識)改為 ltemCell 竿拆。接著,打開標識檢視面板宾尚。 在 Class輸入框中輸入 ItemCell丙笋。

  • 把 prototype cell 的高度修改為 65 點 』吞可以直接在畫布上修改御板,也可以選中 prototype cell 后在尺寸檢視面板中修改 Row Height(行高)。

  • 拖三個 UILabel 對象到storyboard并添加約束牛郑。

  1. 打開 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!
    }
截屏2021-11-27 22.53.45.png
  1. 在 ItemViewController 的 tableView(_: cellForRowAtIndexPath: ) 方法中, UITableView 的每行都會獲得一個 ItemCell 對象〈∩郑現(xiàn)在使用了自定義的 UITableViewCell 子類酪惭,因此 UITableView 需要知道每行的高度。有幾種方法可以完成這個任務 者甲,最簡單的是給 UITableView 的rowHeight 屬性設置一個常量值。本章后面會介紹其他方法砌创。
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.rowHeight = 65
    }
  1. 現(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市头遭,隨后出現(xiàn)的幾起案子寓免,更是在濱河造成了極大的恐慌癣诱,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袜香,死亡現(xiàn)場離奇詭異撕予,居然都是意外死亡,警方通過查閱死者的電腦和手機蜈首,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門实抡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人欢策,你說我怎么就攤上這事吆寨。” “怎么了踩寇?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵啄清,是天一觀的道長。 經(jīng)常有香客問我俺孙,道長辣卒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任睛榄,我火速辦了婚禮荣茫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘场靴。我一直安慰自己啡莉,他們只是感情好,可當我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布旨剥。 她就那樣靜靜地躺著票罐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪泞边。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天疗杉,我揣著相機與錄音阵谚,去河邊找鬼。 笑死烟具,一個胖子當著我的面吹牛梢什,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播朝聋,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼嗡午,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了冀痕?” 一聲冷哼從身側(cè)響起荔睹,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤狸演,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后僻他,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宵距,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年吨拗,在試婚紗的時候發(fā)現(xiàn)自己被綠了满哪。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡劝篷,死狀恐怖哨鸭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情娇妓,我是刑警寧澤像鸡,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站峡蟋,受9級特大地震影響坟桅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蕊蝗,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一仅乓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蓬戚,春花似錦夸楣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至幢泼,卻和暖如春紧显,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缕棵。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工孵班, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人招驴。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓篙程,卻偏偏與公主長得像,于是被迫代替她去往敵國和親别厘。 傳聞我的和親對象是個殘疾皇子虱饿,可洞房花燭夜當晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容