iOS开发专题

怎样自定义一个UITabBarController

2017-05-04  本文已影响154人  摸着石头过河_崖边树

前言-从问题开始##

为什么要自定义UITabBarController?
原因:系统的UITabBarController控制器有一定的局限性,如果需求想要加一些动画效果,那么系统实现就有点困难。况且我认为每个developer都应该有自己的一套自定义UI控件,以便于在项目把时间花费在重要的逻辑业务和细节处理上。

怎样自定义UITabBarController?##

方法:模拟系统的UITabBarController
主要结构:


系统的结构图.png
自定义tabBar结构.png

自定义控制器包括:内容View + tabBar(每个item组成)

View的层级结构.png

主要思路:
1、API入口

A、设置子控制器
 @property (nonatomic, strong) NSArray <UIViewController *>*viewControllers;
B、也可以设置每个ViewController的lzb_tabBarItem
@property(nonatomic, strong) LZBTabBarItem *lzb_tabBarItem;

设置子控制器数组

- (void)setViewControllers:(NSArray<UIViewController *> *)viewControllers
{
if(viewControllers.count == 0) return;
//移除之前的
for (UIViewController *viewController in _viewControllers)
{
    //注意:在removeFromParentViewController必须先调用willMoveToParentViewController
    [viewController willMoveToParentViewController:nil];
    [viewController.view removeFromSuperview];
    [viewController removeFromParentViewController];
}
_viewControllers = viewControllers;
NSMutableArray *tabBarItems = [NSMutableArray array];
for (UIViewController *viewController in viewControllers) {
    LZBTabBarItem *tabBarItem = [[LZBTabBarItem alloc] init];
     [tabBarItems addObject:tabBarItem];
     [tabBarItem setTitle:viewController.title];
     viewController.lzb_tabBarController = self;
}
    [self.tabbar setItems:tabBarItems];
}

2、点击事件,通过代理进行事件传递
点击item调用

  - (void)tabbarItemDidSelected:(LZBTabBarItem *)item
{
if(![self.items containsObject:item]) return;
NSInteger index = [self.items indexOfObject:item];
if([self.delegate respondsToSelector:@selector(lzb_tabBar:shouldSelectItemAtIndex:)])
{
    if(![self.delegate lzb_tabBar:self shouldSelectItemAtIndex:index])
        return;
}
self.currentSelectItem = item;
if([self.delegate respondsToSelector:@selector(lzb_tabBar:didSelectItemAtIndex:)])
{
    [self.delegate lzb_tabBar:self didSelectItemAtIndex:index];
   }
 }

控制器成为代理,实现代理方法

 - (BOOL)lzb_tabBar:(LZBTabBar *)tabBar shouldSelectItemAtIndex:(NSInteger)index
{
if (index < 0 || index >= self.viewControllers.count)  return NO;
if([self.delegate respondsToSelector:@selector(lzb_tabBarController:shouldSelectViewController:)])
{
    if(![self.delegate lzb_tabBarController:self shouldSelectViewController:[self.viewControllers objectAtIndex:index]])
        return NO;
}
if(self.selectedViewController == [self.viewControllers objectAtIndex:index])
{
    if([self.selectedViewController isKindOfClass:[UINavigationController class]])
    {
        UINavigationController *selectViewControler = (UINavigationController *)self.selectedViewController;
        //如果不是顶层控制器,就回到顶层
        if(selectViewControler.topViewController != [selectViewControler.viewControllers objectAtIndex:0])
        {
            [selectViewControler popToRootViewControllerAnimated:YES];
        }
    }
    return NO;
}
return YES;    
}
 - (void)lzb_tabBar:(LZBTabBar *)tabBar didSelectItemAtIndex:(NSInteger)index
 {
  if (index < 0 || index >= self.viewControllers.count)  return;
[self setSelectedIndex:index animation:self.isShouldAnimation];
if([self.delegate respondsToSelector:@selector(lzb_tabBarController:didSelectViewController:)])
[self.delegate lzb_tabBarController:self didSelectViewController:[self.viewControllers objectAtIndex:index]];
}

详情请直接下载demo查看:
自定义TabBarViewController-LZBTabbarViewController

怎样使用自定义UITabBarController?##

使用非常简单
1、一定要先设置控制器数组

@property (nonatomic, strong) NSArray <UIViewController *>*viewControllers;

2、可以单独设置每个子控制器的的item

 #pragma mark - config 文字样式
/**
 *  文字内容
 */
 @property (nonatomic, copy) NSString *title;
/**
 *  文字偏移量
 */
@property (nonatomic, assign) UIOffset titleOffest;
/**
 *  未选中文字属性描述:颜色、字体
 */
@property (nonatomic, strong) NSDictionary *unselectTitleAttributes;
/**
 *  选中文字属性描述:颜色、字体
 */
@property (nonatomic, strong) NSDictionary *selectTitleAttributes;
#pragma mark - config 图片样式
/**
 *  选中图片
 */
@property (nonatomic, strong) UIImage *selectImage;
/**
 *  未选中图片
 */
@property (nonatomic, strong) UIImage *unSelectImage;
/**
 *  图片偏移量
 */
@property (nonatomic, assign) UIOffset imageOffest;
/**
 设置选中和未选中的图片
 @param selectImage 选中图片
 @param unSelectImage 未选中图片
 */
- (void)setSelectImage:(UIImage *)selectImage unselectImage:(UIImage *)unSelectImage;
#pragma mark - config 背景View图片样式
/**
 *  选中背景图片
 */
@property (nonatomic, strong) UIImage *selectBackgroundImage;
/**
 *  未选中背景图片
 */
 @property (nonatomic, strong) UIImage *unselectBackgroundImage;
/**
设置背景选中和未选中的图片
@param selectedImage 选中图片
@param unselectedImage 未选中图片
 */
- (void)setBackgroundSelectedImage:(UIImage *)selectedImage unselectedImage:(UIImage *)unselectedImage;
 #pragma mark - config  角标样式
/**
 *  角标文字
 */
 @property (nonatomic, copy) NSString *badgeValue;
/**
 *  角标背景图片
 */
@property (nonatomic, strong)  UIImage *badgeBackgroundImage;
/**
 *  角标背景颜色
 */
@property (nonatomic, strong) UIColor *badgeBackgroundColor;
/**
  *  角标文字颜色
  */
@property (nonatomic, strong) UIColor *badgeTextColor;
/**
 *  角标文字字体
 */
@property (nonatomic, strong) UIFont *badgeTextFont;
/**
  * 角标偏移量
  */
 @property (nonatomic, assign) UIOffset badgeOffset;
/**
  * 角标背景偏移量
  */
@property (nonatomic, assign) UIOffset badgeBackgroundOffset;

效果展示##

LZBTabBarContoller.gif

详情代码请直接下载demo查看:
自定义TabBarViewController-LZBTabbarViewController

最后赠言###

star 是对我们程序猿最大的鼓励

上一篇下一篇

猜你喜欢

热点阅读