iOS-UITabBarController详细总结

一、UITabBarController以其相关控件之间的关系

@interface UITabBarController : UIViewController
@property(nonatomic,readonly) UITabBar *tabBar;

@interface UITabBar : UIView
@property(nullable, nonatomic, copy) NSArray<UITabBarItem *> *items;

@interface UITabBarItem : UIBarItem 
@property(nullable, nonatomic,strong) UIImage *selectedImage;
@property(nullable, nonatomic, copy) NSString *badgeValue;
  • UIBarItem
    一个可以放置在Bar之上的所有小控件类的抽象类,可以设置标题,图片等
  • UITabBarItem
    继承UIBarItem,增加了selectedunselected时不同状态以及badgeValue等属性,相当于放在TabBar上的特殊“button
  • UITabBar
    NavigaitonBar就是底部的选择栏 主要对UITabBarItem进行管理 并负责展示底部选择栏的外观背景
  • UITabBarController
    包含了viewcontrollers、tabBar等

关系综述

1、UITabBarController继承UIViewController,是一个Container
2、UITabBarController拥有一个readonlyTabBarTabBar拥有一到多个TabBarItem
3、每一个TabBarItem需要关联一个UIViewController
这里可以参考IOS-UINavigationController详解关于UINavigationController等相关控件之间的关系综述,UITabBarControllerUINavigationController相似。

2、UITabBarController及其相关控件的属性和方法

1.UITabBarItem

UITabBarItem时一个抽象类,主要负责设置底部每个Item的文字和图片等属性。

typedef NS_ENUM(NSInteger, UITabBarSystemItem) {
    UITabBarSystemItemMore,
    UITabBarSystemItemFavorites,
    UITabBarSystemItemFeatured,
    UITabBarSystemItemTopRated,
    UITabBarSystemItemRecents,
    UITabBarSystemItemContacts,
    UITabBarSystemItemHistory,
    UITabBarSystemItemBookmarks,
    UITabBarSystemItemSearch,
    UITabBarSystemItemDownloads,
    UITabBarSystemItemMostRecent,
    UITabBarSystemItemMostViewed,
};
NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarItem : UIBarItem 
//初始化方法
- (instancetype)init;
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder;
- (instancetype)initWithTitle:(nullable NSString *)title image:(nullable UIImage *)image tag:(NSInteger)tag;
- (instancetype)initWithTitle:(nullable NSString *)title image:(nullable UIImage *)image selectedImage:(nullable UIImage *)selectedImage NS_AVAILABLE_IOS(7_0);
- (instancetype)initWithTabBarSystemItem:(UITabBarSystemItem)systemItem tag:(NSInteger)tag;

//选中的图片
@property(nullable, nonatomic,strong) UIImage *selectedImage NS_AVAILABLE_IOS(7_0);
//角标
@property(nullable, nonatomic, copy) NSString *badgeValue;

//_____________________________________________IOS7废除的方法(忽略)______________________________________________________
- (void)setFinishedSelectedImage:(nullable UIImage *)selectedImage withFinishedUnselectedImage:(nullable UIImage *)unselectedImage NS_DEPRECATED_IOS(5_0,7_0);
- (nullable UIImage *)finishedSelectedImage NS_DEPRECATED_IOS(5_0,7_0);
- (nullable UIImage *)finishedUnselectedImage NS_DEPRECATED_IOS(5_0,7_0);
//___________________________________________________________________________________________________

//title的偏移量
@property (nonatomic, readwrite, assign) UIOffset titlePositionAdjustment;
//_____________________________________________IOS10新增的属性和方法______________________________________________________
//角标颜色
@property (nonatomic, readwrite, copy, nullable) UIColor *badgeColor;
//角标设置富文本
- (void)setBadgeTextAttributes:(nullable NSDictionary<NSString *,id> *)textAttributes forState:(UIControlState)state;
- (nullable NSDictionary<NSString *,id> *)badgeTextAttributesForState:(UIControlState)state;
//___________________________________________________________________________________________________
@end

总结

  1. 通过初始化方法可以设置titleimageselectedImage等展示的元素。
  2. badgeValue属性可以在Item的右上角显示一个数字角标。
  3. titlePositionAdjustment设置文字的偏移量
  4. iOS10之后,可以通过badgeColor,setBadgeTextAttributes等设置角标的背景色,富文本的角标数值。
  5. 当UITabBar上的UITabBarItem>=6个时,底部的UITabBar左侧会显示一个More的Item。

2.UITabBar

一个UITabBarController只有一个TabBar。

NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBar : UIView
//代理
@property(nullable, nonatomic, weak) id<UITabBarDelegate> delegate;
//get/set UITabBarItems 默认是nil 改变时没有动画效果 按顺序展示
@property(nullable, nonatomic, copy) NSArray<UITabBarItem *> *items;
//选中的item
@property(nullable, nonatomic, weak) UITabBarItem *selectedItem;
//设置Items
- (void)setItems:(nullable NSArray<UITabBarItem *> *)items animated:(BOOL)animated;

- (void)beginCustomizingItems:(NSArray<UITabBarItem *> *)items;
- (BOOL)endCustomizingAnimated:(BOOL)animated;
#if UIKIT_DEFINE_AS_PROPERTIES
@property(nonatomic, readonly, getter=isCustomizing) BOOL customizing;
#else
- (BOOL)isCustomizing;
#endif

//ios7之后,
@property(null_resettable, nonatomic, strong) UIColor *tintColor ;
@property(nullable, nonatomic, strong) UIColor *barTintColor ;

//未选中的Item的颜色 IOS10可用
@property (nonatomic, readwrite, copy, nullable) UIColor *unselectedItemTintColor;

//ios8后废除 使用tintColor
@property(nullable, nonatomic, strong) UIColor *selectedImageTintColor(5_0,8_0);

//背景图片
@property(nullable, nonatomic, strong) UIImage *backgroundImage;
@property(nullable, nonatomic, strong) UIImage *selectionIndicatorImage;
@property(nullable, nonatomic, strong) UIImage *shadowImage;

//item位置
@property(nonatomic) UITabBarItemPositioning itemPositioning;
//item宽度
@property(nonatomic) CGFloat itemWidth;
//item间隙
@property(nonatomic) CGFloat itemSpacing;
//样式
@property(nonatomic) UIBarStyle barStyle;
//半透明
@property(nonatomic,getter=isTranslucent) BOOL translucent NS_AVAILABLE_IOS(7_0);
@end

以下是tabBar的代理方法,操作TabBar时的回调,主要是对UITabBarItem的操作

@protocol UITabBarDelegate<NSObject>
@optional
/**
 用户选中某个UITabBarItem
 */
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item;
//此四个代理方法是当Items>=6个时,当进入More页面时,开始或结束Item编辑状态的相关回调
- (void)tabBar:(UITabBar *)tabBar willBeginCustomizingItems:(NSArray<UITabBarItem *> *)items;                    
- (void)tabBar:(UITabBar *)tabBar didBeginCustomizingItems:(NSArray<UITabBarItem *> *)items; 
- (void)tabBar:(UITabBar *)tabBar willEndCustomizingItems:(NSArray<UITabBarItem *> *)items changed:(BOOL)changed; 
- (void)tabBar:(UITabBar *)tabBar didEndCustomizingItems:(NSArray<UITabBarItem *> *)items changed:(BOOL)changed;
@end

3.UITabBarController

NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarController : UIViewController <UITabBarDelegate, NSCoding>
//视图控制器数组,这个属性被赋值时,customizableViewControllers属性的值与之一样。
@property(nullable, nonatomic,copy) NSArray<__kindof UIViewController *> *viewControllers;
- (void)setViewControllers:(NSArray<__kindof UIViewController *> * __nullable)viewControllers animated:(BOOL)animated;

//当前选中的视图控制器
@property(nullable, nonatomic, assign) __kindof UIViewController *selectedViewController; 
//与selectedViewController对应
@property(nonatomic) NSUInteger selectedIndex;

//当ViewController的数量>=6,TabBar会出现一个moreNavigationController管理多余的viewcontroller。readonly属性
@property(nonatomic, readonly) UINavigationController *moreNavigationController;

//当viewcontroller>=6时,moreNavigationController右上方会有个edit按钮,支持通过拖拽修改ViewController的顺序,如若要屏蔽该功能,customizableViewControllers设置为nil即可。
@property(nullable, nonatomic, copy) NSArray<__kindof UIViewController *> *customizableViewControllers;

//只读属性,为了配置UITabBarItem,应该去修改ViewControllers属性。
@property(nonatomic,readonly) UITabBar *tabBar;

//协议
@property(nullable, nonatomic,weak) id<UITabBarControllerDelegate> delegate;

@end
//should选中viewController  return YES 可以本选中, NO不可以被选中
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController;

// 选中viewController后执行的Action
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController;

// 将要处于编辑状态(即点击MoreNavigationController的edit按钮)
- (void)tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers;

// MoreNavigationController will结束编辑状态
- (void)tabBarController:(UITabBarController *)tabBarController willEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed;

//MoreNavigationController did结束编辑状态
- (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed;

//UITabBarController支持的界面方向
- (UIInterfaceOrientationMask)tabBarControllerSupportedInterfaceOrientations:(UITabBarController *)tabBarController;

//对于将要展示的tabBarController 优先选择屏幕方向
- (UIInterfaceOrientation)tabBarControllerPreferredInterfaceOrientationForPresentation:(UITabBarController *)tabBarController;

//自定义转场动画
- (nullable id <UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController
                      interactionControllerForAnimationController: (id <UIViewControllerAnimatedTransitioning>)animationController;
- (nullable id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
            animationControllerForTransitionFromViewController:(UIViewController *)fromVC
                                              toViewController:(UIViewController *)toVC;

@end
@interface UIViewController (UITabBarControllerItem)
@property(null_resettable, nonatomic, strong) UITabBarItem *tabBarItem;
@property(nullable, nonatomic, readonly, strong) UITabBarController *tabBarController;
@end

3、实际开发中的相关问题

1. UITabBar的背景颜色

1.直接设置背景颜色
//    self.tabBar.backgroundColor = [UIColor orangeColor];
//    [[UITabBar appearance] setBackgroundColor:[UIColor orangeColor]];
    [[UITabBar appearance]setBarTintColor:[UIColor orangeColor]];
    [UITabBar appearance].translucent = NO

注意:
1.前两种设置背景颜色的方法是无效的。
2.tabBar是一个readonly属性,这里不能使用TabBarController.tabBar.barTintColor设置背景色。
前两种方法是无效的。
3.这里设置tabBar的半透明属性translucent设置为NO,默认为YES,若保留半透明效果,设置的颜色会与正常的颜色有色差;

2.添加一个有颜色的View
    UIView * view = [UIView new];
    view.backgroundColor = [UIColor orangeColor];
    view.frame = self.tabBar.bounds;
    [[UITabBar appearance] insertSubview:view atIndex:0];
3.使用背景图片
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tabBarBackgroundImage"]];
[UITabBar appearance].translucent = NO;

这里同样需要设置translucent为NO

2. UITabBar的顶部的shadowImage

[[UITabBar appearance] setShadowImage:[UIImage new]];
[[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];

UINavigationBar一样,需同时设置ShadowImageBackgroundImage才能生效。

3.tabBarItem选中时的背景色

 //    [UITabBar appearance].selectionIndicatorImage = [self drawTabBarItemBackgroundImageWithSize:size];
self.tabBar.selectionIndicatorImage = [self drawTabBarItemBackgroundImageWithSize:size];

此处可直接获取TabBarControllertabBar直接设置selectionIndicatorImage
获取某背景颜色的image的方法可参考IOS-UINavigationController详解相关方法,注意图片size要设置正确。

4.修改tabBarItem的文字、图片颜色

tabBarItem,默认状态下,选中状态是蓝色,未选中状态下是灰色。选中状态的Item的文字和图片颜色可直接通过tintColor属性修改

self.tabBar.tintColor = [UIColor yellowColor];

现实中,往往都是现实图片实际的颜色。我们可以通过自定义一个tabBarItem继承UITabBarItem,在initWithCoder方法添加以下代码完成现实图片实际颜色的效果。

-(id)initWithTitle:(NSString *)title image:(UIImage *)image selectedImage:(UIImage *)selectedImage{
    if (self = [super initWithTitle:title image:image selectedImage:selectedImage]) {
        self.image = [self.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        self.selectedImage = [self.selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        
        [self setTitleTextAttributes:@{NSForegroundColorAttributeName : [self mostColorWithImage:self.image]}
                            forState:UIControlStateNormal];
        
        [self setTitleTextAttributes:@{NSForegroundColorAttributeName : [self mostColorWithImage:self.selectedImage]}
                            forState:UIControlStateSelected];
    }
    return self;
}

-(UIColor*)mostColorWithImage:(UIImage *)image
{
#if __IPHONE_OS_VERSION_MAX_ALLOWED > __IPHONE_6_1
    int bitmapInfo = kCGBitmapByteOrderDefault | kCGImageAlphaPremultipliedLast;
#else
    int bitmapInfo = kCGImageAlphaPremultipliedLast;
#endif
    
    //第一步 先把图片缩小 加快计算速度. 但越小结果误差可能越大
    CGSize thumbSize=CGSizeMake(50, 50);
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL,
                                                 thumbSize.width,
                                                 thumbSize.height,
                                                 8,//bits per component
                                                 thumbSize.width*4,
                                                 colorSpace,
                                                 bitmapInfo);
    
    CGRect drawRect = CGRectMake(0, 0, thumbSize.width, thumbSize.height);
    CGContextDrawImage(context, drawRect, image.CGImage);
    CGColorSpaceRelease(colorSpace);
    
    
    //第二步 取每个点的像素值
    unsigned char* data = CGBitmapContextGetData (context);
    
    if (data == NULL) return nil;
    
    NSCountedSet *cls = [NSCountedSet setWithCapacity:thumbSize.width*thumbSize.height];
    
    for (int x=0; x<thumbSize.width; x++) {
        for (int y=0; y<thumbSize.height; y++) {
            
            int offset = 4*(x*y);
            
            int red = data[offset];
            int green = data[offset+1];
            int blue = data[offset+2];
            int alpha =  data[offset+3];
            
            if (alpha != 255) continue;
            
            NSArray *clr=@[@(red),@(green),@(blue),@(alpha)];
            [cls addObject:clr];
            
        }
    }
    CGContextRelease(context);
    
    
    //第三步 找到出现次数最多的那个颜色
    NSEnumerator *enumerator = [cls objectEnumerator];
    NSArray *curColor = nil;
    
    NSArray *MaxColor=nil;
    NSUInteger MaxCount=0;
    
    while ( (curColor = [enumerator nextObject]) != nil )
    {
        NSUInteger tmpCount = [cls countForObject:curColor];
        
        if ( tmpCount < MaxCount ) continue;
        
        MaxCount=tmpCount;
        MaxColor=curColor;
    }
    
    return [UIColor colorWithRed:([MaxColor[0] intValue]/255.0f) green:([MaxColor[1] intValue]/255.0f) blue:([MaxColor[2] intValue]/255.0f) alpha:1.0 ];
}

iOS10之后新增了unselectedItemTintColor设置未选中状态下的item颜色。配合tintColor可以达到我们需要的大部分效果。

5.修改TabBar的高度

UITabBarController里重写viewWillLayoutSubviews

- (void)viewWillLayoutSubviews {
    CGRect tabFrame = self.tabBar.frame;
    tabFrame.size.height = 59;
    tabFrame.origin.y = self.view.bounds.size.height - 59;
    self.tabBar.frame = tabFrame;
}

然后通过UITabBarItemimageInsetstitlePositionAdjustment属性调整图片和文字的位置

for (UITabBarItem * item in self.tabBar.items) {
        item.imageInsets = UIEdgeInsetsMake(8, 0, -8, 0);
    }
[[UITabBarItem appearance]setTitlePositionAdjustment:UIOffsetMake(0, -8)];

6. 自定义UITabBarController

具体内容参考:仿闲鱼自定义Tabbar(纯代码)

参考文章
iOS UI Tab开发
UITabBarController的使用
UITabBarController、TabBar背景颜色设置、TabBarItem颜色处理

结束语:

此文是我在学习过程中的探索与总结,不足之处还望大家见谅,并欢迎指正!
愿每一个人都能学有所成!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容