美文网首页
tabelViewCell的定制

tabelViewCell的定制

作者: 写啥呢 | 来源:发表于2016-09-07 20:45 被阅读0次

    UITableViweCell的定制(手写)

     //MARK: - 属性
        //1.tableView
        let tableView = UITableView.init(frame: UIScreen.mainScreen().bounds, style: .Plain)
        //2.数据源数组
        lazy var dataArray:[NSDictionary] = {
        
            var tempArray = [NSDictionary]()
            
            //1.获取plist文件的路径
            let path = NSBundle.mainBundle().pathForResource("data2.plist", ofType: nil)
            //2.拿到plist文件最外层的数组
            //将plist文件转换成OC的数组(前提是plist的最外层是数组)
            //参数:plist文件的路径
            let plistArray = NSArray.init(contentsOfFile: path!)
            
            //3.遍历数组拿到里面的字典
            for item in plistArray!{
            
                let dict = item as! NSDictionary
                
                //将字典存到数据源数组中
                tempArray.append(dict)
                
            }
            
            return tempArray
        }()
        
        
        
    
        //MARK: - 生命周期
        override func viewDidLoad() {
            super.viewDidLoad()
            //1.添加到界面上
            self.view.addSubview(self.tableView)
            //2.设置代理
            self.tableView.dataSource = self
            self.tableView.delegate = self
            //3.设置行高
            self.tableView.rowHeight = 225
        }
    }
    
    //MARK: - tableView DataSource
    extension ViewController: UITableViewDataSource{
    
        //1.设置每个分组的cell的个数
        func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            
            return self.dataArray.count
        }
        
        //2.创建celll
        func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
            
            //1.去复用池中查找可以复用的cell
            var cell = tableView.dequeueReusableCellWithIdentifier("cell") as? ManTableViewCell
            
            //2.判断是否找到可以复用的cell
            if cell == nil {
                
                cell = ManTableViewCell.init(style: .Subtitle, reuseIdentifier: "cell")
            }
            
            //3.刷新数据
            //a.拿到当前cell对应字典
            let dict = self.dataArray[indexPath.row]
            //b.取到图片二进制
            let data = dict["image_data"] as! NSData
            //将二进制转换成图片
            //封面
            cell?.coverImageView.image = UIImage.init(data: data)
            //标题
            cell?.titleLabel.text = dict["title"] as? String
            //作者头像
            let data2 = dict["autorIcon_data"] as! NSData
            cell?.iconButton.setImage(UIImage.init(data: data2), forState: .Normal)
            //作者名
            cell?.authorNameLabel.text = dict["author_name"] as? String
            
            
            //4.返回cell
            return cell!
            
            
        }
    
    

    自己定制的tableViewCell

    
    //定制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)
            
        }
    }
    
    

    重点

    
     //MARK: - 属性
        //1.数据源数组
        lazy var dataArray:[DataModel] = {
        
            return self.getData()
        }()
    
        //2.tableView
        let tableView = UITableView.init(frame: CGRectZero, style: .Plain)
        
        //3.存储frameModel的数组
        var frameArray = [FrameModel]()
        
        
        //MARK: - 生命周期
        override func viewDidLoad() {
            super.viewDidLoad()
            //1.设置frame
            self.tableView.frame = self.view.bounds
            //2.添加到界面上
            self.view.addSubview(self.tableView)
            //3.设置代理
            self.tableView.dataSource = self
            self.tableView.delegate = self
        }
    
    }
    
    //MARK: - tableView Delegate
    extension ViewController:UITableViewDelegate{
    
        func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
            
            let frameModel = self.frameArray[indexPath.row]
            
            return frameModel.cellHeight
        }
    }
    
    //MARK: - tableView DataSource
    extension ViewController:UITableViewDataSource{
        
        //1.设置每个分组cell的个数
        func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            
            return self.dataArray.count
        }
        
        //2.创建cell
        func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
            
            var cell = tableView.dequeueReusableCellWithIdentifier("cell") as? MyTableViewCell
            
            if cell == nil {
                
                cell = MyTableViewCell.init(style: .Subtitle, reuseIdentifier: "cell")
                //取消选中效果
                cell?.selectionStyle = .None
                
            }
            
            //刷新数据
            let model = self.dataArray[indexPath.row]
            let frameModel = self.frameArray[indexPath.row]
    
            cell?.model = model
            cell?.frameModel = frameModel
            
            
            
            return cell!
        }
    
    }
    
    
    
    //MARK: - 获取数据
    extension ViewController{
    
        func getData() -> [DataModel]{
            var tempArray = [DataModel]()
            
            //1.拿到plist文件的路径
            let path = NSBundle.mainBundle().pathForResource("statuses.plist", ofType: nil)
            //2.获取plist文件中的数组
            let plistArray = NSArray.init(contentsOfFile: path!)
            //3.遍历数组,拿到里面的字典
            for item in plistArray! {
                let dict  = item as! NSDictionary
                
                //将字典转换成对应的数据模型
                let model = DataModel(dict: dict)
                
                //根据数据模型创建frameModel
                let frameModel = FrameModel(model: model)
                
                //将数据模型存到数据源数组中
                tempArray.append(model)
                //将frameModel存到数组中
                self.frameArray.append(frameModel)
            }
            
            
            
            return tempArray
        }
        
    }
    
    
    

    DataModel

    //数据模型类:专门负责数据的存储和操作
    class DataModel: NSObject {
    
        //MARK: - 属性
        //1.文字
        var text = ""
        //2.头像
        var icon = ""
        //3.用户名
        var name = ""
        //4.是否是VIP
        var vip = 0
        //5.图片(这个属性可能没有)
        var picture:String? = nil
    
        //MARK: - 构造方法
        //通过制定的字典创建模型
        init(dict:NSDictionary) {
            
            self.text = dict["text"] as! String
            self.icon = dict["icon"] as! String
            self.name = dict["name"] as! String
            self.vip = dict["vip"] as! Int
            self.picture = dict["picture"] as? String
        }
    }
    
    

    FrameModel

    
    //数据模型类:专门负责数据的存储和操作
    class DataModel: NSObject {
    
        //MARK: - 属性
        //1.文字
        var text = ""
        //2.头像
        var icon = ""
        //3.用户名
        var name = ""
        //4.是否是VIP
        var vip = 0
        //5.图片(这个属性可能没有)
        var picture:String? = nil
    
        //MARK: - 构造方法
        //通过制定的字典创建模型
        init(dict:NSDictionary) {
            
            self.text = dict["text"] as! String
            self.icon = dict["icon"] as! String
            self.name = dict["name"] as! String
            self.vip = dict["vip"] as! Int
            self.picture = dict["picture"] as? String
        }
    }
    
    

    定制的tableView

    
    //1.声明所需要的所有的子视图对应的属性
    //2.将子视图添加到cell上
    //3.计算frame
    
    
    //1.头像
    //2.名字
    //3.vip
    //4.文字
    //5.图片
    class MyTableViewCell: UITableViewCell {
        //MARK: - 属性
        //1.头像
        let iconImageView = UIImageView()
        //2.名字
        let nameLabel = UILabel()
        //3.vip
        let vipImageView = UIImageView()
        //4.文字
        let contentLabel = UILabel()
        //5.图片
        let pictureImageView = UIImageView()
        
        //MARK: - 在给cell的模型赋值的时候去设置子视图的属性
        //6.获取模型的值
        var frameModel: FrameModel? = nil
        
        var model: DataModel? = nil{
        
            didSet{
            
                //1.头像
                self.iconImageView.image = UIImage.init(named: (model?.icon)!)
                //2.名字
                self.nameLabel.text = model?.name
                //3.vip
                //注意:在cell中如果出现if语句,必须把对应的else的情况描述清除
                if model?.vip == 1 {
                    
                    self.vipImageView.hidden = false
                    self.nameLabel.textColor = UIColor.redColor()
                }else{
                    
                    self.vipImageView.hidden = true
                    self.nameLabel.textColor = UIColor.blackColor()
                }
                //4.文字
                self.contentLabel.text = model?.text
                
                //5.图片
                if model!.picture == nil {
                    
                    self.pictureImageView.hidden = true
                    
                }else{
                
                    self.pictureImageView.hidden = false
                    let path = NSBundle.mainBundle().pathForResource(model?.picture, ofType: nil)
                    self.pictureImageView.image = UIImage.init(contentsOfFile: path!)
                }
                
                
                
            }
        }
        
        
        //MARK: - 构造方法
        override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
            super.init(style: style, reuseIdentifier: reuseIdentifier)
            
            //1.头像
            self.contentView.addSubview(iconImageView)
            //self.iconImageView.backgroundColor = UIColor.yellowColor()
            //2.名字
            self.contentView.addSubview(nameLabel)
            self.nameLabel.font = UIFont.systemFontOfSize(13)
            //self.nameLabel.backgroundColor = UIColor.greenColor()
            //3.vip 
          self.contentView.addSubview(vipImageView)
            vipImageView.image = UIImage.init(named: "vip")
            //4.文字
          self.contentView.addSubview(contentLabel)
            self.contentLabel.font = UIFont.systemFontOfSize(14)
            self.contentLabel.numberOfLines = 0
            
            //contentLabel.backgroundColor = UIColor.orangeColor()
            
            
            //5.图片
            self.contentView.addSubview(pictureImageView)
            self.pictureImageView.backgroundColor = UIColor.purpleColor()
            
        }
        
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    
    }
    
    //MARK: - 计算frame
    extension MyTableViewCell{
    
        override func layoutSubviews() {
            super.layoutSubviews()
            
            self.iconImageView.frame = self.frameModel!.iconFrame
            self.nameLabel.frame = self.frameModel!.nameFrame
            self.vipImageView.frame = self.frameModel!.vipFrame
            self.contentLabel.frame = self.frameModel!.textFrame
            self.pictureImageView.frame = self.frameModel!.pictureFrame
            
        }
        
        
        /////============////
        
        
        ////=============////
        
        
    }
    
    
    //MARK: - 其他
    extension MyTableViewCell{
    
        //在通过xib的方式创建cell的时候才会调用
        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
        }
        
        //选中cell的时候会自动调用
        override func setSelected(selected: Bool, animated: Bool) {
            super.setSelected(selected, animated: animated)
            
            // Configure the view for the selected state
        }
    }
    
    

    相关文章

      网友评论

          本文标题:tabelViewCell的定制

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