1

In the Mail app on iPhone, when the user taps Edit, the toolbar shows two buttons, Delete and Move. These buttons have both image and text while appearing as bordered.

I tried to recreate this effect, but I have not really succeeded. Here's what I've tried:

  • The obvious way of setting the image and text properties. This results in some weird button with the image on top and the text below it.

  • Initialize the UIBarButtonButton with a custom view set to an instance of UIButton (described here). This button can then not be set to be bordered, instead it appears as a flat view (without shadows either).

I could obviously create a button and then add an UIImageView 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 Mail 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.

So I wonder whether anybody did something like this?

Community
  • 1
  • 1
fabian789
  • 8,348
  • 4
  • 45
  • 91

1 Answers1

1

Most likely these are UIButtons with stretchable image backgrounds. That's how I would do it.

XJones
  • 21,959
  • 10
  • 67
  • 82