UIScrollView 内的动态 UITableView

Question

我在 UIScrollView 中实现动态 UITableView 时遇到问题，如果没有对 UITableView 设置固定高度约束，它就会消失，我不想为其设置固定高度，因为它正在接收来自 API 的数据，并且我不知道他们的人数。我想要实现的是 UITableView 的高度应该是动态的，而不是 UITableViewCell。

这是我的代码：

食谱详细信息视图：

class RecipesDetailsView: UIView {

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

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

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == self.scrollView {
            ingredientsTableView.isScrollEnabled = (self.scrollView.contentOffset.y >= 200)
        }

        if scrollView == self.ingredientsTableView {
            self.ingredientsTableView.isScrollEnabled = (ingredientsTableView.contentOffset.y > 0)
        }
    }

    lazy var scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.backgroundColor = .customVeryLightGray()
        scrollView.showsVerticalScrollIndicator = false
        scrollView.alwaysBounceVertical = false
//        scrollView.bounces = false
        return scrollView
    }()

    lazy var containerView: UIView = {
        let containerView = UIView()
        containerView.backgroundColor = .clear
        containerView.translatesAutoresizingMaskIntoConstraints = false
        return containerView
    }()

    lazy var recipeTitleLabel: UILabel = {
        let recipeTitleLabel = UILabel()
        recipeTitleLabel.translatesAutoresizingMaskIntoConstraints = false
        recipeTitleLabel.text = "Myanmar Traditional Fish Curry"
        recipeTitleLabel.font = UIFont(name: "AvenirNext-DemiBold", size: 25)
        recipeTitleLabel.textColor = .customDarkGray()
        recipeTitleLabel.numberOfLines = 0
        recipeTitleLabel.textAlignment = .left
        return recipeTitleLabel
    }()

    lazy var recipeImage: UIImageView = {
        let recipeImage = UIImageView()
        recipeImage.contentMode = .scaleToFill
        recipeImage.clipsToBounds = true
        recipeImage.image = UIImage(named: "pizza")
        recipeImage.layer.cornerRadius = 8.0
        recipeImage.layer.masksToBounds = true
        recipeImage.translatesAutoresizingMaskIntoConstraints = false
        return recipeImage
    }()

    lazy var instructionLabel: UILabel = {
        let instructionLabel = UILabel()
        instructionLabel.text = "Instructions"
        instructionLabel.font = UIFont(name: "AvenirNext-DemiBold", size: 16)
        instructionLabel.textColor = .customDarkGray()
        instructionLabel.textAlignment = .left
        instructionLabel.translatesAutoresizingMaskIntoConstraints = false
        return instructionLabel
    }()

    lazy var instructionsTextView: UITextView = {
        let instructionsTextView = UITextView()
        instructionsTextView.text = "Myanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmarMyanmar Traditional Fish CurryMyanmar Traditional Fish CurryMyanmar"
        instructionsTextView.textColor = .customLightDarkGray()
        instructionsTextView.font = UIFont(name: "AvenirNext-Regular", size: 14)
        instructionsTextView.textAlignment = .left
        instructionsTextView.isEditable = false
        instructionsTextView.isScrollEnabled = false
        instructionsTextView.translatesAutoresizingMaskIntoConstraints = false
        return instructionsTextView
    }()

    lazy var ingredientsLabel: UILabel = {
        let ingredientsLabel = UILabel()
        ingredientsLabel.text = "Ingredients"
        ingredientsLabel.font = UIFont(name: "AvenirNext-DemiBold", size: 16)
        ingredientsLabel.textColor = .customDarkGray()
        ingredientsLabel.textAlignment = .left
        ingredientsLabel.translatesAutoresizingMaskIntoConstraints = false
        return ingredientsLabel
    }()

    lazy var buyingIngredientsButton: UIButton = {
        let buyingIngredientsButton = UIButton(type: .system)
        buyingIngredientsButton.translatesAutoresizingMaskIntoConstraints = false
        buyingIngredientsButton.setTitle("Start buying", for: .normal)
        buyingIngredientsButton.setTitleColor(.CustomGreen(), for: .normal)
        buyingIngredientsButton.titleLabel?.font = UIFont(name: "AvenirNext-DemiBold", size: 12)
        return buyingIngredientsButton
    }()

    lazy var numberOfGredientsLabel: UILabel = {
        let numberOfGredientsLabel = UILabel()
        numberOfGredientsLabel.text = "Ingredients"
        numberOfGredientsLabel.font = UIFont(name: "AvenirNext-Regular", size: 14)
        numberOfGredientsLabel.textColor = .customDarkGray()
        numberOfGredientsLabel.textAlignment = .left
        numberOfGredientsLabel.translatesAutoresizingMaskIntoConstraints = false
        return numberOfGredientsLabel
    }()

    lazy var ingredientsTableView: UITableView = {
        let ingredientsTableView = UITableView()
        ingredientsTableView.translatesAutoresizingMaskIntoConstraints = false
        ingredientsTableView.delegate = self
        ingredientsTableView.dataSource = self
        ingredientsTableView.rowHeight = UITableView.automaticDimension
        ingredientsTableView.estimatedRowHeight = 100
        ingredientsTableView.estimatedRowHeight = 0
        ingredientsTableView.estimatedSectionHeaderHeight = 0
        ingredientsTableView.estimatedSectionFooterHeight = 0
        ingredientsTableView.showsVerticalScrollIndicator = false
        ingredientsTableView.separatorStyle = .none
        ingredientsTableView.backgroundColor = .white
        ingredientsTableView.bounces = true
        ingredientsTableView.isScrollEnabled = false
        ingredientsTableView.register(IngredientsTableViewCell.self, forCellReuseIdentifier: "IngredientsTableViewCell")
        ingredientsTableView.frame.size.height = ingredientsTableView.contentSize.height
        return ingredientsTableView
    }()

    func setupScrollViewConstraints() {
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }

    func setupContainerViewConstraints() {
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 1)
        ])
    }

    func setupRecipeTitleLabelConstraints() {
        NSLayoutConstraint.activate([
            recipeTitleLabel.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 16),
            recipeTitleLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
            recipeTitleLabel.trailingAnchor.constraint(lessThanOrEqualTo: containerView.trailingAnchor, constant: -16)
        ])
        recipeTitleLabel.setContentHuggingPriority(.init(240.0), for: .horizontal)
        recipeTitleLabel.setContentCompressionResistancePriority(.init(740.0), for: .horizontal)
    }

    func setupRecipeImageConstraints() {
        NSLayoutConstraint.activate([
            recipeImage.topAnchor.constraint(equalTo: recipeTitleLabel.bottomAnchor, constant: 16),
            recipeImage.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
            recipeImage.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16),
            recipeImage.heightAnchor.constraint(equalToConstant: frame.height / 4)
        ])
    }

    func setupInstructionsLabelConstraints() {
        NSLayoutConstraint.activate([
            instructionLabel.topAnchor.constraint(equalTo: recipeImage.bottomAnchor, constant: 16),
            instructionLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
            instructionLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16)
        ])
    }

    func setupInstructionsTextViewConstraints() {
        NSLayoutConstraint.activate([
            instructionsTextView.topAnchor.constraint(equalTo: instructionLabel.bottomAnchor, constant: 8),
            instructionsTextView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
            instructionsTextView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16)
        ])
    }

    func setupIngredientsLabelConstraints() {
        NSLayoutConstraint.activate([
            ingredientsLabel.topAnchor.constraint(equalTo: instructionsTextView.bottomAnchor, constant: 16),
            ingredientsLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
        ])
    }

    func setupBuyingIngredientsButtonConstraints() {
        NSLayoutConstraint.activate([
            buyingIngredientsButton.centerYAnchor.constraint(equalTo: ingredientsLabel.centerYAnchor),
            buyingIngredientsButton.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16)
        ])
    }

    func setupNumberOfIngredientsLabelConstraints() {
        NSLayoutConstraint.activate([
            numberOfGredientsLabel.topAnchor.constraint(equalTo: ingredientsLabel.bottomAnchor, constant: 8),
            numberOfGredientsLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),

        ])
    }

    func setupIngredientsTableViewConstraints() {
        NSLayoutConstraint.activate([
            ingredientsTableView.topAnchor.constraint(equalTo: numberOfGredientsLabel.bottomAnchor, constant: 8),
            ingredientsTableView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
            ingredientsTableView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16),
            ingredientsTableView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -16),
//            ingredientsTableView.heightAnchor.constraint(equalTo: ingredientsTableView.heightAnchor)
        ])
    }

    func addSubViews() {
        addSubview(scrollView)
        scrollView.addSubview(containerView)
        containerView.addSubview(recipeTitleLabel)
        containerView.addSubview(recipeImage)
        containerView.addSubview(instructionLabel)
        containerView.addSubview(instructionsTextView)
        containerView.addSubview(ingredientsLabel)
        containerView.addSubview(buyingIngredientsButton)
        containerView.addSubview(numberOfGredientsLabel)
        containerView.addSubview(ingredientsTableView)
    }

    func layoutUI() {
        addSubViews()
        setupScrollViewConstraints()
        setupContainerViewConstraints()
        setupRecipeTitleLabelConstraints()
        setupRecipeImageConstraints()
        setupInstructionsLabelConstraints()
        setupInstructionsTextViewConstraints()
        setupIngredientsLabelConstraints()
        setupBuyingIngredientsButtonConstraints()
        setupNumberOfIngredientsLabelConstraints()
        setupIngredientsTableViewConstraints()
    }
}

extension RecipesDetailsView: UITableViewDelegate, UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "IngredientsTableViewCell", for: indexPath) as! IngredientsTableViewCell
        cell.theNumberOfIngredient.text = "1"
        cell.theNameOfIngredient.text = "Tomato"
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension

    }

}

IngredientsTableViewCell:

class IngredientsTableViewCell: UITableViewCell {

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        layoutUI()
//        selectionStyle = .none
//        self.backgroundColor = .white

    }

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

    lazy var theNumberOfIngredient: UILabel = {
        let theNumberOfIngredient = UILabel()
        theNumberOfIngredient.text = "Ingredients"
        theNumberOfIngredient.font = UIFont(name: "AvenirNext-DemiBold", size: 16)
        theNumberOfIngredient.textColor = .customDarkGray()
        theNumberOfIngredient.textAlignment = .left
        theNumberOfIngredient.translatesAutoresizingMaskIntoConstraints = false
        return theNumberOfIngredient
    }()

    lazy var theNameOfIngredient: UILabel = {
        let theNameOfIngredient = UILabel()
        theNameOfIngredient.text = "Ingredients"
        theNameOfIngredient.font = UIFont(name: "AvenirNext-DemiBold", size: 16)
        theNameOfIngredient.textColor = .customDarkGray()
        theNameOfIngredient.textAlignment = .left
        theNameOfIngredient.translatesAutoresizingMaskIntoConstraints = false
        return theNameOfIngredient
    }()

    func setupTheNumberOfIngredientConstraints() {
        NSLayoutConstraint.activate([
            theNumberOfIngredient.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0),
            theNumberOfIngredient.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }

    func setupTheNameOfIngredientConstraints() {
        NSLayoutConstraint.activate([
            theNameOfIngredient.leadingAnchor.constraint(equalTo: theNumberOfIngredient.leadingAnchor, constant: 16),
            theNameOfIngredient.centerYAnchor.constraint(equalTo: theNumberOfIngredient.centerYAnchor)
        ])
    }

    func addSubviews() {
        addSubview(theNumberOfIngredient)
        addSubview(theNameOfIngredient)
    }

    func layoutUI() {
        addSubviews()
        setupTheNumberOfIngredientConstraints()
        setupTheNameOfIngredientConstraints()
    }

}

Answer 1

首先，这是错误的方法，我认为您应该创建具有分组样式的 UITableView 并在 the section 0 中添加您的自定义 UI 和 the section 1 应用 IngredientsTableViewCell 与来自 API.

的数据

否则，您可以通过数学方式为 UITableView 设置静态高度。

UIScrollView 内的动态 UITableView

Dynamic UITableView inside UIScrollView

uitableview

uiscrollview

ios

swift