UITableViweCell的定制(手寫)
//MARK: - 屬性
//1.tableView
let tableView = UITableView.init(frame: UIScreen.mainScreen().bounds, style: .Plain)
//2.數(shù)據(jù)源數(shù)組
lazy var dataArray:[NSDictionary] = {
var tempArray = [NSDictionary]()
//1.獲取plist文件的路徑
let path = NSBundle.mainBundle().pathForResource("data2.plist", ofType: nil)
//2.拿到plist文件最外層的數(shù)組
//將plist文件轉(zhuǎn)換成OC的數(shù)組(前提是plist的最外層是數(shù)組)
//參數(shù):plist文件的路徑
let plistArray = NSArray.init(contentsOfFile: path!)
//3.遍歷數(shù)組拿到里面的字典
for item in plistArray!{
let dict = item as! NSDictionary
//將字典存到數(shù)據(jù)源數(shù)組中
tempArray.append(dict)
}
return tempArray
}()
//MARK: - 生命周期
override func viewDidLoad() {
super.viewDidLoad()
//1.添加到界面上
self.view.addSubview(self.tableView)
//2.設(shè)置代理
self.tableView.dataSource = self
self.tableView.delegate = self
//3.設(shè)置行高
self.tableView.rowHeight = 225
}
}
//MARK: - tableView DataSource
extension ViewController: UITableViewDataSource{
//1.設(shè)置每個分組的cell的個數(shù)
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.dataArray.count
}
//2.創(chuàng)建celll
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
//1.去復(fù)用池中查找可以復(fù)用的cell
var cell = tableView.dequeueReusableCellWithIdentifier("cell") as? ManTableViewCell
//2.判斷是否找到可以復(fù)用的cell
if cell == nil {
cell = ManTableViewCell.init(style: .Subtitle, reuseIdentifier: "cell")
}
//3.刷新數(shù)據(jù)
//a.拿到當(dāng)前cell對應(yīng)字典
let dict = self.dataArray[indexPath.row]
//b.取到圖片二進制
let data = dict["image_data"] as! NSData
//將二進制轉(zhuǎn)換成圖片
//封面
cell?.coverImageView.image = UIImage.init(data: data)
//標(biāo)題
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.創(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)
}
}
重點
//MARK: - 屬性
//1.數(shù)據(jù)源數(shù)組
lazy var dataArray:[DataModel] = {
return self.getData()
}()
//2.tableView
let tableView = UITableView.init(frame: CGRectZero, style: .Plain)
//3.存儲frameModel的數(shù)組
var frameArray = [FrameModel]()
//MARK: - 生命周期
override func viewDidLoad() {
super.viewDidLoad()
//1.設(shè)置frame
self.tableView.frame = self.view.bounds
//2.添加到界面上
self.view.addSubview(self.tableView)
//3.設(shè)置代理
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.設(shè)置每個分組cell的個數(shù)
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.dataArray.count
}
//2.創(chuàng)建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
}
//刷新數(shù)據(jù)
let model = self.dataArray[indexPath.row]
let frameModel = self.frameArray[indexPath.row]
cell?.model = model
cell?.frameModel = frameModel
return cell!
}
}
//MARK: - 獲取數(shù)據(jù)
extension ViewController{
func getData() -> [DataModel]{
var tempArray = [DataModel]()
//1.拿到plist文件的路徑
let path = NSBundle.mainBundle().pathForResource("statuses.plist", ofType: nil)
//2.獲取plist文件中的數(shù)組
let plistArray = NSArray.init(contentsOfFile: path!)
//3.遍歷數(shù)組赦政，拿到里面的字典
for item in plistArray! {
let dict = item as! NSDictionary
//將字典轉(zhuǎn)換成對應(yīng)的數(shù)據(jù)模型
let model = DataModel(dict: dict)
//根據(jù)數(shù)據(jù)模型創(chuàng)建frameModel
let frameModel = FrameModel(model: model)
//將數(shù)據(jù)模型存到數(shù)據(jù)源數(shù)組中
tempArray.append(model)
//將frameModel存到數(shù)組中
self.frameArray.append(frameModel)
}
return tempArray
}
}
DataModel
//數(shù)據(jù)模型類:專門負(fù)責(zé)數(shù)據(jù)的存儲和操作
class DataModel: NSObject {
//MARK: - 屬性
//1.文字
var text = ""
//2.頭像
var icon = ""
//3.用戶名
var name = ""
//4.是否是VIP
var vip = 0
//5.圖片(這個屬性可能沒有)
var picture:String? = nil
//MARK: - 構(gòu)造方法
//通過制定的字典創(chuàng)建模型
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
//數(shù)據(jù)模型類:專門負(fù)責(zé)數(shù)據(jù)的存儲和操作
class DataModel: NSObject {
//MARK: - 屬性
//1.文字
var text = ""
//2.頭像
var icon = ""
//3.用戶名
var name = ""
//4.是否是VIP
var vip = 0
//5.圖片(這個屬性可能沒有)
var picture:String? = nil
//MARK: - 構(gòu)造方法
//通過制定的字典創(chuàng)建模型
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.聲明所需要的所有的子視圖對應(yīng)的屬性
//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的模型賦值的時候去設(shè)置子視圖的屬性
//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中如果出現(xiàn)if語句粱甫，必須把對應(yīng)的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: - 構(gòu)造方法
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的方式創(chuàng)建cell的時候才會調(diào)用
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
//選中cell的時候會自動調(diào)用
override func setSelected(selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
