ios - iOS中的UITableView的自定义设计

我正在练习Swift编码，并且由于我是一名设计师，所以我想为我的应用程序进行自定义设计。列出应用程序很简单。它有2个视图。首先是TableView和我要做的项目，第二个视图是关于添加新项目。

我的单元格是圆形的，具有边框颜色。如何对单元格进行样式化？我碰到了很多tut，但是我没有找到答案。

我听说可以通过对原型单元进行样式化来完成，但是我真的不知道如何做。我到处都用Google搜索，但找不到任何内容可以解释我的问题。

这是我的设计:

你能指导我吗？

到目前为止，我的代码:

import UIKit

class FirstViewController: UIViewController, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    // Delete functionality
    func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        if editingStyle == UITableViewCellEditingStyle.Delete {
            listItems.removeAtIndex(indexPath.row)
        }
        tableView.reloadData()
    }

    // This function calculates how many rows our table has according to listItems array
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return listItems.count
    }

    // Data in cells
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "cell")
        cell.textLabel?.text = listItems[indexPath.row] as String
        cell.backgroundColor = UIColor.clearColor()
        cell.layer.borderWidth = 2.0
        cell.layer.borderColor = UIColor.whiteColor().CGColor
        cell.layer.cornerRadius = 15

        tableView.separatorColor = UIColor.clearColor()

        // self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 10, 0);
        return cell
    }

    override func viewDidAppear(animated: Bool) {
        // Refreshing our table
        tableView.reloadData()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        listItems = savedItems.arrayForKey("UserInputs") as! [NSString]
        tableView.reloadData()

    }

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


}
    enter code here

我已经将od背景色的所有选项都设置为蓝色，并且将色调设置为白色，并且在进行仿真时，单元格文本的字体为黑色。如果有人知道如何解决此问题，请让我现在。

最佳答案

要获得该结果，您必须将containingView放入自定义tableViewCell内，并为该containingView而不是单元格指定半径和白色。

从情节提要开始，然后添加containingView和label(我不知道您使用的是哪种字体):



我决定在tableView的顶部添加一个视图以获得该结果，但是我认为您也可以使用titleForHeaderInSection和willDisplayHeaderView来获得相同的结果。

您的ViewContollerScene应该如下所示:



但是您还必须确保将约束分配给containingView，否则将无法得到该结果:



然后确保您设置了identifier

以及您为单元格创建的customClass



这里的代码:

ToDoCustomTableViewCell

import UIKit
import QuartzCore

class ToDoCustomTableViewCell: UITableViewCell {

@IBOutlet weak var containingView: UIView!
@IBOutlet weak var customLabel: UILabel!

  override func awakeFromNib() {
    super.awakeFromNib()

    containingView.layer.borderWidth = 2
    containingView.layer.borderColor = UIColor.whiteColor().CGColor
    containingView.layer.cornerRadius = 20
    containingView.layer.masksToBounds = true

  }

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

    // Configure the view for the selected state
  }

}

和 ViewController

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

var listItems = ["item One" ,"item One","item One","item One","item One","item One" ]


@IBOutlet weak var tableView: UITableView!
// Delete functionality
func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
    if editingStyle == UITableViewCellEditingStyle.Delete {
        listItems.removeAtIndex(indexPath.row)
    }
    tableView.reloadData()
}

// This function calculates how many rows our table has according to listItems array
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return listItems.count
}

// Data in cells
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
     let cell = tableView.dequeueReusableCellWithIdentifier("customCell", forIndexPath: indexPath) as! ToDoCustomTableViewCell
     cell.customLabel.text = listItems[indexPath.row]




    return cell
}


override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

}

}

最终结果应该是这样。如果要更改containingViews之间的距离，只需减小与contentView之间的距离。请记住，您所看到的是containingViews的边界，而不是单元格的边界，这就是您必须摆脱单元格分隔符的原因。



最后，您可以在gitHub上找到该项目

关于ios - iOS中的UITableView的自定义设计，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34582299/