ios - Adding a favourite love icon as a Bar Button Item at Navigation Bar, trigger to different appearance when clicked

Question

1. How do I add a heart icon at Rightside of Navigation Bar? Is it by adding a 48x48px png heart icon as Bar Button Item the correct way?
2. I wish to change the appearance of the heart icon when user click on it. Switch between favourite and unfavourite. Please see this Link

3. I need to flag the icon either favourite or unfavourite when the user return to this VC.

   Can someone please give some pointers. Thank you.

Answer

Answer 1

I think adding UIBarButtonitem is correct way, you can add/update bar button image with Rendering mode. try this.

let heartIcon = //UIImage
barButtonItem.image = heartIcon.withRenderingMode(.alwaysOriginal)

EDITED

You can use different images for favourite and unfavourite.

let heartIcon:UIImage

if (isFavourite){// favourite condition
    //set favourite image icon
    heartIcon = UIImage(imageLiteralResourceName: "favourite")
}else{
    //set unfavourite image icon
    heartIcon = UIImage(imageLiteralResourceName: "unfavourite")
}

//and update you bar button image.
barButtonItem.image = heartIcon.withRenderingMode(.alwaysOriginal)

Answer 2

Answer

1st Go to fa2png.io to create a 20px or 30px icon. Save it and import into assets.xcassets.

Then the code

- (void)viewDidAppear:(BOOL)animated {

[super viewDidAppear:animated];

UIButton *heart = [UIButton buttonWithType:UIButtonTypeCustom];

BOOL favorite = YES;
if (favorite)
{
     [heart setImage:[UIImage imageNamed:@"favorite.png"] forState:UIControlStateNormal];
}else{
     [heart setImage:[UIImage imageNamed:@"notFavorite.png"] forState:UIControlStateNormal];
}

[heart addTarget:self
          action:@selector(buttonTapped:)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *jobsButton =
[[UIBarButtonItem alloc] initWithCustomView:heart];

self.navigationItem.rightBarButtonItem = jobsButton;

}

-(void)buttonTapped:(UIButton*)heart
{
if( [[heart imageForState:UIControlStateNormal] isEqual:[UIImage imageNamed:@"notFavorite.png"]])
    
{
    NSLog(@"favorite.png");
    
    [heart setImage:[UIImage imageNamed:@"favorite.png"] forState:UIControlStateNormal];
    
    [UIView animateKeyframesWithDuration:0.5
                                   delay:0.0
                                 options:0.0
                              animations:^{
                                  
                                  // Heart expands
                                  [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.10 animations:^{
                                      heart.transform = CGAffineTransformMakeScale(1.3, 1.3);
                                  }];
                                  
                                  // Heart contracts.
                                  [UIView addKeyframeWithRelativeStartTime:0.15 relativeDuration:0.25 animations:^{
                                      heart.transform = CGAffineTransformMakeScale(1.0, 1.0);
                                  }];
                                
                              } completion:nil];
}
else
{
    NSLog(@"notFavorite.png");
    
    [heart setImage:[UIImage imageNamed:@"notFavorite.png"] forState:UIControlStateNormal];
    
    [UIView animateKeyframesWithDuration:0.5
                                   delay:0.0
                                 options:0.0
                              animations:^{
                                  
                                  // Heart expands
                                  [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.10 animations:^{
                                      heart.transform = CGAffineTransformMakeScale(1.3, 1.3);
                                  }];
                                  
                                  // Heart contracts.
                                  [UIView addKeyframeWithRelativeStartTime:0.15 relativeDuration:0.25 animations:^{
                                      heart.transform = CGAffineTransformMakeScale(1.0, 1.0);
                                  }];
                                  
                              } completion:nil];
    }
}

RESULT

[![!\[Pic][2]][2]