CODEWITHSUNDEEP
iosswiftuitableview
Mathieu Rios
Mathieu Rios

Reputation: 386

Append item horizontally into a tableView cell but make them not fill all the space

I have a specific design that I want to achieve, it doesn't seems to complex to me but I'm struggling a lot to make it happen.

First the design looks like this:

So, I have a table view of items which have a picture, then a title and then a collection of three items which will be ImageViews.

All of this inside a cell and inside a stackView.

I tried to make an horizontal stack view and did manage to append my items correctly but it went horribly wrong in terms of design as my imageviews were stretching all the way horizontally. I guess this is not possible to NOT stretch this items.

I also tried to add a collection view into the table view but figured out that was very complex for a thing this basic (as I guess it should be). And then, I'm here.

Here is my code and where I'm stuck at:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = debateList.dequeueReusableCell(withIdentifier: "itemsBox", for: indexPath) as! ItemBox
        
        // Make a variable with 3 participants
        let participants = tableView[indexPath.row].participants?.prefix(3)
        // iterate over them and adding them to anything that can be doable
        participants?.forEach { participant in
            let imageView = UIImageView()
            let imageUrl = URL(string: participant.imageURL)
            imageView.kf.setImage(with: imageUrl)
            // Here add item to something
        }
        
        return cell
    }

I'm stuck and it's getting too long for something this little. Guess I'm a little bit upset with myself for not figuring out how to do it.

Upvotes: 0

Views: 106

Answers (2)

Ankit Thakur
Ankit Thakur

Reputation: 4749

If you are having up to 5 participants, then I would suggest you to add by default 2 subviews in horizontal stack view:

  1. empty view with width constraint >= 5 (call it spaceview)
  2. fixed width for "60 % no" UILabel.

then programmatically insert image views with fixed width and aspect ratio 1:1 in horizontal stack view at index 0.

This way, if there will be only 1-2 participants, then the remaining space will be occupied by spaceview as its width will be greater than 5.

If the participants will be more than 5, then better option is to use collectionview with uilabel in horizontal stack view.

Upvotes: 1

Shehata Gamal
Shehata Gamal

Reputation: 100541

First if they are 3 static number of images then it's better to make them inside design and assign the image urls to their outlets respectively

Second for your current work you need to add a width constraint (regarding height they will fit all the stack height when it's a horizontal stack ) like

imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true

Upvotes: 1

Related Questions