Change image on click in custom table cell made from nib

Question

I have a table with custom cells that are made from a nib file. When a user clicks a cell it expands in height , thus simulating a dropdown. In the custom cell there is an imageView that has a dropDown image when the cell is not clicked. However when the cell is clicked it should change the image to a collapse image or arrow up image to show that the cell is open.

I am having a problem changing the image when the cell expands from arrow down to arrow up and vice versa. I would like assistance achieving this.

Here is my code :

ViewController.h

@interface ViewController : UIViewController <UITableViewDelegate, 

UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@property(nonatomic, strong) NSArray *items;
@property (nonatomic, assign) BOOL expandFlag;
@property (nonatomic, assign) NSIndexPath* selectedIndex;

ViewController.m

- (NSArray *) items
{
    if (!_items) {
        _items = [NSArray new];
    }
    return _items;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    UINib *nib = [UINib nibWithNibName:@"CustomTableViewCell" bundle:nil];
    [self.tableView registerNib:nib forCellReuseIdentifier:@"cell"];

    _items = @[
                        @{@"title":@"Simpson", @"short":@"Homer", @"long":@"Mr jhvjm,b;k t  tyfy rctrc rtcf rvty rthvgh bb r5ertvyg hg r5 tyhg 6ruygj 8rutyj r6yiugg tygdtjhgfdt hg tvt gthgfgni7yjftgjhb ftgfh b yjh gtfjfyhh j jj j", @"image":@"There are many ways to create expandable cells in the table view. Few of them you can easily find on this blog or somewhere in Google. One of that is the official Apple “Date cell” demo code. However, most of that describing the little hard way by using operations directly on constraints."},
                        @{@"title":@"Simpson", @"short":@"Marge", @"long":@"Mrs bjyvhm uikn o utv jb k", @"image":@"There are many ways to create expandable cells in the table view. Few of them you can easily find on this blog or somewhere in Google. One of that is the official Apple “Date cell” demo code. However, most of that describing the little hard way by using operations directly on constraints."},
                        @{@"title":@"Simpson", @"short":@"Bart", @"long":@"Mr vubj cbjknuy  iubyuvjh biubkj ", @"image":@"There are many ways to create expandable cells in the table view. Few of them you can easily find on this blog or somewhere in Google. One of that is the official Apple “Date cell” demo code. However, most of that describing the little hard way by using operations directly on constraints."},
                        @{@"title":@"Simpson", @"short":@"Lisa", @"long":@"Miss jbjvjbbiuvu yuvhj uby ", @"image":@"There are many ways to create expandable cells in the table view. Few of them you can easily find on this blog or somewhere in Google. One of that is the official Apple “Date cell” demo code. However, most of that describing the little hard way by using operations directly on constraints."},
                        @{@"title":@"Simpson", @"short":@"Maggie", @"long":@"Miss iubniyujh k iuuh  ", @"image":@"There are many ways to create expandable cells in the table view. Few of them you can easily find on this blog or somewhere in Google. One of that is the official Apple “Date cell” demo code. However, most of that describing the little hard way by using operations directly on constraints."},
                        @{@"title":@"Flanders", @"short":@"Ned", @"long":@"Mr hbuyvj iybkj nui  uhc n", @"image":@"There are many ways to create expandable cells in the table view. Few of them you can easily find on this blog or somewhere in Google. One of that is the official Apple “Date cell” demo code. However, most of that describing the little hard way by using operations directly on constraints."}
                        ];
    // Do any additional setup after loading the view, typically from a nib.
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(void) didExpandCell{

    _expandFlag = !_expandFlag;
    [self.tableView reloadRowsAtIndexPaths:@[_selectedIndex] withRowAnimation:UITableViewRowAnimationAutomatic];

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
   return self.items.count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    NSDictionary *item = _items[indexPath.row];
    cell.titleImage.text = [item objectForKey:@"title"];
    cell.longLabel.text = [item objectForKey:@"long"];
    cell.shortLabel.text = [item objectForKey:@"image"];

    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

    _selectedIndex = indexPath;
    [self didExpandCell];
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    if (_expandFlag && _selectedIndex == indexPath) {
        return 400;
    }
    return 200;

}

CustomeTableViewcell.h

@interface CustomTableViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *thumbImage;
@property (weak, nonatomic) IBOutlet UILabel *titleImage;
@property (weak, nonatomic) IBOutlet UILabel *shortLabel;
@property (weak, nonatomic) IBOutlet UILabel *longLabel;
@property (weak, nonatomic) IBOutlet UIImageView *dropDownImage;

CustomerTableViewCell.m

- (void)awakeFromNib {
    [super awakeFromNib];
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
}

Answer 1

You should check and change dropDownImage in cellForRowAtIndexPath method. Something likes the code below

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

  CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
  NSDictionary *item = _items[indexPath.row];
  cell.titleImage.text = [item objectForKey:@"title"];
  cell.longLabel.text = [item objectForKey:@"long"];
  cell.shortLabel.text = [item objectForKey:@"image"];

  NSString *dropDownImageName = [indexPath isEqual:_selectedIndex] && _expandFlag ? @"ARROW_DOWN" : @"ARROW_UP";
  cell.dropDownImage.image = [UIImage imageNamed:dropDownImageName];

  return cell;
}

Change ARROW_UP and ARROW_DOWN with your image names.