Add UILabels with different width side by side programmatically

Question

I want to add multiple UILabels programmatically side by side to a TableViewCell. The UILabels have different width.

The first cell in the picture shows the problem and the second cell what I would like to do.

In this example I want to add four UILabels to a TableViewCell. But the width of the TableViewCell is smaller than the width of the UILabels. Therefore I must increase the CellHeight and add the UILabels below to the other UILabels (like the second cell in the picture).

You can add the labels on each position that you want. let label = UILabel(frame: CGRect(x: 0, y: 0, width: 225, height: 25)). Change the x and y for position — Gregga17, Jun 06 '17 at 13:05
But my problem is that the labels have different width. How can I calculate that the third label does not fit into the line? — I.G., Jun 06 '17 at 13:13
The width of a view is 375. So the width of one label is 150 and the other 225. And the third label you put it under the first label. By setting the y. — Gregga17, Jun 06 '17 at 13:16
Use it as per your requirement :- https://github.com/ali312/TLTagsControl — Salman Ghumsani, Jun 06 '17 at 13:16
If you know the width of the UITableView and the UILabels in advance then you can used fixed positions (or auto layout with fixed positions). However are you saying that you don't know the width of the table at design time because it could change (different orientation or device for example). If that's the case and it needs to dynamically adjust it's a bit more complex. Could you clarify the question. — Upholder Of Truth, Jun 06 '17 at 15:29
@UpholderOfTruth the table has always the same width, because it has only one orientation. But I don't know the width of the labels at design time. Therefore I can't use fixed position. — I.G., Jun 06 '17 at 16:17

Tejas Ardeshna · Answer 1 · 2017-06-07T05:11:42.917

You should put UICollectionView inside of a row of your UITableViewCell. Each cell of your UICollectionView will have a multi UILabel. Update the dataSource for your UICollectionView depending on your label count. Set isScrollEnabled false of that UICollectionView and set automatic row height for UITableViewCell.

Also, set flow layout to UICollectionView :

if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout { flowLayout.estimatedItemSize = CGSizeMake(1, 1) }

Adjust cell size like below:

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {


        let size: CGSize = keywordArray[indexPath.row].size(attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 14.0)])
        return CGSize(width: size.width + 45.0, height: keywordsCollectionView.bounds.size.height)
    }

That's overkill for this situation and also what UICollectionView layout would you use. How would you determine the width/height of the cells within the collection view. Are you suggesting a complete custom UICollectionView layout that adjusts itself dynamically? — Upholder Of Truth, Jun 06 '17 at 15:31

Gregga17 · Answer 2 · 2017-06-06T13:21:35.073

At first you have to make for labels.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomCell

        let label1 = UILabel(frame: CGRect(x: 5, y: 5, width: 100, height: 25))
        label1.text = "Label 1"
        let label2 = UILabel(frame: CGRect(x: 110, y: 5, width: 225, height: 25))
        label2.text = "Label 2"
        let label3 = UILabel(frame: CGRect(x: 5, y: 40, width: 100, height: 25))
        label3.text = "Label 3"
        let label4 = UILabel(frame: CGRect(x: 110, y: 40, width: 225, height: 25))
        label4.text = "Label 4"
        cell.addSubview(label1)
        cell.addSubview(label2)
        cell.addSubview(label3)
        cell.addSubview(label4)

    return cell
}

Each label has different width and different position. You can play with it

Add UILabels with different width side by side programmatically

2 Answers2