使用 SWIFT 以编程方式自定义 UITableViewCell

Question

您可能会在附件中找到我尝试创建类似（右）UITableView 的图片（左）。它们看起来像按钮，但它们只是可以作为 tableview 单元格单击的单元格。

我尝试了很多不同的方法，包括在自定义单元格中添加容器 window，在自定义单元格中添加 UIImage，但我就是无法复制这些单元格！

我试过使用自定义单元格 class，我试过通过 IB 来做，但我太疯狂了，无法重新创建它。

谁能给我一些关于如何创建（单元格内）文本边界的提示 box/square？用不同的背景颜色照明？

如果这可以通过 IB 轻松完成，我宁愿这样做，但如果您有一个示例 customcell class 我可以看一下，我也将不胜感激！

感谢您抽出时间来看我的问题。

Answer 1

我认为你走的路是对的。我在一个项目中做了类似的事情。我创建了 UIView 的子类（也为视图添加了阴影）并在单元格中添加了这种类型的视图。

class ShadowedView: UIView {

override func awakeFromNib() {
    layer.shadowColor = UIColor(red: 157.0/255.0, green: 157.0/255.0, blue: 157.0/255.0, alpha: 0.5).CGColor
    layer.shadowOpacity = 0.8
    layer.shadowRadius = 5.0
    layer.shadowOffset = CGSizeMake(0.0, 2.0)
}
}

不要忘记为单元格内的视图添加一些约束。

Answer 2

您可以在 "Size insepector"

中安排您的 collection 视图布局

并在单元格中自定义您的图像。

Answer 3

我已经为您制作了接近您要求的样品。看一看 https://github.com/RajanMaheshwari/CustomTableCell

我想使用 UITableView 来做到这一点。我的方法是采用自定义单元格并添加一个 UIView，其中包含左右上下的一些约束。此外，我将为 UITableView、UIView（父视图和单元格内容视图）提供相同的背景颜色，并将 UITableView 的 separator 设置为 None并将 TableCell 选择为 None，这样 UI 看起来像

接下来在应用每个约束并制作 CustomCell 和制作 IBOutlets 之后，我们将跳转到代码。

我将在自定义单元格的 awakeFromNib 方法中完成所有阴影和轮廓

这将是我的 CustomTableViewCell class

class CustomTableViewCell: UITableViewCell {

@IBOutlet weak var labelBackgroundView: UIView!
@IBOutlet weak var cellLabel: UILabel!
override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code

    labelBackgroundView.layer.borderWidth = 0.5
    labelBackgroundView.layer.borderColor = UIColor.lightGrayColor().CGColor
    labelBackgroundView.layer.shadowColor = UIColor.lightGrayColor().CGColor
    labelBackgroundView.layer.shadowOpacity = 0.8
    labelBackgroundView.layer.shadowRadius = 5.0
    labelBackgroundView.layer.shadowOffset = CGSizeMake(0.0, 2.0)
    labelBackgroundView.layer.masksToBounds = false;
}

我有两个插座。

一个是您将在其中显示名称的标签。另一个是你想用一些轮廓和阴影显示的外部视图。

ViewController 代码将是：

class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

var array = [String]()

@IBOutlet weak var myTableView: UITableView!
override func viewDidLoad() {
    super.viewDidLoad()

    array = ["Wealth","Health","Esteem","Relationship"]

}


func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return array.count
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("CustomTableViewCell") as! CustomTableViewCell

    cell.cellLabel.text = array[indexPath.row]
    cell.labelBackgroundView.tag = indexPath.row
    cell.labelBackgroundView.userInteractionEnabled = true

    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(cellViewTapped))
    cell.labelBackgroundView.addGestureRecognizer(tapGesture)

    return cell
}


func cellViewTapped(sender:UITapGestureRecognizer) {

    let view = sender.view
    let index = view?.tag
    print(index!)
    }
}

这里我没有使用 didSelectIndex 或 UITableViewDelegate，因为我只想点击 Outlining LabelBackgroundView 而不是完整的单元格。

所以最后的结局是这样的

使用 SWIFT 以编程方式自定义 UITableViewCell

Custom UITableViewCell programmatically with SWIFT

xcode

interface-builder

swift

ios9