I am developing an application that requires a scrolling UITabBarController. The customary 5 tab items max with the 5th being the More.. tab just won't do. I have found some pretty great third party classes such as https://github.com/Marxon13/M13InfiniteTabBar and they are great and have the functionality I would like but still, things aren't perfect. When I rotate my device to landscape things become glitchy.
Basically, I am fed up and want to create my own custom UITabBarController with scrolling..how would I go about doing this? I understand I would most likely put a UITabBar within UIScrollView but I am lost without a detailed tutorial of sorts..
Any help would be greatly appreciated! Thanks!!
The way I would approach this is to avoid modifying the UITabBar, since it is highly specialized, and create a UIViewController subclass that will provide this functionality for you. This view controller should have a container view (take a look at this Apple documentation for more detailed information) that will have each child view controller's content view.
For the actual tab bar itself, you have a few options depending on what you similar you want it to the standard UITabBar.
You could have a super basic tab bar that consists of a UIScrollView with standard UIButtons that change/load the correct content view controller. Creating the tab bar would be then easy, simply add the buttons to the scroll view inside some type of loop (you could have the x positions be a multiple of the tab index to make positioning easier). UIButtons have support for a selected button state that you can use. You can change the scroll view's background.
You could have a fancy tab bar which is constructed essentially like the above, but by having a custom UIButton subclass instead of a standard UIButton. This will allow you to implement a more intricate design (i.e. with and more customized touch handling.
Tips:
Use [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] to have your tab images tinted like the standard tabs when selected.
Design the basics of your custom view controller in your storyboard. It is really easy to add the child container view and the scroll view this way.
Hope this helps!
Related
We're creating an application with a design concept similar to Snapchat. On the base level, we have three Views that are supposed to be horizontally swipeable, with the camera view being in the middle.
The Views are also supposed to be selectable via a Tab Bar. While the views are being swiped, the transition should also manipulate the color of the Tab Bar aswell as the size of some elements on the Tab Bar, similar to how Snapchat does it:
Our UI Designer made a mockup for our specific application in Adobe XD:
The button has been made independent from the Tab Bar, as it is supposed to do some interaction with the controller beneath, even if the Tab Bar disappears.
I've been trying to figure out how to best implement a navigation like this for about 10 hours now. I've come as far as trying to create my own AnimationController for animating between Tabs coupled with a custom InteractionController, but those have been unsafe and buggy at best, and I still haven't figured out how to animate the button at the same time as the views.
Has anyone tried to implement a design similar to this and succeeded? Could you lead me in the right direction of which methodology to use to achieve a design like this?
Thanks in advance everyone.
Is it possible create such element on base UITabBarController?
If not, how do you advise create it. Thank you,
Is it possible create such element on base UITabBarController?
No, you cannot add your own controls to a tab bar. The tabs in a tab bar should be used as they're intended, i.e. to switch between several different view controllers.
If not, how do you advise create it.
I recommend that you don't try to create something that both switches between view controllers and also does other things. That said, if you want to add controls that work differently from tabs in a bar at the top or bottom of the window, UIToolbar is the right class to use. You might be able to create a subclass of UIBarButtonItem that has radio-button functionality similar to what UISegmentedControl offers, and you could then use that with UIToolbar.
I do not think you can easily add a UISegmentControl to a UITabBarController. If you check Apple Documentation UITabBarController accepts UITabBarItems which can be initialize with either an image/String or with one of the preset cases.
You could create your own TabBar and then add a UISegment Control onto that, but if I was you I would use the normal UITabBarController and make the two buttons one next to the other with images that makes it look like a segment control to the user.
The issue with this approach that the TabBar is not supposed to be there for you to have more than one item selected at a time. So you could not have notes and All selected at once.
It might be easier for you to add the UISegmentControl onto a UINavigationController at the top of your app, and then use the TabBar normally.
That is what I would do in any case.
I'm building an instant messenger app in iOS. In particular I'm implementing the UI for a conversation in the most typical way, that is placing an input bar at the bottom of the view (UICollectionView to be clear) that scrolls above the keyboard.
Now, I'm wondering if I should implement this view as a UIToolbar with UIBarButtonItems instead of a custom UIView with UIButtons. What are the advantages of a UIToolbar?
I don't think there is much difference other than convenience. With a UIToolbar you get the following:
UIBarButton items are arguably simpler to add to a tool bar and the
layout is automatic, whereas it is a bit more complicated adding
buttons to a view.
You can set hidesBottomBarWhenPushed on the view controllers to
hide the bar when a view controller is pushed to the nav stack.
Looks more familiar to other apps, including Apple's own apps.
If you use a UIView with buttons you have more flexibility in the appearance but you have to do a bit more work, but other than that I can't really see much difference.
UIToolbar will provide automatic placing of your buttons, saving you from pain of placing those buttons. It was designed specifically for this reason.
I'm looking for a way to use HMSegmentedControl inside a UINavigationController, using the tabs to change the subview. That is clicking on a tab should display the corresponding view below the UINavigationBar and the HMSegmentedControl tabs. If possible, using as much as Storyboard features as possible.
I have made several attempts, by inserting the views as outlets. The further I got is to have it running by using when detecting a tab selection change (and removing the other subviews obviously):
insertSubview:(UIView *) belowSubview:(UIView *)
but it cuts the upper part of the subview (the one overlapping with the HMSegmentedControl tabs bar) and also makes the non-initial views not behaving well in terms of autosizing (for instance when rotating the screen).
Are there best practices for implementing such custom upper tab bar controllers inside a navigation controller (and not the opposite because of another dependency I am using)? Or better yet is there an easy way to do what I am trying to do using Storyboards?
I think it is better to juggle controllers than views.
I would have several controllers with identical navigation bars. That is an identical HMSegmentedControl in their bars.
As the user changes the selected segment you switch controllers and make sure to adjust both the exiting and entering controller's segment control state accordingly.
You could also try to have all navigationItems to point to the same HMSegmentedControl instance and see if it works.
I can reproduce the following navigation bar for one view:
However, once I move to the next view after clicking a button, I lose the top two rightmost icons(Search, Profile). I understand that setting up navigation item from a storyboard is usually per view. I can replicate those items for each view but I was wondering if there was a better way to do it once.
Is there a tutorial that explains how to maintain a custom navigation bar across many views?
You need to set it up for every view. You should probably create a superclass and implement it there, so you only need to actually write the code once.