UITableView

UITableView

繼承自UIScrollview有滾動視圖的特性
1.創(chuàng)建一個UITableView的對象
2.添加到視圖上
3.設(shè)置dataSource的代理,這個空間必須要通過代理才能使用
在代理里面必須要調(diào)用兩個方法
(1).numberOfRowsInSection->設(shè)置當(dāng)前組有多少個cell
(2).cellForRowAtIndexPath->創(chuàng)建cell要調(diào)用的方法
創(chuàng)建cell的步驟
一:去復(fù)用池找是否有可以復(fù)用的對象

var cell = tableView.dequeueReusableCellWithIdentifier("cell")

關(guān)于復(fù)用池芽唇,當(dāng)前屏幕能顯示的個數(shù)加一個就是所需要自己創(chuàng)建的顾画,在滑動時從屏幕消失的都進(jìn)入復(fù)用池回收,所以內(nèi)存的消耗比較小
二:如果在復(fù)用池找不到可復(fù)用的對象匆笤,我們就需要自己創(chuàng)建cell

if cell == nil {
            
            print("\(indexPath.section),\(indexPath.row)")
            
            cell = UITableViewCell.init(style: .Subtitle, reuseIdentifier: "cell")
        }

三:去刷新數(shù)據(jù)
四:返回cell
代理的完整代碼

extension ViewController:UITableViewDataSource{

    //一個tableView可以有多個分組研侣,每個分組上有多個cell。默認(rèn)情況下tableView只有一個分組
    //1.設(shè)置tableView每一個分組的的行數(shù)(設(shè)置tableView上cell的個數(shù))炮捧。tableView有多少個分組庶诡,每次刷新數(shù)據(jù)的時候這個方法就會調(diào)用多少次
    //參數(shù)2:當(dāng)前分組的下標(biāo)
    //返回值:設(shè)置的當(dāng)前分組的cell的個數(shù)
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
    
        return 20000
    }
    
    //2.創(chuàng)建指定位置的cell。每次刷新數(shù)據(jù)咆课,之前設(shè)置的cell的總個數(shù)就是這個方法最多調(diào)用總的次數(shù)末誓。但是一次刷新,一屏能顯示多少個cell书蚪,就調(diào)用多少次
    //!!!!cell的復(fù)用原理:每次創(chuàng)建cell的時候先去復(fù)用池中查找是否有可以復(fù)用的cell基显;如果有就直接使用,沒有就創(chuàng)建新的cell善炫。當(dāng)cell滑出屏幕以外tableView就會自動將這個cell放到復(fù)用池中撩幽。復(fù)用id作用就是區(qū)分復(fù)用池中不同樣式的cell
    //注:cell的位置是由“第幾組的第幾行”這樣的形式來確定
    //參數(shù)2:cell的位置 indexPath.section->第幾組 indexPath.row->第幾行
    //返回值:創(chuàng)建的cell
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        //1.去復(fù)用池中查找是否有可以復(fù)用的cell.如果找到了就返回可以復(fù)用的cell,找不到就返回nil
        var cell = tableView.dequeueReusableCellWithIdentifier("cell")
        
        //2.判斷是否在復(fù)用池中找到可以復(fù)用的cell,如果沒有找到就創(chuàng)建一個新的cell
        if cell == nil {
            print("\(indexPath.section),\(indexPath.row)")
            cell = UITableViewCell.init(style: .Subtitle, reuseIdentifier: "cell")
        }
        //3.刷新數(shù)據(jù)
        cell?.textLabel?.text = "第\(indexPath.section)組"
        cell?.detailTextLabel?.text = "第\(indexPath.row)行"
        //4.返回cell
        return cell!
    }

tableView的一些常用屬性

//1.設(shè)置行高
        self.tableView.rowHeight = 150
        
        //MARK: - header相關(guān)
        //2.設(shè)置tableView的header
        //樣式1:
        let headerView = UIView.init(frame: CGRectMake(0, 0, 0, 200))
        headerView.backgroundColor = UIColor.yellowColor()
        let imageView = UIImageView.init(frame:CGRectMake(0, 0, 0, 200))
        imageView.image = UIImage.init(named: "2_9.jpg")
        //self.tableView.tableHeaderView = imageView
        
        //樣式2:
        headerImageView = UIImageView.init(frame: CGRectMake(0, 0, self.view.bounds.width, 200))
        headerImageView.backgroundColor = UIColor.redColor()
        headerImageView.image = UIImage.init(named: "2_3.jpg")
        self.view.addSubview(headerImageView)
        self.view.sendSubviewToBack(headerImageView)
        self.tableView.backgroundColor = UIColor.clearColor()
        //設(shè)置內(nèi)容偏移量
        tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0)
        
        //3.設(shè)置代理
        tableView.delegate = self
        
        //MARK: - 分割線相關(guān)
        //4.設(shè)置每次cell之間的分割線到tableView左右邊距(上和下無效)
        //參數(shù):上、左箩艺、下窜醉、右
        tableView.separatorInset = UIEdgeInsetsMake(0, 10, 0, 10)
        
        //設(shè)置分割線的風(fēng)格
        //None -> 沒有分割線
        tableView.separatorStyle = .SingleLine
        
        //設(shè)置分割線的顏色
        tableView.separatorColor = UIColor.redColor()
        
        //5.設(shè)置背景視圖
        let bgImageView = UIImageView.init(frame: CGRectMake(0, 0, 0, 0))
        bgImageView.image = UIImage.init(named: "2_5.jpg")
        tableView.backgroundView = bgImageView
================delegate代理===========
//注:遵守UITableViewDelegate協(xié)議的同時,也遵守了UIScrollViewDelegate
extension ViewController:UITableViewDelegate{

    //正在滾動的時候?qū)崟r調(diào)用
    func scrollViewDidScroll(scrollView: UIScrollView) {

        if scrollView.contentOffset.y >= -200 {
            
            return
        }
        //計算放大后的寬度和高度
        let h2 = -scrollView.contentOffset.y
        let w2 = self.view.bounds.width*self.headerImageView.frame.size.height/200
        
        self.headerImageView.frame = CGRectMake(0, 0, w2, h2)
        self.headerImageView.center = CGPointMake(self.view.center.x, h2/2)
    }
    
}
===========cell的屬性==========
//設(shè)置cell的背景顏色為透明
            cell?.backgroundColor = UIColor.clearColor()
            
            //設(shè)置cell的選中效果
            cell?.selectionStyle = .None
            //顯示箭頭
            cell?.accessoryType = .DisclosureIndicator

tableView的協(xié)議方法和分組

==============分組======
//3.設(shè)置tableView的分組數(shù)(默認(rèn)是1)
    //每次刷新這個方法只調(diào)用一次
    func numberOfSectionsInTableView(tableView: UITableView) -> Int{
    
        //數(shù)據(jù)源數(shù)組中有幾個小數(shù)組就有幾個分組
        return self.dataArray.count
    }
    
    //4.設(shè)置每個分組的header的標(biāo)題
    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        
        let str = "ABCDEFGH"
        let c = str.characters[str.startIndex.advancedBy(section)]
        return "\(c)"
        }
        //5.右邊顯示的組名(不常用)
    func sectionIndexTitlesForTableView(tableView: UITableView) -> [String]?{
    
        return ["A","B","C","D","E"]
    }
========delegete=====協(xié)議========
//1.cell被選中的時候調(diào)用的方法
    //一般在這個方法中跳轉(zhuǎn)到下一頁顯示詳情
    //參數(shù)2:被選中的cell的位置
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath){
    
        print("第\(indexPath.section)組的第\(indexPath.row)行被選中")
        
    }
    
    //2.設(shè)置每個cell的高度.通過這個方法可以給不同組不同行的cell設(shè)置不一樣的高度
    //參數(shù)2:設(shè)置高度的cell的位置
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        
        //讓第0組的cell的高度是150艺谆,其他組的高度是100
        if indexPath.section == 0 {
            
            return 150
        }
        
        return 100
        
    }
    
    //3.設(shè)置分組的header和footer的高度
    func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        
        return 50
    }
    
    func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        
        return 0
    }
    
    //4.設(shè)置每個分組的headerView
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?{
    
        //創(chuàng)建headerView
        let headerView = UIView.init(frame: CGRectMake(0, 0, 0, 0))
        headerView.backgroundColor = UIColor.yellowColor()
        
        //在header上添加圖片
        let imageView = UIImageView.init(frame: CGRectMake(10, 5, 40, 40))
        imageView.image = UIImage.init(named: "10_\(section).jpg")
        headerView.addSubview(imageView)
        
        
        return headerView
        
        
    }
    //注:遵守UITableViewDelegate協(xié)議的同時榨惰,也遵守了UIScrollViewDelegate
extension ViewController:UITableViewDelegate{

    //正在滾動的時候?qū)崟r調(diào)用
    func scrollViewDidScroll(scrollView: UIScrollView) {

        if scrollView.contentOffset.y >= -200 {
            
            return
        }
        //計算放大后的寬度和高度
        let h2 = -scrollView.contentOffset.y
        let w2 = self.view.bounds.width*self.headerImageView.frame.size.height/200
        
        self.headerImageView.frame = CGRectMake(0, 0, w2, h2)
        self.headerImageView.center = CGPointMake(self.view.center.x, h2/2)
    }

UITbleViewcell的定制

有三種方式
1.手寫
2.通過創(chuàng)建一個繼承UITbleViewcell的類并且創(chuàng)建XIB文件的方式定制cell
3.通過storyBoard方式來定制

手寫定制cell

//定制cell的步驟:
//1.創(chuàng)建一個類繼承自UITableViewCell
//2.聲明cell上所有的子視圖對應(yīng)的屬性
//3.在構(gòu)造方法中去添加子視圖(不需要設(shè)置frame)。注意:如果想要將子視圖直接添加到cell上静汤,不能通過cell去調(diào)用addSubView方法琅催,而是用cell的contentView去調(diào)用addSubView方法
//4.在layoutSubViews方法中去設(shè)置子視圖的frame


//1.封面
//2.頭像
//3.作者名
//4.標(biāo)題
//5.透明層
class ManTableViewCell: UITableViewCell {

    //MARK: - 第二步,聲明屬性
    //1.封面
    let coverImageView = UIImageView()
    //2.頭像
    let iconButton = UIButton()
    //3.作者名
    let authorNameLabel = UILabel()
    //4.標(biāo)題
    let titleLabel = UILabel()
    //5.透明層
    let alphaView = UIView()
    
    //MARK: - 第三步,重寫構(gòu)造方法,添加子視圖
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        //1.封面
        self.contentView.addSubview(coverImageView)
        //2.頭像
        self.contentView.addSubview(iconButton)
        //3.作者名
        self.contentView.addSubview(authorNameLabel)
        self.authorNameLabel.textColor = UIColor.whiteColor()
        //4.標(biāo)題
        self.contentView.addSubview(titleLabel)
        self.titleLabel.textColor = UIColor.whiteColor()
        //5.透明層
        self.contentView.addSubview(alphaView)
        self.alphaView.backgroundColor = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.5)
        
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    

}


extension ManTableViewCell{

    //MARK: - 第四步虫给,計算子視圖的frame
    override func layoutSubviews() {
        super.layoutSubviews()
        //通用
        let cellW = self.frame.size.width
        let cellH = self.frame.size.height
        let margin:CGFloat = 20

        //1.封面
        let coverX: CGFloat = 0
        let coverY: CGFloat = 0
        let coverW = cellW
        let coverH = cellH
        self.coverImageView.frame = CGRectMake(coverX, coverY, coverW, coverH)
        //2.頭像
        let iconX = margin
        let iconY = margin
        let iconW: CGFloat = 80
        let iconH: CGFloat = 80
        self.iconButton.frame = CGRectMake(iconX, iconY, iconW, iconH)
        //切圓
        iconButton.layer.masksToBounds = true
        iconButton.layer.cornerRadius = 40
        
        
        //3.作者名
        let authorX = iconX + iconW + margin
        let authorH: CGFloat = 20
        let authorY = iconY + iconH/2 - authorH/2
        let authorW = cellW - authorX - margin
        authorNameLabel.frame = CGRectMake(authorX, authorY, authorW, authorH)
        //4.標(biāo)題
        let titleX = margin
        let titleH: CGFloat = 20
        let titleY = cellH - margin - titleH
        let titleW = cellW - margin*2
        titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH)
        //5.透明層
        let alphaX:CGFloat = 0
        let alphaH = margin + titleH + margin
        let alphaY = cellH - alphaH
        let alphaW = cellW
        alphaView.frame = CGRectMake(alphaX,alphaY, alphaW, alphaH)
        
    }
}

XIB方式定制

比較特別的代碼就是創(chuàng)建cell的時候必須先拿到xib文件
注意:要把XIB上的要變的子視圖和繼承UITableViewcell的類連接

//2.判斷是否找到可以復(fù)用的cell
        if cell == nil {
            
            //拿到xib文件
            //第一個參數(shù)是xib文件的文件名
            let nib = UINib.init(nibName: "XibTableViewCell", bundle: nil)
            //通過xib文件創(chuàng)建cell
            cell = nib.instantiateWithOwner(self, options: nil).first as? XibTableViewCell
            
        }

storyBoard定制cell

1.首先在界面上添加一個TableView和viewController連接
2.在試圖控制器的屬性欄最后一欄最右邊那個箭頭哪里去把dataSourse和delegate和viewController連接起來藤抡,相當(dāng)于設(shè)置代理
3.到viewController實現(xiàn)協(xié)議創(chuàng)建cell(暫時的)
4.到storyBoard里面去添加一個Table view cell
5.把Table view cell屬性欄的identifier設(shè)置為cell
6.去創(chuàng)建一個繼承UITableViewCell的類,把視圖控制器上的cell和這個類關(guān)聯(lián)起來抹估,在屬性里面卡片那一欄class寫上這個類名
7.在cell上添加子視圖缠黍,就是拉控件,布局药蜻,然后控件和cell的類連接
8.去更改先前創(chuàng)建cell的類 變?yōu)樽远x的類
9.更新自己需要的數(shù)據(jù)

讓cell的大小隨著內(nèi)容的大小變化而變化

這個有點煩瓷式!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末替饿,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子贸典,更是在濱河造成了極大的恐慌视卢,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件廊驼,死亡現(xiàn)場離奇詭異腾夯,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蔬充,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來班利,“玉大人饥漫,你說我怎么就攤上這事÷薇辏” “怎么了庸队?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長闯割。 經(jīng)常有香客問我彻消,道長,這世上最難降的妖魔是什么宙拉? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任宾尚,我火速辦了婚禮,結(jié)果婚禮上谢澈,老公的妹妹穿的比我還像新娘煌贴。我一直安慰自己,他們只是感情好锥忿,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布牛郑。 她就那樣靜靜地躺著,像睡著了一般敬鬓。 火紅的嫁衣襯著肌膚如雪淹朋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天钉答,我揣著相機(jī)與錄音础芍,去河邊找鬼。 笑死数尿,一個胖子當(dāng)著我的面吹牛者甲,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播砌创,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼虏缸,長吁一口氣:“原來是場噩夢啊……” “哼鲫懒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起刽辙,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤窥岩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后宰缤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體颂翼,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年慨灭,在試婚紗的時候發(fā)現(xiàn)自己被綠了朦乏。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡氧骤,死狀恐怖呻疹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情筹陵,我是刑警寧澤刽锤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站朦佩,受9級特大地震影響并思,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜语稠,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一宋彼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧仙畦,春花似錦宙暇、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至先口,卻和暖如春型奥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背碉京。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工厢汹, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谐宙。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓烫葬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子搭综,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

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