1

The Messages app on iOS places two bar button items next to the large title text "Messages" in the master view controller with a circled style.

How do you make your own bar button items in the navigation bar have this same behavior?

enter image description here

Berry Blue
  • 15,330
  • 18
  • 62
  • 113

1 Answers1

1

I think this demo project should give you enough hints to help you.

Addendum: You may be already aware of this, but in case you specifically wanted a search bar as well, there is also a UISearchController ViewController to help with getting user input and populating a TableView with results.

Addendum: Looking into it further, there’s already an SO answer covering this. Additionally, consulting the API reference show that setToolbarItems already supports adding an array of UIBarButtonItem

As far as custom buttons are concerned, check out this reference, there’s a section on customizing appearance. Additionally, the constructor for UIBarButtonItem conveniently supports taking a UIImage as well. If what’s there is insufficient to accomplish what you need, you can always subclass UIBarButtonItem and change the views there.

xinkecf35
  • 328
  • 1
  • 10
  • Thank you for your answer. That project has several great examples but they don't show how to create custom bar button items as I described in my question. – Berry Blue Apr 12 '20 at 15:24
  • I’ve updated the answer to better reflect your concerns. – xinkecf35 Apr 12 '20 at 16:04
  • Thanks for the updated answer. I'm still not able to determine if Apple is using a custom or system bar button item in the Messages app. The compose icon is a system type but I don't see how to style the button in a circle unless they are doing this with custom images. I also can't find documentation on how to place the buttons directly to the right of the large navigation text. – Berry Blue Apr 12 '20 at 23:16
  • Personally, I would probably just create custom images. You can try to find the systems one but it be pain to search through all of them and if you have a specific design language in mind you're going to windup creating custom assets anyway. If you have a vector art program, it's fairly trivial to do. – xinkecf35 Apr 13 '20 at 03:05
  • As far is Apple using a custom view, I agree it is hard to tell. I just tried to replicate the lay out in Storyboards and I couldn't quickly figure out a way to direct add/ make it appear the search bar as part of the navigation bar, at least not quickly. Additionally, it didn't like it when I tried to push title up. Best guess, Apple used a custom titleView for the viewcontroller. They do sav that the titleView property does allow for buttons and that it does automatically resize to fit if not nil. But will get what you want is a different matter. – xinkecf35 Apr 13 '20 at 03:17