Latest 1.2.0
Homepage https://github.com/spirit-jsb/JSTabBarController
License MIT
Platforms ios 8.0
Authors

Version
License
Platform

JSTabBarController: 自定义集成 TabBarController

导入方法

pod 'JSTabBarController', '~> 1.2.0'

使用方法

头文件的导入

#import "JSTabBarController.h"

基础使用方法

初始化 TabBarController

- (JSTabBarController *)tabBarController {
    if (_tabBarController == nil) {
        JSTabBarController *tabBarController = [JSTabBarController tabBarControllerWithViewControllers:self.viewControllers
                                                                                 tabBarItemsAttributes:self.tabBarItemsAttributesForController];
        [self customizeTabBarAppearance:tabBarController];

        [self setupNavigationBarAppearance];

        _tabBarController = tabBarController;
    }

    return _tabBarController;
}

设置 ViewControllersTabBarItemsAttributes

- (NSArray *)viewControllers {
    FirstViewController *firstViewController = [[FirstViewController alloc] init];
    UIViewController *firstNavigationController = [[BaseNavigationController alloc] initWithRootViewController:firstViewController];

    SecondViewController *secondViewController = [[SecondViewController alloc] init];
    UIViewController *secondNavigationController = [[BaseNavigationController alloc] initWithRootViewController:secondViewController];

    ...

    /**
    以下两行代码目的在于手动设置让 `TabBarItem` 只显示图标,不显示文字,并让图标垂直居中。
    等效于在 `- tabBarItemsAttributesForController` 方法中不传 `JSTabBarItemTitle` 字段
    更推荐后一种做法
    */

    // tabBarController.imageInsets = UIEdgeInsetsMake(4.5, 0, -4.5, 0);
    // tabBarController.titlePositionAdjustment = UIOffsetMake(0, MAXFLOAT);

    NSArray *viewControllers = @[
                                firstNavigationController,
                                secondNavigationController,
                                ...
                                ];

    return viewControllers;
}
- (NSArray *)tabBarItemsAttributesForController {
    NSDictionary *firstTabBarItemsAttributes = @{
                                                JSTabBarItemTitle:@"firstTabBarItemTitle",
                                                JSTabBarItemImage:@"firstTabBarItemImage",
                                                JSTabBarItemSelectedImage:@"firstTabBarItemSelectedImage",
                                                };

    NSDictionary *secondTabBarItemsAttributes = @{
                                                 JSTabBarItemTitle:@"secondTabBarItemTitle",
                                                 JSTabBarItemImage:@"secondTabBarItemImage",
                                                 JSTabBarItemSelectedImage:@"secondTabBarItemSelectedImage",
                                                 };

    ...

    NSArray *tabBarItemsAttributes = @[
                                      firstTabBarItemsAttributes,
                                      secondTabBarItemsAttributes,
                                      ...
                                      ];

    return tabBarItemsAttributes;
}

更多 TabBar 自定义设置

- (void)customizeTabBarAppearance:(JSTabBarController *)tabBarController {
    // 自定义 TabBar 高度
    tabBarController.tabBarHeight = 44.f;

    // 普通状态下的文字属性
    NSMutableDictionary *normalAttrs = [NSMutableDictionary dictionary];
    normalAttrs[NSForegroundColorAttributeName] = [UIColor colorWithRed:0.62 green:0.62 blue:0.62 alpha:1.00];

    // 选中状态下的文字属性
    NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
    selectedAttrs[NSForegroundColorAttributeName] = [UIColor colorWithRed:0.44 green:0.70 blue:0.90 alpha:1.00];

    // 设置文字属性
    UITabBarItem *tabBar = [UITabBarItem appearance];

    [tabBar setTitleTextAttributes:normalAttrs
                          forState:UIControlStateNormal]; 

    [tabBar setTitleTextAttributes:selectedAttrs
                          forState:UIControlStateSelected];

    // TabBarItem 选中后的背景颜色
    [self customizeTabBarSelectionIndicatorImage];

    // 如果你的 App 需要支持横竖屏, 请使用该方法
    [self updateTabBarCustomizationWhenTabBarItemWidthDidUpdate];

    // 设置阴影图片
    [[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]];
    [[UITabBar appearance] setBackgroundColor:[UIColor whiteColor]];
    [[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"tapbar_top_line"]];

    // 设置背景图片
    UITabBar *tabBarAppearance = [UITabBar appearance];
    [tabBarAppearance setBackgroundImage:[UIImage imageNamed:@"TabBarBackground"]];

    // 去除 TabBar 自带的顶部阴影
    [[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
}

支持横竖屏

- (void)updateTabBarCustomizationWhenTabBarItemWidthDidUpdate {
    void (^deviceOrientationDidChangeBlock)(NSNotification *) = ^(NSNotification *notification) {
        UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];

        if ((orientation == UIDeviceOrientationLandscapeLeft) || (orientation == UIDeviceOrientationLandscapeRight)) {
            NSLog(@"屏幕向左横置、屏幕向右横置");
        }
        else if (orientation == UIDeviceOrientationPortrait) {
            NSLog(@"屏幕直立");
        }

        [self customizeTabBarSelectionIndicatorImage];
    };

    [[NSNotificationCenter defaultCenter] addObserverForName:JSTabBarItemWidthDidChangeNotification
                                                      object:nil
                                                       queue:[NSOperationQueue mainQueue]
                                                  usingBlock:deviceOrientationDidChangeBlock];
}

- (void)customizeTabBarSelectionIndicatorImage {
    UITabBarController *tabBarController = [self js_tabBarController] ?: [[UITabBarController alloc] init];

    CGFloat tabBarHeight = tabBarController.tabBar.frame.size.height;

    CGSize selectionIndicatorImageSize = CGSizeMake(JSTabBarItemWidth, tabBarHeight);

    UITabBar *tabBar = [self js_tabBarController].tabBar ?: [UITabBar appearance];

    [tabBar setSelectionIndicatorImage: [[self class] imageWithColor:[UIColor redColor]
                                                                size:selectionIndicatorImageSize]];
}

设定 NavigationBar 样式

- (void) setupNavigationBarAppearance {
    UINavigationBar *navigationBarAppearance = [UINavigationBar appearance];

    NSDictionary *textAttributes = @{
                                     NSFontAttributeName: [UIFont systemFontOfSize:18],
                                     NSForegroundColorAttributeName: [UIColor whiteColor]
                                     };

    [navigationBarAppearance setBackgroundImage:[UIImage imageNamed:@"NavigationBarShadow"]
                                  forBarMetrics:UIBarMetricsDefault];

    [navigationBarAppearance setShadowImage:[[UIImage alloc] init]];

    [navigationBarAppearance setTitleTextAttributes:textAttributes];
}

设置 PlusButton 的样式

#pragma mark 生命周期
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];

    if (self) {
        self.titleLabel.textAlignment = NSTextAlignmentCenter;

        self.adjustsImageWhenHighlighted = NO;
    }

    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];

    // 控件大小, 间距大小
    // 注意: 一定要根据项目中的图片去调整下面的 0.7 和 0.9, Demo 之所以这么设置, 因为 Demo 中的 plusButton 的 icon 不是正方形
    CGFloat const imageViewEdgeWidth   = self.bounds.size.width * 0.7;
    CGFloat const imageViewEdgeHeight  = imageViewEdgeWidth * 0.9;

    CGFloat const centerOfView    = self.bounds.size.width * 0.5;
    CGFloat const labelLineHeight = self.titleLabel.font.lineHeight;
    CGFloat const verticalMargin  = (self.bounds.size.height - labelLineHeight - imageViewEdgeHeight) * 0.5;

    // imageView 和 titleLabel 中心的 Y 值
    CGFloat const centerOfImageView  = verticalMargin + imageViewEdgeHeight * 0.5;
    CGFloat const centerOfTitleLabel = imageViewEdgeHeight  + verticalMargin * 2 + labelLineHeight * 0.5 + 5;

    //imageView position 位置
    self.imageView.bounds = CGRectMake(0, 0, imageViewEdgeWidth, imageViewEdgeHeight);
    self.imageView.center = CGPointMake(centerOfView, centerOfImageView);

    //title position 位置
    self.titleLabel.bounds = CGRectMake(0, 0, self.bounds.size.width, labelLineHeight);
    self.titleLabel.center = CGPointMake(centerOfView, centerOfTitleLabel);
}

#pragma mark JSPlusButtonSubclassing Methods
+ (id)plusButton {
    PlusButton *button = [[PlusButton alloc] init];

    UIImage *buttonImage = [UIImage imageNamed:@"post_normal"];
    ;

    ;
     forState:UIControlStateNormal];

    ;
     forState:UIControlStateSelected];

    button.titleLabel.font = [UIFont systemFontOfSize:10.0f];
    ;

    // 或者通过如下方法设置 frame
    //    button.frame = CGRectMake(0.0, 0.0, 250, 100);
    //    button.backgroundColor = [UIColor redColor];

    //  如果使用 '+ plusChildViewController', 无需设置 Target - Action
    ;

    return button;
}

+ (CGFloat)multiplierOfTabBarHeight:(CGFloat)tabBarHeight {
    return  0.5;
}

+ (CGFloat)constantOfPlusButtonCenterYOffsetForTabBarHeight:(CGFloat)tabBarHeight {
    return  -10;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法中调用 [PlusButton registerPlusButton]; 注册 PlusButton

作者

spirit-jsb, [email protected]

许可协议

JSTabBarController 遵循 MIT 开源许可证, 详情请查看 LICENSE 文件

Latest podspec

{
    "name": "JSTabBarController",
    "version": "1.2.0",
    "summary": "JSTabBarController: u81eau5b9au4e49u96c6u6210 TabBarController",
    "homepage": "https://github.com/spirit-jsb/JSTabBarController",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "spirit-jsb": "[email protected]"
    },
    "source": {
        "git": "https://github.com/spirit-jsb/JSTabBarController.git",
        "tag": "1.2.0"
    },
    "platforms": {
        "ios": "8.0"
    },
    "source_files": "JSTabBarController/Classes/**/*.{h,m}"
}

Pin It on Pinterest

Share This