CODEWITHSUNDEEP
iosswiftuitabbarcontrolleruitabbartabbar
BillJang
BillJang

Reputation: 31

Custom Tab Bar Swift

Hi I have searched all over and I still cannot find any information that would help me with this task. How would I create a custom tab bar that looks like this using Swift:

Here is a link to the image of what the tab bar looks like: http://2.bp.blogspot.com/-QlGT8CjZqJw/VbUZDwlRXzI/AAAAAAAAEHg/zqT_1Valsvo/s1600/Tab%2Bbar.png

The tab bar would look like this and the selected tab would look like the middle icon, I have all the assets for this but how would I customize my tab bar to look like this?

Upvotes: 3

Views: 4948

Answers (4)

SentientBacon
SentientBacon

Reputation: 1559

First, you would need the assets in @2x and @3x forms(@1x if you are developing for before iOS 7). The icons need to be square with a set of white icons in the sizes below and icons with hex color #2E967E and the background alpha with sizes:

  • icon@2x = 50x50
  • icon@3x = 75x75

You would need to go to images.xcassets and create six new image sets. 3 of the sets will be for white icons and three for colored. For all six image sets, go to the rightmost icon(which looks like a slider) in the attributes inspector and change render mode to "Original Image"

Now go to your tab bar controller, select the tab items, and type the name of the image respective white in the "Image" section, and then select it. Then do the same for the selected image, except this time, chose the colored icon. Delete the text label, and go to the ruler section and modify the top and bottom image insets(where the top one = negative bottom one) to make the image centered.

Finally, go to the tab bar(by clicking Tab Bar Controller Scene -> Tab Bar Controller -> Tab Bar in the Document Outline), and go to the attributes inspector and click bar tint, and change the hex code to 47E9C3. Uncheck translucent.

Now you should be done!

Upvotes: 2

Avijit Nagare
Avijit Nagare

Reputation: 8802

Try this code in applicationDidFinishLaunchingWithOption. "tabbarbg.png" image height=49.

 UITabBar.appearance().tintColor = UIColor.lightGrayColor()//selected tab color
 UITabBar.appearance().backgroundImage = UIImage(named:"tabbarbg.png")
 UITabBar.appearance().barTintColor = UIColor.whiteColor()

Upvotes: 1

Deepakraj Murugesan
Deepakraj Murugesan

Reputation: 1237

It is very easy to set up the image for the tab bar view controller all you need is different images for the tabs that you want to use. first of all open up your story board and select the tab [ie., tab bar view controller followed by navigation controller followed by view controller like this if u set up you will get the tabs] and provide the image in the bar item.. It is shown in the image enter image description here

And if you want to make the selected tab with different image just describe that in app delegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[[UITabBar appearance] setTintColor:[UIColor blackColor]];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"image1"]];}

this piece of code for changing the selected tab is in objective C

Upvotes: 0

Viren Sareen
Viren Sareen

Reputation: 74

You'll need to create the icons yourself in a separate software, then import them in Images.xcassets, then apply them using the main.storyboard

Upvotes: 0

Related Questions