Repeat a label in TableViewCell

Question

Please find the below screenshot.

I need the solution to be working in iOS 8 too. Stack View is not helpful in iOS 8

I have been assigned this mock up... I don't exactly know how to repeat a particular label in the tableViewCell. As you can see I need to repeat the violet label and white labels depending on the items in JSON data..

Answer 1

You can use a combination of horizontal and vertical stack views to achieve this:

This solution allows you to avoid two pitfalls with the other approaches suggested above:

• You don't have to mess with toggling views' hidden property
• You aren't limited to a fixed maximum number of items

Here's the code:

import UIKit

class Order {
    var stations = [Station]()
    var companies = [String]()
}
class Station {
    let name: String
    let amount: Int
    init(name: String, amount: Int) {
        self.name = name
        self.amount = amount
    }
}

class TableViewController: UITableViewController {

    var orders = [Order]()

    override func viewDidLoad() {
    super.viewDidLoad()

    tableView!.rowHeight = UITableViewAutomaticDimension
    tableView!.estimatedRowHeight = 44.0

    //simulated data
    let order1 = Order()
    order1.companies.append("Global @ CITGO Braintree, Braintree")
    order1.companies.append("Exxon @ Global, Chelsea")
    order1.stations.append(Station(name: "Tyngsboro Mobil #2871", amount: 4000))
    order1.stations.append(Station(name: "Grafton St #10095", amount: 15000))
    orders.append(order1)

    let order2 = Order()
    order2.companies.append("Exxon @ Global, Chelsea")
    order2.stations.append(Station(name: "Winstead Citgo #2001", amount: 3000))
    orders.append(order2)

    let order3 = Order()
    order3.companies.append("MSCG @ Sunoco Partners")
    order3.stations.append(Station(name: "Citgo #123", amount: 7000))
    order3.stations.append(Station(name: "Mobil #345", amount: 12500))
    order3.stations.append(Station(name: "Exxon #567", amount: 300))
    order3.stations.append(Station(name: "Citgo #789", amount: 6100))
    order3.stations.append(Station(name: "Stoughton Mobil #2744", amount: 9098))
    order3.stations.append(Station(name: "Westborough Mobil #2720", amount: 120000))
    orders.append(order3)
}

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

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

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

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

    let order = orders[indexPath.row]

    cell.companyLabel.text = ""
    for (index, company) in order.companies.enumerated() {
        cell.companyLabel.text! += company
        if index < order.companies.count - 1 {
            cell.companyLabel.text! += "\n"
        }
    }

    for station in order.stations {

        // create horizontal stack view to arrange the station name and amount
        let horizontalStackView = UIStackView()
        horizontalStackView.axis = .horizontal

        let nameLabel = UILabel()
        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        nameLabel.text = station.name
        horizontalStackView.addArrangedSubview(nameLabel)

        let amountLabel = UILabel()
        amountLabel.translatesAutoresizingMaskIntoConstraints = false
        amountLabel.addConstraint(NSLayoutConstraint(item: amountLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1.0, constant: 60))
        amountLabel.backgroundColor = UIColor.purple
        amountLabel.textAlignment = .right
        amountLabel.textColor = UIColor.white
        amountLabel.text = String(station.amount)
        horizontalStackView.addArrangedSubview(amountLabel)

        // add the horizontal stack view to the vertical stack view containing all stations
        cell.stackView.addArrangedSubview(horizontalStackView)
    }

    return cell
}

}

Here's what the storyboard looks like:

Answer 2

As Mr.Bista mentioned there is an option with StackView.

1. Create custom cell in Storyboard with the design.
2. Instead of adding multiple labels use stack view.
3. In code use self sizing cells. You can refer to this site to guide you. APPCode self sizing cells or just seek on stackoverflow.

I did not test it by myself now, but I assume it can be tricky to use stackView and self sizing cell. Since every cell can have different height based on contents of StackView. So to be hundred percent sure, you can always calculate the height of cell.

4. Change the content of stack view based on json content. (Number of records for violet labels)

You can also check the stack for similar questions. Please see this link where there is possible answer for you. Multiple UILabels inside a self sizing UITableViewCell

Answer 3

According to @the_dahiya_boy answer:

1. You get the JSON field with specific fields (there can be one or two fields that need to be displayed in violet fields)

2. You check how many fields there are

3. If there is only one field then you can take set the frame of your second view (for second field, that is empty) as 0

Answer 4

This is the perfect scenario to user UIStackView, add 5 labels inside Stack View and hide(.isHidden Property) the labels which you do not want to show, this will cause Stack View to Shrink and Expand based upon number of labels present inside it.

I hope you are already informed with Stack View, if not then you must look for basic online tutorial.

Answer 5

In storyboard you have to two UILabel each for white and violet. If Json have data then assign it otherwise do below code

cell.label1.frame.size.height = 0
cell.label2.frame.size.height = 0

Note : Becarefull about constraints you are giving to the components in the UITableViewCell.