How to add subview to stackview in table view cell?

Question

I am in need to add the label as subview to UIStackView in table view cell.

I have created label as

let nameLabel=UILabel()
nameLabel.text=names[indexPath.row]

Where name is an array which is a type of String

My code is

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource
{
            let names=["Amutha","Priya","Amuthapriya","Priyasri","Kavisha"]
            func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
            {
                return names.count
            }
            func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) ->
                UITableViewCell
            {
                let cell=tableView.dequeueReusableCell(withIdentifier: "cell") as! ViewCell
                for name in names
                {
                    let nameLabel=UILabel()
                    nameLabel.text=name
                    cell.nameStackView!.addSubview(nameLabel)

                }

                return cell
            }
}

Why I am getting a null pointer exception when I add a label to stackview?

Any help will be much appreciated.

When using `UIStackView`, always use `addArrangedSubview()` and add to its arranged subviews array instead of the regular `addSubview()`, since it manages its subviews itself based on the configuration. — Lokesh SN, Jan 29 '20 at 06:30
@LokSN You are correct. But this is not the reason of the crash — iOSDev, Jan 29 '20 at 06:42
Didn't mean it is, just had a point to make. Judging from the comments on the answers, it's probably due to the cell's `nameStackView ` being nil — Lokesh SN, Jan 29 '20 at 06:43

score 0 · Answer 1 · answered Jan 29 '20 at 05:03

0

Change

cell.nameStackView!.addSubview(nameLabel)

To

cell.nameStackView!.addArrangedSubview(nameLabel)

answered Jan 29 '20 at 05:03

MBT

1,381
1
6
10

What kind of exception? – MBT Jan 29 '20 at 05:43
```Unexpectedly found nill while unwrapping an optional value``` on this line – Priya Sri Jan 29 '20 at 05:44
1

I think you did not connect `nameStackView` IBOutlet with Storyboard or xib file. Please recheck it. – MBT Jan 29 '20 at 05:46

score 0 · Answer 2 · 2020-01-29T06:08:37.717

You can use below code to add UIStackView as per your need.

let titleLabel = UILabel()
let subtitleLabel = UILabel()

lazy var titleStackView: UIStackView = {

    titleLabel.textAlignment = .center
    titleLabel.text = "Good Morning"
    titleLabel.textColor = UIColor.white
    titleLabel.font = UIFont(name: "ProximaNova-Regular", size: 12.0)

    subtitleLabel.textAlignment = .center
    subtitleLabel.text = "--"
    subtitleLabel.textColor = UIColor.white
    subtitleLabel.heightAnchor.constraint(equalToConstant: 30.0).isActive = true
    subtitleLabel.font = UIFont(name: "DublinSpurs", size: 20.0)

    let stackView = UIStackView(arrangedSubviews: [subtitleLabel])
    stackView.axis = .vertical/.horizontal
    return stackView
}()

Also try replacing

for name in names
{
    let nameLabel=UILabel()
    nameLabel.text=name
    cell.nameStackView!.addSubview(nameLabel)
}

with

let nameLabel=UILabel()
nameLabel.text = names[indexPath.row]
cell.nameStackView!.addSubview(nameLabel)

I have to dynamically add array items to stack view as label — Priya Sri, Jan 29 '20 at 05:43
You shouldn't be using `addSubview()` to add to a stack view — Lokesh SN, Jan 29 '20 at 06:33

score 0 · Answer 3 · edited Jan 29 '20 at 07:56

0

Try below code

let nameLabel = UILabel()

cell.nameStackView.addArrangedSubview(nameLabel)

edited Jan 29 '20 at 07:56

HardikS

656
3
10

answered Jan 29 '20 at 05:57

Richa Mangukiya

1

score 0 · Answer 4 · answered Jan 29 '20 at 06:52

If you have nameStackView in storyboard or xib, make sure the IBOutlet is connected properly. If you have created the nameStackView programmatically make sure it is initialised.

And remove all existing labels from the stackview, else you'll have duplicate labels on each scroll

class ViewCell: UITableViewCell {
    //Make sure IBOutlet is connected properly
    @IBOutlet weak var nameStackView: UIStackView!
}

ViewController

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
{
     let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! ViewCell
     for name in names
     {
        cell.nameStackView.arrangedSubviews.forEach { cell.nameStackView.removeArrangedSubview($0) }
        let nameLabel=UILabel()
        nameLabel.text=name
        cell.nameStackView.addSubview(nameLabel)

     }
     return cell
 }

ifrit · Answer 5 · 2020-01-29T09:38:26.027

Try initializing the stackview and label in your ViewCell class.

class ViewCell: UITableViewCell {
    let nameLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 14)
        return label
    }()
    let nameStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        return stackView
    }()
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super .init(style: style, reuseIdentifier: reuseIdentifier)
        self.configureStackView()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func configureStackView()
    {
        addSubview(nameStackView)
        nameStackView.translatesAutoresizingMaskIntoConstraints = false
        nameStackView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        nameStackView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        nameStackView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        nameStackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

        nameStackView.addArrangedSubview(nameLabel)
        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        nameLabel.topAnchor.constraint(equalTo: nameStackView.topAnchor, 
        constant:10).isActive = true
        nameLabel.leadingAnchor.constraint(equalTo: nameStackView.leadingAnchor, 
        constant:10).isActive = true
        nameLabel.trailingAnchor.constraint(equalTo: nameStackView.trailingAnchor, 
        constant:-10).isActive = true
        nameLabel.bottomAnchor.constraint(equalTo: nameStackView.bottomAnchor, 
        constant:-10).isActive = true
    }
}

This code is in case you didn't create your stackview in storyboard.

Now in your ViewController class, add the following code in your cellForRowAt method.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) ->
                UITableViewCell
{
    let cell=tableView.dequeueReusableCell(withIdentifier: "cell") as! ViewCell
    cell.nameLabel.text = names[indexPath.row]
    return cell
}

Hope, this solution works for you.

How to add subview to stackview in table view cell?

5 Answers5