title: How to have a bordered UIBarButton Item with both Image and Text - Like in Mail
body: <p>In the <em>Mail</em> app on iPhone, when the user taps <em>Edit</em>, the toolbar shows two buttons, <em>Delete</em> and <em>Move</em>. These buttons have both image and text while appearing as bordered.</p>
  
  <p>I tried to recreate this effect, but I have not really succeeded. Here's what I've tried:</p>
  
  <ul>
  <li><p>The obvious way of setting the <code>image</code> and <code>text</code> properties. This results in some weird button with the image on top and the text below it.</p></li>
  <li><p>Initialize the <code>UIBarButtonButton</code> with a custom view set to an instance of <code>UIButton</code> (described <a href="https://stackoverflow.com/questions/3903018/how-to-have-a-uibarbuttonitem-with-both-image-and-text">here</a>). This button can then not be set to be bordered, instead it appears as a flat view (without shadows either).</p></li>
  </ul>
  
  <p>I could obviously create a button and then add an <code>UIImageView</code> as a subview to the toolbar, but then I have to care about device rotation and some other stuff I would like to avoid. Also, I think Apple doesn't do it this way; when you select an email in <em>Mail</em> while in editing mode, the button label is updated with (-number-), which moves the image slightly to the left. It looks like the text and the image belong together.</p>
  
  <p>So I wonder whether anybody did something like this?</p>