美文网首页
UITableView

UITableView

作者: theDeskmateOfSb | 来源:发表于2016-09-07 21:25 被阅读0次

    UITableView

    继承自UIScrollview有滚动视图的特性
    1.创建一个UITableView的对象
    2.添加到视图上
    3.设置dataSource的代理,这个空间必须要通过代理才能使用
    在代理里面必须要调用两个方法
    (1).numberOfRowsInSection->设置当前组有多少个cell
    (2).cellForRowAtIndexPath->创建cell要调用的方法
    创建cell的步骤
    一:去复用池找是否有可以复用的对象

    var cell = tableView.dequeueReusableCellWithIdentifier("cell")
    

    关于复用池,当前屏幕能显示的个数加一个就是所需要自己创建的,在滑动时从屏幕消失的都进入复用池回收,所以内存的消耗比较小
    二:如果在复用池找不到可复用的对象,我们就需要自己创建cell

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

    三:去刷新数据
    四:返回cell
    代理的完整代码

    extension ViewController:UITableViewDataSource{
    
        //一个tableView可以有多个分组,每个分组上有多个cell。默认情况下tableView只有一个分组
        //1.设置tableView每一个分组的的行数(设置tableView上cell的个数)。tableView有多少个分组,每次刷新数据的时候这个方法就会调用多少次
        //参数2:当前分组的下标
        //返回值:设置的当前分组的cell的个数
        func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
        
            return 20000
        }
        
        //2.创建指定位置的cell。每次刷新数据,之前设置的cell的总个数就是这个方法最多调用总的次数。但是一次刷新,一屏能显示多少个cell,就调用多少次
        //!!!!cell的复用原理:每次创建cell的时候先去复用池中查找是否有可以复用的cell;如果有就直接使用,没有就创建新的cell。当cell滑出屏幕以外tableView就会自动将这个cell放到复用池中。复用id作用就是区分复用池中不同样式的cell
        //注:cell的位置是由“第几组的第几行”这样的形式来确定
        //参数2:cell的位置 indexPath.section->第几组 indexPath.row->第几行
        //返回值:创建的cell
        func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
            //1.去复用池中查找是否有可以复用的cell.如果找到了就返回可以复用的cell,找不到就返回nil
            var cell = tableView.dequeueReusableCellWithIdentifier("cell")
            
            //2.判断是否在复用池中找到可以复用的cell,如果没有找到就创建一个新的cell
            if cell == nil {
                print("\(indexPath.section),\(indexPath.row)")
                cell = UITableViewCell.init(style: .Subtitle, reuseIdentifier: "cell")
            }
            //3.刷新数据
            cell?.textLabel?.text = "第\(indexPath.section)组"
            cell?.detailTextLabel?.text = "第\(indexPath.row)行"
            //4.返回cell
            return cell!
        }
    

    tableView的一些常用属性

    //1.设置行高
            self.tableView.rowHeight = 150
            
            //MARK: - header相关
            //2.设置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()
            //设置内容偏移量
            tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0)
            
            //3.设置代理
            tableView.delegate = self
            
            //MARK: - 分割线相关
            //4.设置每次cell之间的分割线到tableView左右边距(上和下无效)
            //参数:上、左、下、右
            tableView.separatorInset = UIEdgeInsetsMake(0, 10, 0, 10)
            
            //设置分割线的风格
            //None -> 没有分割线
            tableView.separatorStyle = .SingleLine
            
            //设置分割线的颜色
            tableView.separatorColor = UIColor.redColor()
            
            //5.设置背景视图
            let bgImageView = UIImageView.init(frame: CGRectMake(0, 0, 0, 0))
            bgImageView.image = UIImage.init(named: "2_5.jpg")
            tableView.backgroundView = bgImageView
    ================delegate代理===========
    //注:遵守UITableViewDelegate协议的同时,也遵守了UIScrollViewDelegate
    extension ViewController:UITableViewDelegate{
    
        //正在滚动的时候实时调用
        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的属性==========
    //设置cell的背景颜色为透明
                cell?.backgroundColor = UIColor.clearColor()
                
                //设置cell的选中效果
                cell?.selectionStyle = .None
                //显示箭头
                cell?.accessoryType = .DisclosureIndicator
    

    tableView的协议方法和分组

    ==============分组======
    //3.设置tableView的分组数(默认是1)
        //每次刷新这个方法只调用一次
        func numberOfSectionsInTableView(tableView: UITableView) -> Int{
        
            //数据源数组中有几个小数组就有几个分组
            return self.dataArray.count
        }
        
        //4.设置每个分组的header的标题
        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=====协议========
    //1.cell被选中的时候调用的方法
        //一般在这个方法中跳转到下一页显示详情
        //参数2:被选中的cell的位置
        func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath){
        
            print("第\(indexPath.section)组的第\(indexPath.row)行被选中")
            
        }
        
        //2.设置每个cell的高度.通过这个方法可以给不同组不同行的cell设置不一样的高度
        //参数2:设置高度的cell的位置
        func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
            
            //让第0组的cell的高度是150,其他组的高度是100
            if indexPath.section == 0 {
                
                return 150
            }
            
            return 100
            
        }
        
        //3.设置分组的header和footer的高度
        func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
            
            return 50
        }
        
        func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
            
            return 0
        }
        
        //4.设置每个分组的headerView
        func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?{
        
            //创建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协议的同时,也遵守了UIScrollViewDelegate
    extension ViewController:UITableViewDelegate{
    
        //正在滚动的时候实时调用
        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.通过创建一个继承UITbleViewcell的类并且创建XIB文件的方式定制cell
    3.通过storyBoard方式来定制

    手写定制cell

    //定制cell的步骤:
    //1.创建一个类继承自UITableViewCell
    //2.声明cell上所有的子视图对应的属性
    //3.在构造方法中去添加子视图(不需要设置frame)。注意:如果想要将子视图直接添加到cell上,不能通过cell去调用addSubView方法,而是用cell的contentView去调用addSubView方法
    //4.在layoutSubViews方法中去设置子视图的frame
    
    
    //1.封面
    //2.头像
    //3.作者名
    //4.标题
    //5.透明层
    class ManTableViewCell: UITableViewCell {
    
        //MARK: - 第二步,声明属性
        //1.封面
        let coverImageView = UIImageView()
        //2.头像
        let iconButton = UIButton()
        //3.作者名
        let authorNameLabel = UILabel()
        //4.标题
        let titleLabel = UILabel()
        //5.透明层
        let alphaView = UIView()
        
        //MARK: - 第三步,重写构造方法,添加子视图
        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.标题
            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.标题
            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方式定制

    比较特别的代码就是创建cell的时候必须先拿到xib文件
    注意:要把XIB上的要变的子视图和继承UITableViewcell的类连接

    //2.判断是否找到可以复用的cell
            if cell == nil {
                
                //拿到xib文件
                //第一个参数是xib文件的文件名
                let nib = UINib.init(nibName: "XibTableViewCell", bundle: nil)
                //通过xib文件创建cell
                cell = nib.instantiateWithOwner(self, options: nil).first as? XibTableViewCell
                
            }
    
    

    storyBoard定制cell

    1.首先在界面上添加一个TableView和viewController连接
    2.在试图控制器的属性栏最后一栏最右边那个箭头哪里去把dataSourse和delegate和viewController连接起来,相当于设置代理
    3.到viewController实现协议创建cell(暂时的)
    4.到storyBoard里面去添加一个Table view cell
    5.把Table view cell属性栏的identifier设置为cell
    6.去创建一个继承UITableViewCell的类,把视图控制器上的cell和这个类关联起来,在属性里面卡片那一栏class写上这个类名
    7.在cell上添加子视图,就是拉控件,布局,然后控件和cell的类连接
    8.去更改先前创建cell的类 变为自定义的类
    9.更新自己需要的数据

    让cell的大小随着内容的大小变化而变化

    这个有点烦!

    相关文章

      网友评论

          本文标题:UITableView

          本文链接:https://www.haomeiwen.com/subject/ssxsettx.html