Collapse UIImageview in UITableview cell, when it doesn't return an image

Question

Summary of the problem

I have a UITableView in which I want to Collapse it's UIImageView cell part, whenever it doesn't return an image, as seen below

first image of tableview cell (the expected result)

second image of tableview cell (the no image result)

Background including what I've already tried

Below is the piece of code that I have been working on. Also notice that I'm using SDWebImage to get and set the image in the app (any method in tableview delegates, SDWebImage protocols etc that I'm missing just point me),

The comment out part is what I have done, i.e. used constraints to try the collapse of UIimageView not it messes up the whole tableView upon scrolling

Code

Here is piece of code I'm working on,

[cell.i_imageView sd_setImageWithURL:[NSURL URLWithString: item.PostimageUrl] placeholderImage:[UIImage imageNamed:@"no-image"] options:SDWebImageRefreshCached completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {

        if(!image)
        {
                    //cell.i_imageView.hidden = YES;

            NSLog(@"why no image des:%@",error);
            NSLog(@"why no image url:%@",imageURL);
        }

//            cell.imageHolderAspectConstraint.active = TRUE;
//            cell.imageHolderZeroImageConstraint.active = FALSE;
//        }
//        else
//        {
//            cell.imageHolderAspectConstraint.active = FALSE;
//            cell.imageHolderZeroImageConstraint.active = TRUE ;
//
//            [cell layoutIfNeeded];
//            [cell setNeedsLayout];
//        }

        [cell.i_imageView sd_removeActivityIndicator];

    }];

Any help in this matter is highly appreciated, cheers.

Edit

Here is the image of storyboard section, where do I need to embed stackview

dahiya_boy · Accepted Answer · 2019-08-01T12:12:29.730

0

Add your ImageView in StackView. Now hide your ImageView when image is not available.

Note : UIStackView automatically handle height of cell.

Edit:

As of now your UI is something like this.

Now select your image holding view and click on embedded in and select UIStackView.

Now assign the same constraints that you have given to holding view to stackView.

Now your hierarchy is like below

Finally you need to do below code in CellForRow:

cell.vImageHoldingView.hidden = !image;

edited Aug 01 '19 at 12:12

answered Aug 01 '19 at 11:40

dahiya_boy

9,298
1
30
51

Thanks for the timely reply can you look at the edited part of the question – Frostmourne Aug 01 '19 at 11:56
@HamzaIqbal What is vImage Holding View ? – dahiya_boy Aug 01 '19 at 11:58
It has the required ImageView that needs to be collapsed – Frostmourne Aug 01 '19 at 12:00
@HamzaIqbal I am seeing three dots (more option) , where it is? I think you need to hide that too. – dahiya_boy Aug 01 '19 at 12:01
This is comes under the accepted solution bracket, but here the conflicting matter was only UIImageView, which was addressed in the accepted solution – Frostmourne Aug 02 '19 at 10:19
The accepted solution embedded UIImageView only, which was needed because that is the only part of the table cell I want to collapse only – Frostmourne Aug 02 '19 at 10:37
But where to hide it though ;( -- "Finally you need to do below code in CellForRow:" – Frostmourne Aug 02 '19 at 10:43
I have produced all the steps you advised, but now I have collapsing of the imageView is not taking place, still need help – Frostmourne Aug 05 '19 at 07:56
@HamzaIqbal What happened , where you were stucked now? – dahiya_boy Aug 05 '19 at 08:06
1

Fixed it, was missing various constraints for other elements in cell, thanks – Frostmourne Aug 05 '19 at 09:26

Mojtaba Hosseini · Answer 2 · 2019-08-01T12:11:46.257

0

Embed if in a stackView
Attach stackview anchors to the desired anchors
Hide image view if needed.

StackView automatically collapses its hidden arrangedSubViews

Note: If you set the image nil, it will collapse again, because stackView manages imageView height according to its image.

edited Aug 01 '19 at 12:11

answered Aug 01 '19 at 11:40

Mojtaba Hosseini

95,414
31
268
278

Thanks for the timely reply can you look at the edited part of the question – Frostmourne Aug 01 '19 at 11:56
Answer is the same @HamzaIqbal. You just need to match anchors of the stackView to the correct anchors. Probably **vImageHoldingView** – Mojtaba Hosseini Aug 01 '19 at 12:00
I added an image. You probably need to add 0 for all sides of the stackView. And the button has its own constraints. – Mojtaba Hosseini Aug 01 '19 at 12:12
It does not do "StackView automatically collapses its hidden arrangedSubViews", where do I need to call hide property? – Frostmourne Aug 02 '19 at 10:35
imageView.isHidden = true – Mojtaba Hosseini Aug 02 '19 at 13:52
This pops up "No setter method 'setIsHidden:' for assignment to property" – Frostmourne Aug 05 '19 at 07:24

score -2 · Answer 3 · answered Aug 01 '19 at 11:44

-2

If there is no image, make the ImageView height to 0. Remaining things will get handled if it has a proper constraints.

answered Aug 01 '19 at 11:44

Harish

537
1
4
9

score -2 · Answer 4 · answered Aug 01 '19 at 11:45

-2

make picture bottom constraint as outlet . Like this

var bottomViewConstraints: NSLayoutConstraint!

and give value on collapse and expand. like this

bottomViewConstraints.constant = 0 // expand 
bottomViewConstraints.constant = 60 // collapse

answered Aug 01 '19 at 11:45

Humz Shahid

19
4

Perhaps, elaborate? – Frostmourne Aug 02 '19 at 10:38
You have image outlet , in your swift file . and in Xib file this image must have height Constratraint. var heightConstraints: NSLayoutConstraint! heightConstraints.constant = 0 // expand When you give constant = 0 if will hide your image view . (Which Seem like your requirments) heightConstraints.constant = 60 // collapse – Humz Shahid Aug 04 '19 at 07:48

Collapse UIImageview in UITableview cell, when it doesn't return an image

4 Answers4