ios - 制作多列的tableview

Question

我正在尝试创建这样的东西，其中每一行代表一个工作组，并包含重量和重复次数，用户可以通过按下按钮添加新行。但是我还没有想出如何在tableView中做到这一点。这是我希望它看起来像:

有什么建议/想法吗？

Answer 1

有多种方法可以做到这一点。这是我会怎么做。为了节省我很多时间，我将跳过一些步骤并假设您知道如何执行每个特定的设置步骤。

第 1 步:使用连接的 cocoa touch 类文件建立一个新的 ViewController。注意:您可以根据需要使用 TableView Controller第 2 步:将 tableView 拖入新 View Controller 并相应调整其大小(同时添加基本约束)

第 3 步:将新的 uiView 添加到您的 viewController 中，并将其命名为 header 并将其放置在页面顶部。注意:还有其他制作标题的方法，例如在 tableview 本身内部。但是我更喜欢这样做。

第 4 步:将您的表格 View 和标题作为代码的导出连接起来。第 5 步:在新的 cocoa touch swift 文件中创建一个新的自定义单元类。确保像这样设置委托(delegate)和数据源:

import UIKit

class myCustomCell: UITableViewCell {

}


class test: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var headerVIew: UIView!
    @IBOutlet weak var myTableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.myTableView.delegate = self
        self.myTableView.dataSource = self
        // Do any additional setup after loading the view.
    }


    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
    }
    */

}

注意:您也可以通过 CTRL 从您的 tableView 拖动到您的 VIEWCONTROLLER 以手动连接数据源和委托(delegate)。

第 6 步:通过添加标签并相应地调整它们的大小来创建标题 View 。如您所见，我有点匆忙，但它们并没有完全对齐。

第 7 步:使用属性检查器将单个原型(prototype)单元格添加到 TableView 。根据需要调整单元格大小。并向单元格添加 5 个标签，并将其与您已创建的标题的大小相匹配。注意:您需要对标签进行一些自定义，例如提供边框或添加其他图像以创建您想要的 BOX 样式。

请注意，我的标签没有完全对齐并且尺寸也没有完美。只是想节省一些时间。

第 8 步:这很棘手!您需要在您的层次结构和身份检查器中选择您的 UITableViewCell，将其自定义类设置为您在文件中命名的任何内容。在我的例子中，它是“myCustomCell” 一旦完成，您现在可以通过 CTRL 将每个对象拖到自定义类 TableViewCell 中来连接它们，如步骤 5 中所述。它应该看起来像这样，

import UIKit

class myCustomCell: UITableViewCell {

    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    @IBOutlet weak var label3: UILabel!
    @IBOutlet weak var label4: UILabel!
    @IBOutlet weak var label5: UILabel!

}


class test: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var headerVIew: UIView!
    @IBOutlet weak var myTableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.myTableView.delegate = self
        self.myTableView.dataSource = self
        // Do any additional setup after loading the view.
    }

最后需要在里面添加协议(protocol)函数。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    //set up here
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //set up here
}

这应该是开始创建此自定义电子表格(如 View )所需的全部内容。大多数外观和感觉都将通过标签和/或 UI 图像进行更多设计和正确设置。不像我那样匆忙。

希望对你有帮助