9

I am using Swift 3, Xcode 8.2.

I want to something like this (ignore the Oscars-themed fill) where the camera button is a bit more prominent/encircled on the tab bar:

enter image description here

I assume the whole thing is an image but is that image just naturally raised off the tab bar in some way?

Any resources or if you can point me in the right direction would be great. Thank you!

EDIT

I may have found another article that explains what I want to do: How do we create a bigger center UITabBar Item

Community
  • 1
  • 1
noblerare
  • 10,277
  • 23
  • 78
  • 140

2 Answers2

28

One way is to simply add your UIButton on top of UITabBarController with the dummy center view controller.

Here I use storyboard and subclass UITabBarController to add that button:

enter image description here

This is my storyboard, note how the center view controller is just there for space:

enter image description here

With only those code and storyboard, this is the result:

enter image description here

Project here: https://github.com/aunnnn/TestButtonOnTabBar/

aunnnn
  • 1,882
  • 2
  • 17
  • 23
  • This is perfect for me. Thank you! – noblerare Feb 28 '17 at 00:11
  • Would you mind helping me understand the numbers in code? Specifically, what is the `button.frame` in the `viewDidLoad` and `viewDidLayoutSubViews` doing and how it is different? – noblerare Feb 28 '17 at 00:33
  • @noblerare Actually setting .frame in viewDidLoad() don't have any effects here, I just forgot to remove it. There are two ways to put button at the bottom center: 1) using Autolayout or 2) setting frame manually. Here I go with 2), and viewDidLayoutSubViews() are the place that all views is already laid out. This is also where I know the correct frame of self.view, so I just set by button frame there. – aunnnn Feb 28 '17 at 03:04
  • It works perfect. Thanks bro. – Chris Nguyen May 23 '18 at 02:21
  • great working fine. One question. How would you change its color if it is selected or not ? – Ahsan Sep 10 '20 at 15:23
0

One solution would be to create your own subclass of the TabBar or just create a generic UIView that has the same properties as a TabBar (e.g. array of buttons that get displayed inside the view at certain heights, with the center one with a different height or offset value).

Another route you could take is to search and find other frameworks that are out there to use that do the same sort of functionality. A quick search on cocoacontrols came up with a couple options, the one that looked closest to what you are looking for is the RaisedCenterTabBar.

c_rath
  • 3,618
  • 2
  • 22
  • 14