博客

tableView的数据样式主要由tableViewCell来控制,所以我们通过重新定制tableViewCell的样式来达到我们想要的效果!

1.创建自定义tableViewCell(tableViewCell.swift)

import UIKit

class GoodsTableViewCell: UITableViewCell {
    
    //定义使用到的变量
    var photo: UIImageView?
    var titleLabel:UILabel?
    var desLabel:UILabel?
    var priceLabel:UILabel?
    var timeLabel:UILabel?

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
   
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        self.cellView()
    }
    
    //设置TableCell样式
    func cellView(){
        titleLabel = UILabel(frame: CGRect(x: 130, y: 5, width: 300, height: 30))
        self.addSubview(titleLabel!)
        
        desLabel = UILabel(frame: CGRect(x: 130, y: 40, width: 300, height: 30))
        self.addSubview(desLabel!)
        
        priceLabel = UILabel(frame: CGRect(x: 130, y: 80, width: 100, height: 30))
        self.addSubview(priceLabel!)
        
        timeLabel = UILabel(frame: CGRect(x: 300, y: 80, width: 100, height: 30))
        self.addSubview(timeLabel!)
        
        photo = UIImageView(frame:CGRect(x: 20, y: 5, width: 100, height: 100))
        self.addSubview(photo!)
    }
    
    //设置TableCell数据
    func setValueForCell(cellData:Dictionary<String,Any>){
        self.titleLabel?.text = cellData["name"] as! String?
        self.titleLabel?.textColor = UIColor.blue
        
        self.desLabel?.text = cellData["desc"] as! String?
        
        self.priceLabel?.text = cellData["price"] as! String?
        self.priceLabel?.textColor = UIColor.red
        
        self.timeLabel?.text = cellData["time"] as! String?
        
        self.photo?.image = UIImage(named:cellData["image"] as! String!)
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

2.将表格添加到当前视图中(viewController.swift)

import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource{

    //数据源
    let goodsItem = [
            ["name":"茶杯犬","desc":"茶杯犬详情描述","price":"1500.00","image":"image1","time":"2018/08/01"],
            ["name":"折耳猫","desc":"折耳猫详情描述","price":"2000.00","image":"image2","time":"2018/08/02"],
            ["name":"兔子","desc":"折耳猫详情描述","price":"2500.00","image":"image3","time":"2018/08/05"],
            ["name":"龙猫","desc":"龙猫详情描述","price":"2500.00","image":"image3","time":"2018/08/10"],
            ["name":"仓鼠","desc":"仓鼠详情描述","price":"2500.00","image":"image3","time":"2018/08/11"],
            ["name":"鹦鹉","desc":"鹦鹉详情描述","price":"2500.00","image":"image4","time":"2018/08/12"]
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //添加tableView
        let tableView = UITableView(frame: self.view.bounds, style: .plain)
        self.view.addSubview(tableView)
        
        //注册GoodsTableViewCell类
        tableView.register(NSClassFromString("GoodsTableViewCell"), forCellReuseIdentifier:
            "goodsCell")
        
        //设置tableView数据与代理
        tableView.delegate = self
        tableView.dataSource = self
        // Do any additional setup after loading the view, typically from a nib.
    }

    //设置行数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return goodsItem.count
    }
    
    //返回新的TableCell样式
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //实例化新样式
        let cell = GoodsTableViewCell(style: .default, reuseIdentifier: "goodsCell")
        
        //设置数据
        cell.setValueForCell(cellData: goodsItem[indexPath.row])
        return cell
    }
    
    //设置行高
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120.00
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
        // Dispose of any resources that can be recreated.
    }

}

3.文件目录结构

4.最终效果