- 自定义tableview有很多种方式，这里介绍一种拖拽
Table View Controller加建立xib文件的方式完成自定义样式的方法，作为菜鸟，从新手的角度上内容尽量写的详细，话不多说先上两个效果图：
-
第一个是我自己做的一个字典app的生词本列表：
自定义tableview.PNG
-
第二个是我参考的文章作者自定的样式，一并放上来对比作参考：
709739-b7b1d1dc4512528c.png
- 定义tableview及其swift文件主要步骤
- 从Xcode中拖出
Table View Controller，如图：
屏幕快照 2018-04-05 下午10.15.07.png
- 在Xcode上方点击File->New->File,建立一个Cocoa Touch Class文件，填上你要定义的tableview的名字，并选择继承于
UITableViewController,如图：
new file.png
屏幕快照 2018-04-05 下午10.24.31.png
- 点击之前拖拽出来的
Table View Controller上方最左边的按钮，将你新建的Cocoa Touch Class文件填入Custom Class中的Class与之关联，如图(注: 图中的myTableViewController就是你刚才新建的Cocoa Touch Class文件的类名)：
关联.png
至此我们建立一个tableview的步骤就大致完成了，此时Xcode已经自动帮你生成了tableview相关的代码，大部分在注释中1，需要哪个功能删除/* */并修改代码即可：
屏幕快照 2018-04-05 下午10.29.01.png
- 建立xib文件步骤
- 建立一个tableviewCell样式的xib和对应的swift文件，如下图所示：
(注：此处直接拿网上的图，所以创建的文件名和我的不一样，图片上的是CustomTableViewCell而我实际创建的是NewCellTableViewCell,下面会用到,特此说明)
建立xib文件
- 建立完cell 文件之后我们就可以在
CustomTableViewcell.xib文件中来进行编写自定义的单元格了:
- 首先设置一下xib文件中table view cell中的content view背景为
Light Gray Color:
设置color
- 然后，在content view中铺一层
View,注意不要铺满整个content view，因为要实现开头效果的话，边缘要露出一点灰色(上面一个步骤已经将content view的背景设为Light Gray Color了) - 最后在view中铺上你要定义的样式，我的单词表(如图)加了几个标签，此外你还可以铺
Image View,Text View等等：
自定义Cell
- 在xib文件中对应的swift文件(上文创建xib文件时同时创建的swift文件
NewCellTableViewCell)加入添加的这些控件，下面是我文件中添加的这些控件代码：
//
// newCellTableViewCell.swift
// dicEg3
//
// Created by HJ on 2018/3/26.
// Copyright © 2018年 sherry. All rights reserved.
//
import UIKit
import CoreData
import Foundation
class newCellTableViewCell: UITableViewCell {
@IBOutlet weak var customView: UIView!
@IBOutlet weak var titleName: UILabel!
@IBOutlet weak var visitTime: UILabel!
@IBOutlet weak var searchTimes: UILabel!
@IBOutlet weak var detailImage: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
// 设置cell 圆角
customView.layer.masksToBounds = true
customView.layer.cornerRadius = 10
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
- 初始化函数
override func awakeFromNib()中的customView.layer.masksToBounds = true和customView.layer.cornerRadius = 10是将cell设置为圆角
定义完cell的xib文件后，就是要将它放入tableview中了，下面是步骤：
- 设置
myTableViewController.swift文件
- 在初始化文件
override func viewDidLoad()中加入加载cell代码：
self.tableView.register(UINib(nibName:"newCellTableViewCell", bundle:nil), forCellReuseIdentifier:"newCellTableViewCell")
- 然后开始将cell加载到tableview 中，其代码如下图所示(这一部分需要按照你自己的实际情况改，下面只是展示一下我大概的代码做个参考，一些无关主题的细节就不放了)：
// MARK: - Table view data source
//设置不同种类的单元格的样式有多少
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
//设置所需要的单元格的个数
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
switch section {
case 0:
return items.count
case 1:
return items.count
default:
return items.count
}
}
//在单元格中加载cell
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell : newCellTableViewCell = tableView.dequeueReusableCell(withIdentifier: "newCellTableViewCell") as! newCellTableViewCell
// cell?.textLabel?.numberOfLines = 0 // 根据内容显示高度
print(self.items)
self.mainViewModel.getSearchDate(infoName: items[indexPath.row], found: { (word) in
cell.titleName.text = self.items[indexPath.row]
cell.visitTime.text = word.date
cell.searchTimes.text = "查询次数:" + String(word.count)
print("cell中的内容\n" + cell.titleName.text! + "\n" + cell.visitTime.text!)
})
return cell
}
//设置单元格的大小
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 120
}
-
到这里，如果你成功跟着做出了你想要的tableview,你可能会发现下面这个问题：我们可以看到tableview的线条还存在，而且下面的显示还是白色的
(如图,图片直接选自参考文章的博主，他的图片看上去明显一点)：
bug图片
- 下面做一些设置让这些线条消失：将tableview中
separtor设置为none，和view中的background的颜色设置与cell中的背景颜色一样即可:
设置separtor
设置背景颜色
最后，贴一下参考文章的地址：自定义tableview样式
网友评论