You can build a "grid" of labels using embedded UIStackViews
Use an "outer" horizontal stack view to hold 4 "inner" stack views, which are used as the 4 "columns".
Embed the outer stack view in a UIScrollView in case the content exceeds the available area.
The result looks like this:
The first two "column" stack views have .alignment = .leading and the 3rd and 4th have .alignment = .trailing. As you can see, each "column" stack view stretches its width to fit the widest label.
Here is some code to produce that example:
class StackGridViewController: UIViewController {
var myData = [[String]]()
override func viewDidLoad() {
super.viewDidLoad()
// init 30 rows of data
for i in 1...30 {
myData.append(["\(i)", "Product Name", "12 xx", "34 xx"])
}
// make a few of the rows different
for i in [2, 15, 21] {
// longer "column B"
myData[i][1] = "Longer Product Name"
// longer "column C"
myData[i+2][2] = "1234 xx"
// longer "column D"
myData[i+4][3] = "3456 xx"
}
// and one row with the longest values
// longest "column B"
myData[9][1] = "The Longest Product Name"
// longest "column C"
myData[9][2] = "123456 xx"
// longest "column D"
myData[9][3] = "345678 xx"
// create a horizontal stack view
let outerSV = UIStackView()
outerSV.translatesAutoresizingMaskIntoConstraints = false
outerSV.axis = .horizontal
outerSV.distribution = .fill
// "column" spacing
outerSV.spacing = 12
// add 4 "column" vertical stack views
for col in 0..<4 {
let columnSV = UIStackView()
columnSV.translatesAutoresizingMaskIntoConstraints = false
columnSV.axis = .vertical
// align leading for first two columns, trailing for 3rd and 4th
columnSV.alignment = col < 2 ? .leading : .trailing
columnSV.distribution = .fill
// "row" spacing
columnSV.spacing = 8
// add a label for each data "row"
for row in 0..<myData.count {
let v = UILabel()
v.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
v.font = UIFont.systemFont(ofSize: 13.0, weight: .light)
v.text = myData[row][col]
columnSV.addArrangedSubview(v)
}
// add the "column" stack view to the outer stack view
outerSV.addArrangedSubview(columnSV)
}
// create a scroll view
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
// constrain it to all four sides with 20-pt padding on top/bottom, 8-pt padding leading/trailing
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20.0),
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20.0),
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 8.0),
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -8.0),
])
// add the outer stack view to the scroll view
scrollView.addSubview(outerSV)
// constrain it to all four sides (which will also define .contentSize (the "scrollable area")
NSLayoutConstraint.activate([
outerSV.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0.0),
outerSV.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0.0),
outerSV.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0.0),
outerSV.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 0.0),
])
}
}
