UIStackView in UITableViewCell with multiline UILabels

Question

I am trying to put a UIStackView that would contain custom views (each with an icon and a multiline label) into a UITableViewCell.

Here is what I tried:

CustomView.swift

enum Icon {
    case eye
    case location
    case paper
    case phone
    var image: UIImage {
        switch self {
        case .eye:
            return UIImage(named: "EyeIcon")!
        case .location:
            return UIImage(named: "PaperPlaneIcon")!
        case .paper:
            return UIImage(named: "PhoneIcon")!
        case .phone:
            return UIImage(named: "PinLocationIcon")!
        }
    }
}

class TestView: UIView {

    @IBOutlet var contentView: UIView!

    @IBOutlet weak var iconView: UIImageView!

    @IBOutlet weak var label: UILabel!

    var icon: Icon? {
        didSet {
            iconView.image = icon?.image
        }
    }

    var text: String? {
        didSet {
            label.text = text
        }
    }

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    private func commonInit() {
        Bundle.main.loadNibNamed("TestView", owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = self.bounds
        contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }

}

CustomView.xib

In my controller's cellForRow() method:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let fruit = fruits[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: "CellTest", for: indexPath) as! CellTest
        cell.colorView.backgroundColor = fruit.color
        cell.titleLabel.text = fruit.name
        cell.regionLabel.text = fruit.region
        if let eyeInfo = fruit.eyeInfo {
            let view = TestView()
            view.icon = .eye
            view.text = eyeInfo
            cell.stackView.addArrangedSubview(view)
        }
        if let locationInfo = fruit.locationInfo {
            let view = TestView()
            view.icon = .location
            view.text = locationInfo
            cell.stackView.addArrangedSubview(view)
        }
        if let paperInfo = fruit.paperInfo {
            let view = TestView()
            view.icon = .paper
            view.text = paperInfo
            cell.stackView.addArrangedSubview(view)
        }
        if let phoneInfo = fruit.phoneInfo {
            let view = TestView()
            view.icon = .phone
            view.text = phoneInfo
            cell.stackView.addArrangedSubview(view)
        }
        return cell
    }

The xib of the associated cell:

And here is the result:

If I replace Fill by Fill Equally/Proportionally:

I have no idea of how I can improve this and get it to work.

Thank you for your help!

DonMag · Accepted Answer

To get your desired layout, using cell prototype (note: I clipped the "icon" images out of your posted images, so they're very low-rez) ...

The "color" view, title label and region label are laid-out pretty standard.

Below that is a vertical Stack View. Alignment: Fill, Distribution: Fill, Spacing: 8. It is constrained a bit further in from the left, top is 12-pts from the color view bottom, and trailing is 0 (to margin). No height constraint. Bottom is constrained >= 8 from the bottom of the content view (makes it easy to avoid storyboard constraint warnings).

Each "row" in that vertical stack view is a horizontal stack view. Alignment: Top, Distribution: Fill, Spacing: 20 (that's the space between the icon image view and the left of the label).

The icon imageViews are constrained Width and Height both to 24-pts (I'm guessing at your sizing - adjust as needed).

The Label for the "Eye Stack" is set to Number Of Lines: 0 - which allows it to expand vertically.

The great thing about stack views is that if you set a subview to hidden, the stack view lays out the rest of its arranged subviews as if the hidden view is not there!

So, some code...

I defined a Fruit object as:

class Fruit: NSObject {

    var color: UIColor?
    var name: String?
    var region: String?
    var eyeInfo: String?
    var locationInfo: String?
    var paperInfo: String?
    var phoneInfo: String?

}

The tableview controller class is pretty simple:

class FruitTableViewController: UITableViewController {

    var fruits: [Fruit] = [Fruit]()

    override func viewDidLoad() {
        super.viewDidLoad()

        var aFruit: Fruit!

        // create a couple Fruit objects

        aFruit = Fruit()
        aFruit.color = .yellow
        aFruit.name = "Banana"
        aFruit.region = "Tropical"
        aFruit.eyeInfo = "A banana is an edible fruit - technically a berry - produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called \"plantains\", distinguishing them from dessert bananas."
        aFruit.locationInfo = "banana location"
        aFruit.paperInfo = "banana paper"
        aFruit.phoneInfo = "555-1212"

        fruits.append(aFruit)

        aFruit = Fruit()
        aFruit.color = .orange
        aFruit.name = "Orange"
        aFruit.region = "Somewhere"
        aFruit.eyeInfo = "The orange is the fruit of the citrus species Citrus × sinensis in the family Rutaceae. It is also called sweet orange, to distinguish it from the related Citrus × aurantium, referred to as bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations."
        aFruit.paperInfo = "orange paper"
        aFruit.phoneInfo = "555-1234"

        fruits.append(aFruit)

        aFruit = Fruit()
        aFruit.color = .red
        aFruit.name = "Strawberry"
        aFruit.region = "Somewhere else"
        aFruit.eyeInfo = "The garden strawberry (or simply strawberry; Fragaria × ananassa) is a widely grown hybrid species of the genus Fragaria, collectively known as the strawberries. It is cultivated worldwide for its fruit. The fruit is widely appreciated for its characteristic aroma, bright red color, juicy texture, and sweetness. It is consumed in large quantities, either fresh or in such prepared foods as preserves, juice, pies, ice creams, milkshakes, and chocolates. Artificial strawberry flavorings and aromas are also widely used in many products like lip gloss, candy, hand sanitizers, perfume, and many others."
        aFruit.paperInfo = "strawberry location"

        fruits.append(aFruit)

    }

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruits.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(withIdentifier: "FruitCell", for: indexPath) as! FruitCell

        let fruit = fruits[indexPath.row]

        // tell the cell to lay itself out using the Fruit object
        cell.setData(fruit)

        return cell

    }

}

Now, the tricky part (which really isn't very tricky) is inside the cell class:

class FruitCell: UITableViewCell {

    @IBOutlet var colorView: UIView!
    @IBOutlet var titleLabel: UILabel!
    @IBOutlet var regionLabel: UILabel!

    @IBOutlet var eyeStack: UIStackView!
    @IBOutlet var eyeLabel: UILabel!

    @IBOutlet var paperStack: UIStackView!
    @IBOutlet var paperLabel: UILabel!

    @IBOutlet var locationStack: UIStackView!
    @IBOutlet var locationLabel: UILabel!

    @IBOutlet var phoneStack: UIStackView!
    @IBOutlet var phoneLabel: UILabel!

    func setData(_ aFruit: Fruit) -> Void {

        colorView.backgroundColor = aFruit.color ?? .clear
        titleLabel.text = aFruit.name ?? "missing name"
        regionLabel.text = aFruit.region ?? "missing region"

        eyeLabel.text = aFruit.eyeInfo
        eyeStack.isHidden = aFruit.eyeInfo == nil

        paperLabel.text = aFruit.paperInfo
        paperStack.isHidden = aFruit.paperInfo == nil

        locationLabel.text = aFruit.locationInfo
        locationStack.isHidden = aFruit.locationInfo == nil

        phoneLabel.text = aFruit.phoneInfo
        phoneStack.isHidden = aFruit.phoneInfo == nil

    }

}

As you see, not a whole lot going on there. Fill in the fields, and hide any of the "rows" that do not have associated properties.

Result:

Here is the source to the Storyboard I used. Create a new Storyboard, use Open As... Source Code, and replace the entire content with the following. The only thing you'll need to change to get it to run as-is is to replace the icon images:

UIStackView in UITableViewCell with multiline UILabels

Answers (2)

Related Questions