怎样自定义一个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 是对我们程序猿最大的鼓励