可折叠iOS标签栏控制器:FoldingTabBar.iOS
F可折叠iOS标签栏控制器
Made in Yalantis.
Inspired by this project on Dribbble
Also, read how it was done in our blog
Requirements
iOS 8.0
Installation
CocoaPods
pod 'FoldingTabBar', '~> 1.0.0'
Manual Installation
Alternatively you can directly add all the source files from FoldingTabBar folder to your project.
- Download the latest code version or add the repository as a git submodule to your git-tracked project.
- Open your project in Xcode, then drag and drop all the folder directories in FoldingTabBar folder onto your project (use the "Product Navigator view"). Make sure to select Copy items when asked if you extracted the code archive outside of your project.
Introduction
YALFoldingTabBarController
YALFoldingTabBarControlleris a subclass ofUITabBarControllerwith custom animatingYALFoldingTabBar.
YALFoldingTabBar
YALFoldingTabBar is a subclass of a standard UIView. We wanted to make this component expand and contract in response to a user tapping. When the component is closed you can only see a central button (“+”). When tapping on it, our custom Tab Bar expands letting other tabBarItems appear, so that the user can switch the controllers.
Each separate tabBarItem can have two additional buttons on the left and right. These buttons can be used to let a user interact with a selected screen on the YALFoldingTabBarController without even having to leave it.
YALTabBarItem
YALTabBarItemis a model to configure your tab bar items with images.
Usage
Option 1: The simplest way is to useYALFoldingTabBarControlleras it is. You can also subclass it if you indend to change the default behaviour.
Option 2: You can write your own implementation ofUITabBarControllerand useYALFoldingTabBaror its subclass.
Here is an instruction of how to useYALFoldingTabBarControllerin the Storyboard.
- Add nativeUITabBarControllerto the storyboard, establish relationships with its view controllers.
- ChooseYALFoldingTabBarControlleras custom class forUITabBarController.
- In AppDelegate method take out an instance ofYALFoldingTabBarControllerfrom the window.rootViewController and supply it with images for the left and right tabBarItems respectively. Also you can add your own image for the center button ofYALFoldingTabBar.
YALFoldingTabBarController *tabBarController = (YALFoldingTabBarController *) self.window.rootViewController; //prepare leftBarItems YALTabBarItem *item1 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"nearby_icon"] leftItemImage:nil rightItemImage:nil]; YALTabBarItem *item2 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"profile_icon"] leftItemImage:[UIImage imageNamed:@"edit_icon"] rightItemImage:nil]; tabBarController.leftBarItems = @[item1, item2]; //prepare rightBarItems YALTabBarItem *item3 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"chats_icon"] leftItemImage:[UIImage imageNamed:@"search_icon"] rightItemImage:[UIImage imageNamed:@"new_chat_icon"]]; YALTabBarItem *item4 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"settings_icon"] leftItemImage:nil rightItemImage:nil];
If you want to handle touches on extra tabBarItems importYALTabBarInteractingprotocol to the subclass of the properUIVIewControllerand implement these methods:
- (void)extraLeftItemDidPressed; - (void)extraRightItemDidPressed;
If you want to observe contracting and expanding animation states inYALFoldingTabBarthe following methods ofYALTabBarInteractingprotocol can be implemented:
- (void)tabBarViewWillCollapse; - (void)tabBarViewWillExpand; - (void)tabBarViewDidCollapsed; - (void)tabBarViewDidExpanded;