FXCustomTabBarController 中文版
A category of UITabBarController with various custom styles for you to achieve any kinds of the tabBar you like with less work!
Custom Styles
Not only can you create TabBarController **`programmatically`**, but also can use **`StoryBoard`** to set up TabBarController, and tabBarItem's title as well as images!- CenterItem(Image、HighlightedImage、Title)
- UITabBar(Height、Background)
- TabBarItem(OriginalImage、TitleColor、SelectedTitleColor、TitleFontSize)
- NormalBadge(BackgroundColor、ValueColor、FontSize)
- TinyBadge(Color、Radius)
- Slider(Color) that will silde to the item you clicked.You can also custom its spring damping value
- etc..
Preview
Installation
For Objective-C Project
Cocoapods(iOS7+)
-
Add these lines below to your Podfile
platform :ios, '7.0' pod 'FXCustomTabBarController' -
Install the pod by running
pod install
Manually(iOS6+ In theory, No test for iOS6)
Drag FXCustomTabBarController document to your project
For Swift Project
Cocoapods(iOS8+)
-
Add these lines below to your Podfile
platform :ios, '8.0' use_frameworks! pod 'FXCustomTabBarController' -
pod install
-
import FXCustomTabBarController
Manually(iOS7+)
- Drag
FXCustomTabBarControllerdocument to your project - Add ProjectName-Bridging-Header.h also import UITabBarController+FXCustomTabBar.h
How to use it
General
- Create UITabBarController and set its viewControllers with each UITabBarItem by Storyboard or Programmatically way
- Set up centerItem or tabBar's backgroundImage by calling the methods declared in the header file of UITabBarController+FXCustomTabBar category
- Set up other styles in FXTabBarAppearanceConfigs header file
UITabBarController+FXCustomTabBar
Make sure you have already #import UITabBarController+FXCustomTabBar.h
- (void)fx_setupCenterItemWithImage:(UIImage *)image;
- (void)fx_setupCenterItemWithImage:(UIImage *)image title:(NSString *)title;
- (void)fx_setupCenterItemWithImage:(UIImage *)image highligtedImage:(UIImage *)highlightedImage;
- (void)fx_setupCenterItemWithImage:(UIImage *)image highligtedImage:(UIImage *)highlightedImage title:(NSString *)title;
- (void)fx_setCenterItemClickedEventHandler:(FXEventHandler)handler;
FXTabBarAppearanceConfigs
// the height of view for each childViewController of UITabBarController will vary with the tabBar height
#define FX_TabBarHeight 40
// the offset for the position(center) of centerItem in Y-Asix. Negetive num will make centerItem move up; otherwise, move down
//#define FX_CenterItemYAsixOffset 0
// the offset for the postion of badge(also tinyBadge) in X-Asix. Negetive num will make badge move left; otherwise, move right
#define FX_BadgeXAsixOffset -4
// the offset for the postion of badge(also tinyBadge) in Y-Asix. Negetive num will make badge move up; otherwise, move down
#define FX_BadgeYAsixOffset 2
// item title color for UIControlStateNormal(hex number of rgb color)
#define FX_ItemTitleColor UIColorFromHexRGB(0xC0C0C0)
// selected item title color for UIControlStateSelected(hex number of rgb color)
#define FX_ItemSelectedTitleColor UIColorFromHexRGB(0x000000)
// badge background color(hex number of rgb color)
#define FX_BadgeBackgroundColor UIColorFromHexRGB(0xFFA500)
// badge value color(hex number of rgb color)
#define FX_BadgeValueColor UIColorFromHexRGB(0x6B8E23)
// tiny badge color(hex number of rgb color), default is redColor
#define FX_TinyBadgeColor UIColorFromHexRGB(0xFFA500)
// slider visibility(set false won't create slider for you)
#define FX_SliderVisible false
// slider color(hex number of rgb color), default is lightGrayColor
#define FX_SliderColor UIColorFromHexRGB(0x87CEFA)
// slider spring damping: To smoothly decelerate the animation without oscillation, use a value of 1. Employ a damping ratio closer to zero to increase oscillation.
#define FX_SliderDamping 0.66
// remove tabBar top shadow if this value true; otherwise, keep system style
#define FX_RemoveTabBarTopShadow true
#define FX_ItemTitleFontSize 10
// the ratio of image's height to item's. (0 ~ 1)
#define FX_ItemImageHeightRatio 0.7
#define FX_ItemBadgeFontSize 13
// horizontal padding
#define FX_ItemBadgeHPadding 4
// radius of tiny badge(dot)
#define FX_TinyBadgeRadius 3
Demo
There are three demos in all. Two of them(ProgrammaticallyDemo、StoryBoardDemo)are Objective-C projects. The remaining one, SwiftDemo, is Swift project.
Xcode6.4 Issue For StoryBoard
For Xcode6.4,You might meet this issue when setting seletedImage for TabBarItem by StoryBoard:
CUICatalog: Invalid asset name supplied: (null)
For now, I have tested in Xcode6.4 and Xcode7+, and this issue only appears in Xcode6.4
Here is the solution:
stackoverflow
FXCustomTabBarController
一个包含多种自定义风格的UITabBarController类簇, 用更少的代码去实现各种你喜欢的UITabBar自定义风格
不仅可以通过`代码`创建UITabBarController, 还支持使用`Storyboard`创建UITabBarController, 及设置其tabBarItem的标题、图片(选中状态的图片) 以实现自定义TabBar.- CenterItem(Image、HighlightedImage、Title)
- UITabBar(高度、背景图片)
- TabBarItem(原图、TitleColor、SelectedTitleColor、TitleFontSize)
- 普通的Badge(BackgroundColor、ValueColor、FontSize)
- 小圆点(Color、Radius)
- 滑块(Color), 点哪滑哪, 效果可看Demo
- 等等..
安装方式
Objective-C 项目
Cocoapods(iOS7+)
-
在Podfile中添加如下信息
platform :ios, '7.0' pod 'FXCustomTabBarController' -
项目目录中运行终端指令
pod install
Manually(理论上支持iOS6+, iOS6无测试)
拖动 FXCustomTabBarController 文件夹到你的项目中
Swift 项目
Cocoapods(iOS8+)
-
在Podfile中添加如下信息
platform :ios, '8.0' use_frameworks! pod 'FXCustomTabBarController' -
pod install
-
import FXCustomTabBarController
Manually(iOS7+)
- 拖动
FXCustomTabBarController文件夹到你的项目中 - 添加 ProjectName-Bridging-Header.h 文件(Xcode可能会帮助你创建桥梁文件, 否则要自己创建并添加关联了), 同时在其中 import UITabBarController+FXCustomTabBar.h
如何使用
总体分这三步
- 通过代码或者Stroyboard创建好UITabBarController
- 在通过类簇提供的方法设置CenterItem、CenterItem的点击事件handlerBlock或者TabBar背景图片
- 在FXTabBarAppearanceConfigs头文件中设置其他自定义样式的参数
UITabBarController+FXCustomTabBar 类簇的方法
要先#import UITabBarController+FXCustomTabBar.h噢
- (void)fx_setupCenterItemWithImage:(UIImage *)image;
- (void)fx_setupCenterItemWithImage:(UIImage *)image title:(NSString *)title;
- (void)fx_setupCenterItemWithImage:(UIImage *)image highligtedImage:(UIImage *)highlightedImage;
- (void)fx_setupCenterItemWithImage:(UIImage *)image highligtedImage:(UIImage *)highlightedImage title:(NSString *)title;
- (void)fx_setCenterItemClickedEventHandler:(FXEventHandler)handler;
FXTabBarAppearanceConfigs 各种参数配置 头文件
// the height of view for each childViewController of UITabBarController will vary with the tabBar height
#define FX_TabBarHeight 40
// centerItem在Y轴上的偏移量
//#define FX_CenterItemYAsixOffset 0
// badge在X轴上的偏移量
#define FX_BadgeXAsixOffset -4
// badge在Y轴上的偏移量
#define FX_BadgeYAsixOffset 2
// TabBarItem标题颜色(请使用十六进制数值)
#define FX_ItemTitleColor UIColorFromHexRGB(0xC0C0C0)
// TabBarItem选中状态下 标题的颜色
#define FX_ItemSelectedTitleColor UIColorFromHexRGB(0x000000)
// badge背景颜色
#define FX_BadgeBackgroundColor UIColorFromHexRGB(0xFFA500)
// badge显示文本 的颜色
#define FX_BadgeValueColor UIColorFromHexRGB(0x6B8E23)
// 小圆点颜色
#define FX_TinyBadgeColor UIColorFromHexRGB(0xFFA500)
// 滑块是否可见 (设置为false或注释掉下边这个宏 都不会自动创建slider)
#define FX_SliderVisible false
// 滑块颜色
#define FX_SliderColor UIColorFromHexRGB(0x87CEFA)
// 滑块阻尼系数(0~1): 数值越接近1最后减速时的震荡就越小, 反之越接近0越大, 具体可看苹果文档
#define FX_SliderDamping 0.66
// 移除TabBar顶部阴影
#define FX_RemoveTabBarTopShadow true
// TabBarItem标题字体大小
#define FX_ItemTitleFontSize 10
// TabBarItem中图片高度所占的比例.(图片高度/item高度) (0 ~ 1)
#define FX_ItemImageHeightRatio 0.7
// badge显示文字 的字体大小
#define FX_ItemBadgeFontSize 13
// TabBarItem水平内间距
#define FX_ItemBadgeHPadding 4
// 小圆点的半径
#define FX_TinyBadgeRadius 3