Identifying and fixing auto layout issue from log output

Question

I'm preparing a multi device information focused iOS app almost exclusively in interface builder storyboard. I'm using table view controllers with text or other content into static table view cells.

In specific cells, I want a grid of text fields with the same height rows but various widths - depending on the length of the text field.

I'm using a vertical stack view that contains horizontal stack views, all with Alignment: Fill and Distribution: Fill Proportionally.

If I do not reduce the minimum font size, the grid does not appear at all on certain devices, but after a lot of fiddling, I can make the grid appear on the simulator across class sizes...

BUT, the log reveals "Unable to simultaneously satisfy constraints..."

"<NSLayoutConstraint:0x600002bde620 UITextField:0x7f92608dc200.width == 45   (active)>",
"<NSLayoutConstraint:0x600002bfe210 'fittingSizeHTarget' UIStackView:0x7f925f463d70.width == 0   (active)>",
"<NSLayoutConstraint:0x600002bd2cb0 'UISV-canvas-connection' UIStackView:0x7f925f463d70.leading == UITextField:0x7f92608dc200.leading   (active)>",
"<NSLayoutConstraint:0x600002bd2d00 'UISV-canvas-connection' H:[UITextField:0x7f926081b200]-(0)-|   (active, names: '|':UIStackView:0x7f925f463d70 )>",
"<NSLayoutConstraint:0x600002bd4be0 'UISV-spacing' H:[UITextField:0x7f92608dc200]-(0)-[UITextField:0x7f926081b200]   (active)>"

which I understand from https://www.wtfautolayout.com means:

TextField1's width should equal 45.

StackView's width should equal 0.

StackView's leading edge should equal TextField1's leading edge.‡

StackView's trailing edge should equal TextField2's trailing edge.‡

TextField2's leading edge should equal TextField1's trailing edge.‡

The latter three look familiar, but I did not install and cannot find the width constraints (which I guess are content based).

The log then reports that breaking the first constraint in the list above seems to be the solution, but another very similar log error follows with slightly different values - probably the next row in the grid.

My problem is in identifying exactly where this is happening, why it is happening, and how do I effectively fix it.

Answer 1

Following a comment, I have tried using UICollectionView to create a grid like table. Code below with reference to source. This is a lot of work compared to arranging static content and relying on auto layout, but if auto layout cannot deliver this layout then I have to accept this as the answer.

Even using this approach, I have a problem with the final row in the grid - Collection view grid last row appears differently despite equal widths - swift iOS . Nevertheless, if I can get the last row to align, and no one suggests that a grid is possible using constraints, then I will update and accept this answer to be correct.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    let settings = currentContents[indexPath.item]
    let height = CGFloat(30)

    // https://stackoverflow.com/questions/54915227/uicollectionview-remove-space-between-cells-with-7-items-per-row
    var cellWidth = CGFloat()
    let availableWidth = collectionView.bounds.size.width
    print("available width", availableWidth)
    let minimumWidth = floor(availableWidth / collectionContents.cellsPerRow5)
    // let remainder = availableWidth - minimumWidth * CGFloat(cellsPerRow4)
    print("minmum width", minimumWidth)
    cellWidth = minimumWidth * settings.portion - 1
    print("cell width", cellWidth)

    return CGSize(width: cellWidth, height: height)
}