Adding images to table view cell problem using stack views

Question

in my prototype cell I have a horizontal stack view and I connected that to my UITableViewCell and I defined an update function In my UITableViewCell that adds multiple images to the stack view and I called the function In TableViewController cellForRowAt but nothing nothing happens.

//inside UITableViewCell  
@IBOutlet weak var lineStack: UIStackView!

func update(_ imageName: String){
    let numberOfCopies = Int(deviceWidth/50)
    let startX = (Int(deviceWidth) - (numberOfCopies*50))/2
    xValue = xValue + startX
    let image = UIImage(named: imageName)

    for _ in 1...Int(numberOfCopies) {
        xValue = xValue + heightValue
        let imageView = UIImageView(image: image)
        imageView.frame = CGRect(x: xValue , y: 0, width: widthValue, height: heightValue)
        lineStack.addSubview(imageView)
    }
}

 //inside TableViewController

 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Line", for: indexPath) as! LineTableViewCell
        let imageName = imagesName[indexPath.row]
        cell.update(imageName)
        return cell
 }

score 0 · Answer 1 · edited Aug 06 '19 at 17:41

0

For the line:

lineStack.addSubview(imageView)

Instead of addSubview() you need to do it with addArrangedSubview(). The former is the regular way of adding a subview to a view, whereas the latter is specifically for UIStackView and tells the view to insert it properly.

edited Aug 06 '19 at 17:41

shim

9,289
12
69
108

answered Aug 06 '19 at 13:52

Klinki

368
1
11

width and height for imageView frame are equal to 50 when I use addArrangedSubview it adds Huge images to the stack view – reza firouzbakht Aug 06 '19 at 14:36
take a look here: https://stackoverflow.com/questions/30728062/add-views-in-uistackview-programmatically maybe it helps – Klinki Aug 06 '19 at 14:45

DonMag · Accepted Answer · 2019-08-06T19:02:25.040

Your post indicates you want your images to be 50 x 50 points... use auto-layout constraints with .addArrangedSubview():

class TestCell: UITableViewCell {

    @IBOutlet var lineStack: UIStackView!

    func update(_ imageName: String) {
        let numberOfCopies = Int(deviceWidth/50)
        let image = UIImage(named: imageName)

        for _ in 1...Int(numberOfCopies) {
            let imageView = UIImageView(image: image)
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true
            imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor).isActive = true
            lineStack.addArrangedSubview(imageView)
        }
    }
}

EDIT Sample result, with stack view centered horizontally:

Stack view is set to:

Axis: Horizontal
Alignment: Fill
Distribution: Fill
Spacing: 0

and this is the layout with constraints:

Note that the stack view has a Width constraint of 10, but its Priority is 250 ... that allows the stack view to stretch horizontally, while keeping IB satisfied with the constraints.

Thanks a lot how can you do something to bring all the images in you're sample result to center and stick them to the bottom of the table view. and if you can tell me how you constrainted your stack view in your storyboard. — reza firouzbakht, Aug 06 '19 at 18:33
Added screen-caps with the stack view centered horizontally, along with the constraints setup. Don't know what you mean by *"stick them to the bottom of the table view"* — DonMag, Aug 06 '19 at 19:03

Adding images to table view cell problem using stack views

2 Answers2