基于模板创建自定义视图

问题描述 投票：0回答：1

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

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

我将如何去做？

这里是显示我的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()

    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) {
    let index = indexPath.row
    let data = dataArray[index]
    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)
    createDataInformation()
}

func createDataInformation() {
    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
    }
}

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()
}

}
ios swift xcode uiviewcontroller uistackview
1个回答
1
投票

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

StackView：

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
    }

}

StackView Result

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.