基于模板创建自定义视图

Question

现在我创建了一个 UIStackView，其中填充了不同的通用标签和图像。当用户从我的 tableView 中选择一行时，会显示此 UIStackView。我想拥有它，以便可以根据在我的 tableView 中选择的行来更改 UIStackView。

示例：用户选择第 1 部分的第 1 行，并被带到一个屏幕，该屏幕显示了我的 UIStackView 中 tableview 的行所独有的信息。

我该怎么做呢？

这是显示我的 tableView 的代码。

import UIKit

struct Data {
   var sectionTitle = String()
   var rowTitles = [String]()
}

class ViewController: UIViewController {

@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tableView: UITableView!

var dataArray = [Data(sectionTitle: "section 1", rowTitles: ["row 1", "row 2", "row 3"]),
    Data(sectionTitle: "section 2", rowTitles: ["row 1"]),
    Data(sectionTitle: "section 3", rowTitles: ["row 1", "row 2"])
]
var searchArray = [Data]()
var searching = false

override func viewDidLoad() {
    super.viewDidLoad()

    let labelValueImages: LabelValueImagePairs = [
    (image: image, label: "row 1", value: "This is data."),
    (image: image, label: "row 2", value: "This is data.")
]

    let myStackView = MyStackView(labelsAndValues: labelValueImages)
    view.addSubview(myStackView)
    myStackView.translatesAutoresizingMaskIntoConstraints = false
    myStackView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
    myStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    }


    tableView.delegate = self
    tableView.dataSource = self
}

}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if searching {
        return searchArray[section].rowTitles.count
    } else {
        return dataArray[section].rowTitles.count
    }
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "searchCell")
    cell?.textLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping
    cell?.textLabel?.numberOfLines = 3
    if searching {
        cell?.textLabel?.text = self.searchArray[indexPath.section].rowTitles[indexPath.row]
    } else {
        cell?.textLabel?.text = self.dataArray[indexPath.section].rowTitles[indexPath.row]
    }
    return cell!
}
func numberOfSections(in tableView: UITableView) -> Int {
    if searching {
        return searchArray.count
    } else {
        return dataArray.count
    }
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return dataArray[section].sectionTitle
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    var data: Data?
if searching {
    data = self.searchArray[indexPath.section].rowTitles[indexPath.row]
} else {
    data = self.dataArray[indexPath.section].rowTitles[indexPath.row]
}
    let destVC = SecondViewController(data: data)
    navigationController?.pushViewController(destVC, animated: true)
}

}

extension ViewController: UISearchBarDelegate {
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    if searchBar.text == nil || searchBar.text == "" {
        searching = false
        view.endEditing(true)
        tableView.reloadData()
    } else {
        searching = true
        searchArray = dataArray.filter({$0.sectionTitle.lowercased().contains(searchBar.text!.lowercased()) || $0.rowTitles.map{$0.lowercased()}.contains(searchBar.text!.lowercased())})
        tableView.reloadData()
    }
}
}

这是新 viewController 和 UIStackView 的代码。

import UIKit

class SecondViewController: UIViewController {

var data: Data!
var dataView: DataView { return self.view as! DataView}

init(data: Data) {
    self.data = data
    super.init(nibName: nil, bundle: nil)
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func viewDidLoad() {
    super.viewDidLoad()

}

override func loadView() {
    self.view = MyStackView(frame: UIScreen.main.bounds)
    }


typealias LabelValueImagePairs = [(image: UIImage?, label: String, value: String?]

class MyStackView: UIStackView {

var labelsAndValues: LabelValueImagePairs?
func setupViews() {

    distribution = .fill
    alignment = .fill
    axis = .vertical

    labelsAndValues?.forEach({ (labelValuePair) in

        let labelLabel = UILabel()
        labelLabel.translatesAutoresizingMaskIntoConstraints = false
        labelLabel.font = UIFont.systemFont(ofSize: 18, weight: .semibold)
        labelLabel.textAlignment = .center
        labelLabel.text = labelValuePair.label
        labelLabel.heightAnchor.constraint(equalToConstant: 35).isActive = true
        addArrangedSubview(labelLabel)

        if let value = labelValuePair.value {
            let valueLabel = UILabel()
            valueLabel.translatesAutoresizingMaskIntoConstraints = false
            valueLabel.font = UIFont.systemFont(ofSize: 16, weight: .light)
            valueLabel.textAlignment = .center
            valueLabel.text = value
            valueLabel.numberOfLines = 0
            valueLabel.heightAnchor.constraint(equalToConstant: 35).isActive = true
            addArrangedSubview(valueLabel)
        }

        if let image = labelValuePair.image {
            let imageView = UIImageView(image: image)
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.contentMode = .scaleAspectFit
            imageView.heightAnchor.constraint(equalToConstant: image.size.height).isActive = true
            addArrangedSubview(imageView)
        }

        let spacer = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 0, height: 25)))
        addArrangedSubview(spacer)

    })

}

convenience init(labelsAndValues: LabelValueImagePairs) {
    self.init()
    self.labelsAndValues = labelsAndValues
    setupViews()
}

override init(frame: CGRect) {
    super.init(frame: frame)
    setupViews()
}

required init(coder: NSCoder) {
    super.init(coder: coder)
    setupViews()
}

}

Answer 1

这是一个相当基本的动态垂直UIStackView 示例。堆栈视图接受一个元组数组，每个元组都有一个标签、可选值和可选图像。堆栈视图将从传入的数组创建适当的视图并将它们添加为排列的子视图。此示例仅在控制器的viewDidLoad 中显示堆栈视图，但它可以放置在您能够显示视图的任何位置。有任何问题，请告诉我。

堆栈视图：

typealias LabelValueImagePairs = [(label:String, value: String?, image: UIImage?)]

class MyStackView: UIStackView {

    var labelsAndValues: LabelValueImagePairs?
    func setupViews() {

        distribution = .fill
        alignment = .fill
        axis = .vertical

        labelsAndValues?.forEach({ (labelValuePair) in

            let labelLabel = UILabel()
            labelLabel.translatesAutoresizingMaskIntoConstraints = false
            labelLabel.font = UIFont.systemFont(ofSize: 18, weight: .semibold)
            labelLabel.textAlignment = .center
            labelLabel.text = labelValuePair.label
            labelLabel.heightAnchor.constraint(equalToConstant: 35).isActive = true
            addArrangedSubview(labelLabel)

            if let value = labelValuePair.value {
                let valueLabel = UILabel()
                valueLabel.translatesAutoresizingMaskIntoConstraints = false
                valueLabel.font = UIFont.systemFont(ofSize: 16, weight: .light)
                valueLabel.textAlignment = .center
                valueLabel.text = value
                valueLabel.numberOfLines = 0
                valueLabel.heightAnchor.constraint(equalToConstant: 35).isActive = true
                addArrangedSubview(valueLabel)
            }

            if let image = labelValuePair.image {
                let imageView = UIImageView(image: image)
                imageView.translatesAutoresizingMaskIntoConstraints = false
                imageView.contentMode = .scaleAspectFit
                imageView.heightAnchor.constraint(equalToConstant: image.size.height).isActive = true
                addArrangedSubview(imageView)
            }

            let spacer = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 0, height: 25)))
            addArrangedSubview(spacer)

        })

    }

    convenience init(labelsAndValues: LabelValueImagePairs) {
        self.init()
        self.labelsAndValues = labelsAndValues
        setupViews()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }

    required init(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
    }

}

用法：

class ViewController: UIViewController {

    override func viewDidLoad() {
        let labelValueImages: LabelValueImagePairs = [
            (label: "First Name:", value: "John", image: nil),
            (label: "Last Name:", value: "Doe", image: nil),
            (label: "Age:", value: "25", image: nil),
            (label: "Avatar:", value: nil, image: UIImage(systemName: "person.crop.circle", withConfiguration: UIImage.SymbolConfiguration(scale: .large)))
        ]

        let myStackView = MyStackView(labelsAndValues: labelValueImages)
        view.addSubview(myStackView)
        myStackView.translatesAutoresizingMaskIntoConstraints = false
        myStackView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
        myStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    }

}

编辑：

关于如何在didSelect 行中获取正确数据的其他问题。您需要使用section 和row 属性为给定的IndexPath 获取Data 对象，方法与在cellForRowAt 中的操作相同。

var data: Data?

if searching {
    data = self.searchArray[indexPath.section].rowTitles[indexPath.row]
} else {
    data = self.dataArray[indexPath.section].rowTitles[indexPath.row]
}