Tricks to Custom Tab Bar
Instagram Firebase
Making our application's nice and pretty really sets it apart from the competition. In this lesson, let's add in the four additional icons to the bottom UITabBar of our main UI. Along the way, I'll show you some neat tricks that make this process a lot easier through an Optional Method Parameter. Finally, once our buttons are set up, we center the icons with a couple of inset parameters.

Comments (14)
Anthony
6 years ago
Hello Brian Are you going to teach us the 'edit profile' button? I have only watched a few lessons, but the titles say you are not going to teach us the edit profile button... (I hope you will teach us that button)
Brian Voong
6 years ago
Jesus Adolfo
6 years ago
would love to see more on good practices when it comes to handling video. The youtube series was a good start to that but more on that would be awesome...
josephlausf
6 years ago
omg.. yes pls! <3
rogerbayarea
6 years ago
Awesome swift coding course! But hey your going to fast for me now, just kidding. Keep up the good coding, because we like this course as we really learn to code, it give me freedom to code not relying to IB-storyboard which hard to debug and easy to follow are UI/UX mockup. Great lesson.
weare99
6 years ago
Hey brian how can I get the function when I tap again of the tab bar item that the view goes automatically up. Like in the intagram app or YouTube app. If I tap to again on the selected tabbar item the view will automatically bring me to the top on the view when I have scroll down
Brian Voong
6 years ago
omari
6 years ago
Hello Brian. This approach using the templateNavController function only works with the images you provided. If I try to display other images for my custom tabbar its a mess. I think the images are too big. I don't know how to resize them. Im also using the templateNavController function to create my viewControllers with the images. Can you please update the function so that every selected and unselected image works. The function should automatically resizes the images so that every image fits in our tabbar. This would help me a lot please thanks
Brian Voong
6 years ago
victor
6 years ago
hey Omari, this link might be helpful for finding icons that work with ios. https://icons8.com/icon/new-icons/all
smiller193
6 years ago
Is anyone having an issue with the input accessory view getting stuck at the bottom? When exiting comment screen
Kenny Ho
6 years ago
hey Brian and all those taking this course. I found out that you don't have to incorporate unselected or selected image for color. you can write : //color of selected image tabBar.tint = UIColor.red //color of unselected image tabBar.unselectedItemTintColor = UIColor.blue hopes this helps everyone and make it simpler!
tsangaris
5 years ago
This is how I use it as well, but with Brian's way, you can change the selected color of each tab bar icon since you are providing the selected image for each tab bar selection via the method. If you know that the selected color of the icon will always be the same across the tab bar, then yes, your code above will shrink the method by requiring only a single image, not two.
Kenny Ho
6 years ago
Hey Brian I have a quick question. If someone else in the class knows the answer please help me out. At 11:05, why did you put in UICollectionViewFlowLayout instead of just putting layout? Since you had layout = UICollectionViewFlowLayout I already finish the course and am going back for reference. When I did change the "UICollectionViewFlowLayout"to "layout", the app actually got slower and froze up. It had problem loading the photos. Anyone can explain this to me?
Goldor
4 years ago
You need to initialize your layout variable as UICollectionViewFlowLayout() beforehand anyway. Brian just saved himself a line of code instead to achieve the same result.
mickey1219
5 years ago
could you please add subtitle to this course?
rickkettner
5 years ago
Brian, the plus_selected image seems to be missing. I unzipped the project files and looked through the assets folder... then looked into Swift 3, Swift 4, and Swift 4.1 versions of multiple states of the app. None seem to have that image. Seems to be missing everywhere.
rickkettner
5 years ago
Nevermind, just saw your comment about not needing it.
rickkettner
5 years ago
Would be nice to have the option to delete our own comments if they become unneeded.
Brian Voong
5 years ago
hudsonpereira
5 years ago
I had to set all my tab bar icons to withRenderingMode .alwaysOriginal. Is there any other way to get the black image instead of the system blue tint? Thanks
Goldor
4 years ago
You can set the tint color using the following code alongside your viewControllers setup for the tab bar: let tabBarTintColor = UIColor.black tabBar.tintColor = tabBarTintColor tabBar.unselectedItemTintColor = tabBarTintColor
adamhaafiz
5 years ago
Rather than for looping through the items, an improvement would be to use a forEach loop: tabBar.items?.forEach { $0.imageInsets = UIEdgeInsets(top: 4, left: 0, bottom: -4, right: 0) } This way, you also don't have to check for optional values beforehand. The ?. takes care of it for us.
landahoy55
4 years ago
Nice!
ekagibran
4 years ago
Nice, here's another: tabBar.items?.forEach({ (item) in item.imageInsets = UIEdgeInsets(top: 4, left: 0, bottom: -4, right: 0) })
ark
4 years ago
Why does the UICollectionView's section header not float at the top of the collection view when you scroll vertically just like UITableView's section header?
Goldor
4 years ago
The default behaviour seems to be for it not to stay on the screen when scrolling. If you wish, you can make it stick by setting the following layout parameter when creating the collection view: let layout = UICollectionViewFlowLayout() layout.sectionHeadersPinToVisibleBounds = true let userProfileController = UserProfileController(collectionViewLayout: layout)
VarunRustomji
4 years ago
If I want to change the first view that loads to userProfileNavController which is last last in the viewControllers array, how would I do that? When I do something like selectedViewController = userProfileNavController , the layout gets distorted.
VarunRustomji
4 years ago
I fixed the issue like this : DispatchQueue.main.async { self.selectedViewController = userProfileNavController } Don't really understand why that is necessary though...
dannyp75
2 years ago
Hi Brian, Was the likes tab left out of this course? I don't see a video directly addressing this tab.
HELP & SUPPORT