FXCustomTabBarController中文版

一个 UITabBarController 分类，具有各种自定义样式，让您以更少的劳动实现任何你喜欢的 tabBar!

---

1. 自定义样式
2. 预览
3. 安装
4. 如何使用它
5. 演示
6. Xcode6.4 故事板问题

自定义样式

您可以不仅以编程方式创建 TabBarController，还可以使用 故事板 来设置 TabBarController，以及 tabBarItem 的标题和图片！

• 中心项（Image、HighlightedImage、Title）
• UITabBar（Height、Background）
• TabBarItem（OriginalImage、TitleColor、SelectedTitleColor、TitleFontSize）
• 普通徽章（BackgroundColor、ValueColor、FontSize）
• 小徽章（Color、Radius）
• 滑块（Color）将滑动到你点击的项目。您也可以自定义其弹簧阻尼值
• 等等。

预览

安装

对于 Objective-C 项目

手动（iOS6+ 理论上，没有对 iOS6 的测试）

将 FXCustomTabBarController 文档拖动到您的项目中

对于 Swift 项目

手动（iOS7+）

1. 将 FXCustomTabBarController 文档拖动到您的项目中
2. 添加 ProjectName-Bridging-Header.h 并导入 UITabBarController+FXCustomTabBar.h

如何使用它

常规

1. 使用 Storyboard 或编程方式创建 UITabBarController 并设置其每个 UITabBarItem 的 viewControllers
2. 通过调用 UITabBarController+FXCustomTabBar 分类中声明的函数来设置中心项或 tabBar 的 backgroundImage
3. 在 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

// 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

示例

总共有三个示例。其中两个（程序化示例、Storyboard示例）是Objective-C项目。剩下的一个，Swift示例，是Swift项目。

Xcode6.4 对 Storyboard 的问题

在 Xcode6.4 中，当通过 Storyboard 设置 TabBarItem 的选中状态图片时，可能会遇到这个问题

CUICatalog: 提供的资产名称无效: (null)

目前，我已经在 Xcode6.4 和 Xcode7+ 中进行了测试，这个问题仅在 Xcode6.4 中出现

以下是解决方案：stackoverflow

FXCustomTabBarController

一个包含多种自定义样式的UITabBarController类簇，用更少的代码实现各种您喜欢的UITabBar

---

1. 自定义风格
2. 图片预览
3. 安装方式
4. 如何使用
5. 示例
6. XCode6.4中通过StoryBoard设置TabBarItem选中状态图片的方法

自定义风格

不仅可以通过代码创建UITabBarController，还支持使用Storyboard创建UITabBarController，并设置其tabBarItem的标题、图片（选中状态的图片）以实现你自己的风格。

• 中心项（Image、HighlightedImage、Title）
• UITabBar（高度、背景图片）
• TabBarItem（原图、TitleColor、SelectedTitleColor、TitleFontSize）
• 普通的Badge（BackgroundColor、ValueColor、FontSize）
• 小圆点（Color、Radius）
• 滑块（Color），点哪滑哪，效果可看示例
• 等等...

安装方式

Objective-C 项目

手动（理论上支持iOS6+, iOS6未测试）

将 FXCustomTabBarController 文件夹拖动到您的项目中

Swift 项目

手动(iOS7+)

1. 将 FXCustomTabBarController 文件夹拖动到您的项目中
2. 添加 ProjectName-Bridging-Header.h 文件（Xcode可能会帮助您创建桥梁文件，否则需要自己创建并添加关联），同时在其中导入 UITabBarController+FXCustomTabBar.h

如何使用

总体分这三步

1. 通过代码或Storyboard创建好UITabBarController
2. 通过类簇提供的方法设置CenterItem、CenterItem的点击事件handlerBlock或TabBar背景图片
3. 在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