可折叠iOS标签栏控制器:FoldingTabBar.iOS

jopen 9年前

Preview

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.

  1. Download the latest code version or add the repository as a git submodule to your git-tracked project.
  2. 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.

  1. Add nativeUITabBarControllerto the storyboard, establish relationships with its view controllers.
  2. ChooseYALFoldingTabBarControlleras custom class forUITabBarController.
  3. 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;

项目主页:http://www.open-open.com/lib/view/home/1428456818572