带StackView的自定义UITableViewCell：行高计算与左距问题

Hey there! Let's break down how to fix your two problems step by step:

1. How to Calculate UITableView Row Height for Dynamic Content #

Since each student has a variable number of course enrollments, you'll want to use auto-dynamic row heights so UITableView automatically calculates the correct height based on the cell's content. Here's how to set it up:

Step 1: Enable Automatic Row Height #

Add these lines in your viewDidLoad() (or wherever you configure your UITableView):

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 120 // Set a reasonable estimated value based on your typical cell size

The estimated height helps with initial scrolling performance—feel free to adjust it to match your cell's default appearance.

Step 2: Ensure Complete AutoLayout Constraints in Your Custom Cell #

Your custom cell needs a full set of constraints that define its height from top to bottom:

• Make sure your student name label has constraints to the cell's contentView top, leading, and trailing edges.
• The vertical StackView (where you add all enrollment horizontal StackViews) should have:
  • A top constraint to the bottom of the name label (with spacing like 8pt)
  • Leading and trailing constraints to the contentView edges (or your desired padding)
  • A bottom constraint to the contentView bottom edge (with spacing)
• Each dynamically added enrollment StackView will be handled by the parent vertical StackView, so no extra height constraints are needed for individual enrollment views.

Step 3: Verify ContentView Constraints #

Double-check that your cell's contentView is properly constrained to the cell itself. Xcode usually handles this by default, but if you run into issues, add constraints for contentView.top == cell.top, contentView.bottom == cell.bottom, contentView.leading == cell.leading, and contentView.trailing == cell.trailing.

2. Why Does the Dynamically Added Sub-StackView Have a Left Margin? #

Looking at your createEnrollemtStackView code, there are two key issues causing the unwanted left margin:

Issue 1: Manual Constraint Conflicts with StackView's Auto-Layout #

When you add a view to a StackView using addArrangedSubview, the StackView automatically creates layout constraints for that view. But in your code, you're manually adding leading/trailing/top/bottom constraints to enrollmentSV and statusSV relative to stackViewHorizontal:

// These lines are unnecessary and cause layout conflicts!
enrollmentSV.leadingAnchor.constraint(equalTo: stackViewHorizontal.leadingAnchor,constant:0)
enrollmentSV.trailingAnchor.constraint(equalTo: stackViewHorizontal.trailingAnchor,constant:0)
// ... same for statusSV

Fix: Delete all these manual constraints for enrollmentSV and statusSV. The StackView will handle their positioning based on the axis, distribution, and alignment properties you've set.

Issue 2: StackView's Layout Margin Settings #

StackViews have default layoutMargins, and if isLayoutMarginsRelativeArrangement is set to true, the StackView will apply these margins to its arranged subviews.

Fix: Add these lines to your StackView setups to disable margin-based arrangement (or adjust margins if you want intentional padding):

stackViewHorizontal.isLayoutMarginsRelativeArrangement = false
stackViewHorizontal.layoutMargins = .zero

enrollmentSV.isLayoutMarginsRelativeArrangement = false
enrollmentSV.layoutMargins = .zero

statusSV.isLayoutMarginsRelativeArrangement = false
statusSV.layoutMargins = .zero

Cleaned-Up createEnrollemtStackView Code #

Here's the revised function with fixes and safer optional handling:

func createEnrollemtStackView(_ mEnrollment: EnrollmentServiceModel) -> UIStackView {
    var enrolledIn = "Not enrolled"
    
    if let gradeModel = mEnrollment.GradeServiceModel, 
       let gradeName = gradeModel.Name, 
       !gradeName.isEmpty {
        let gradeSectionName = mEnrollment.GradeSectionName ?? ""
        let batchName = mEnrollment.BatchServiceModel?.Name ?? ""
        enrolledIn = "\(gradeName) - \(gradeSectionName) (\(batchName))"
    } else {
        let batchName = mEnrollment.BatchServiceModel?.Name ?? ""
        let className = mEnrollment.ClassServiceModel?.Name ?? ""
        enrolledIn = "\(batchName) (\(className)) school"
    }
    
    // Enrollment Label Stack
    let lblEnrolledIn = UILabel()
    lblEnrolledIn.text = "Enrolled in"
    lblEnrolledIn.textColor = UIColor(hex:"F48024")
    lblEnrolledIn.font = UIFont.boldSystemFont(ofSize: 10.0)
    
    let tvEnrolledIn = UILabel()
    tvEnrolledIn.text = enrolledIn
    tvEnrolledIn.font = UIFont.systemFont(ofSize: 13)
    tvEnrolledIn.backgroundColor = .green
    
    let enrollmentSV = UIStackView(arrangedSubviews: [lblEnrolledIn, tvEnrolledIn])
    enrollmentSV.axis = .vertical
    enrollmentSV.distribution = .fillEqually
    enrollmentSV.alignment = .leading
    enrollmentSV.spacing = 3
    enrollmentSV.backgroundColor = .brown
    enrollmentSV.isLayoutMarginsRelativeArrangement = false
    enrollmentSV.layoutMargins = .zero
    
    // Status Label Stack
    let lblEnrolledStatus = UILabel()
    lblEnrolledStatus.text = "Enrolled Status"
    lblEnrolledStatus.textColor = UIColor(hex:"F48024")
    lblEnrolledStatus.font = UIFont.boldSystemFont(ofSize: 10.0)
    
    let tvEnrolledStatus = UILabel()
    tvEnrolledStatus.text = mEnrollment.EnrollmentStaus ?? ""
    tvEnrolledStatus.font = UIFont.systemFont(ofSize: 13)
    
    let statusSV = UIStackView(arrangedSubviews: [lblEnrolledStatus, tvEnrolledStatus])
    statusSV.axis = .vertical
    statusSV.distribution = .fillEqually
    statusSV.alignment = .leading
    statusSV.spacing = 3
    statusSV.backgroundColor = .blue
    statusSV.isLayoutMarginsRelativeArrangement = false
    statusSV.layoutMargins = .zero
    
    // Horizontal Parent Stack
    let stackViewHorizontal = UIStackView(arrangedSubviews: [enrollmentSV, statusSV])
    stackViewHorizontal.axis = .horizontal
    stackViewHorizontal.distribution = .fillEqually
    stackViewHorizontal.alignment = .leading
    stackViewHorizontal.spacing = 5
    stackViewHorizontal.isLayoutMarginsRelativeArrangement = false
    stackViewHorizontal.layoutMargins = .zero
    
    return stackViewHorizontal
}

内容的提问来源于stack exchange，提问作者Android teem