title: adding custom BarButtonItem to top navigation bar
body: <p>Using the interface builder in my storyboard, I put a Bar Button Item in the top left corner of my navigation toolbar that toggles the edit view of my table view cells. I currently have the text something like "Edit cells"</p>
  
  <p>My question is, how do I change this to use an image? I created my own custom image for Edit Cells on state and Edit Cells off state, but when I specify the image in the interface builder, the image is stretched in the bar button item. Do I need to make this bar button item programmatically from code to make it use the frame of the image? How do I specify state?</p>
  
  <p>I feel there should be a way to do this in the interface builder but I tried to do this programmatically: </p>
  
  <pre><code>UIImage *image = [UIImage imageNamed:@"edit-off.png"];
  UIButton *showEditButton = [UIButton buttonWithType:UIButtonTypeCustom];
  showEditButton.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );
  [showEditButton setImage:image forState:UIControlStateNormal];
  UIBarButtonItem *showEditButtonItem = [[UIBarButtonItem alloc] initWithCustomView:showEditButton];
  </code></pre>
  
  <p>Now how do I add showEditButtonItem to the top left of the navigation bar?</p>
  
  <p><img src="https://i.stack.imgur.com/IlVfr.png" alt="enter image description here"></p>
  
  <p>actual image:</p>
  
  <p><img src="https://i.stack.imgur.com/kyyL4.png" alt="enter image description here"></p>