ios tabtar 使用方法_iOS-UITabBarController详细总结

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

@interface UITabBarController : UIViewController

@property(nonatomic,readonly) UITabBar *tabBar;

@interface UITabBar : UIView

@property(nullable, nonatomic, copy) NSArray *items;

@interface UITabBarItem : UIBarItem

@property(nullable, nonatomic,strong) UIImage *selectedImage;

@property(nullable, nonatomic, copy) NSString *badgeValue;

UIBarItem

一个可以放置在Bar之上的所有小控件类的抽象类,可以设置标题，图片等

UITabBarItem

继承UIBarItem，增加了selected、unselected时不同状态以及badgeValue等属性，相当于放在TabBar上的特殊“button”

UITabBar

NavigaitonBar就是底部的选择栏 主要对UITabBarItem进行管理 并负责展示底部选择栏的外观背景

UITabBarController

包含了viewcontrollers、tabBar等

关系综述

1、UITabBarController继承UIViewController，是一个Container；

2、UITabBarController拥有一个readonly的TabBar，TabBar拥有一到多个TabBarItem；

3、每一个TabBarItem需要关联一个UIViewController；

这里可以参考IOS-UINavigationController详解关于UINavigationController等相关控件之间的关系综述，UITabBarController和UINavigationController相似。

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 *)textAttributes forState:(UIControlState)state;

- (nullable NSDictionary *)badgeTextAttributesForState:(UIControlState)state;

//___________________________________________________________________________________________________

@end

总结

通过初始化方法可以设置title，image，selectedImage等展示的元素。

badgeValue属性可以在Item的右上角显示一个数字角标。

titlePositionAdjustment设置文字的偏移量

iOS10之后，可以通过badgeColor，setBadgeTextAttributes等设置角标的背景色，富文本的角标数值。

当UITabBar上的UITabBarItem>=6个时，底部的UITabBar左侧会显示一个More的Item。

2.UITabBar

一个UITabBarController只有一个TabBar。

NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBar : UIView

//代理

@property(nullable, nonatomic, weak) id delegate;

//get/set UITabBarItems 默认是nil 改变时没有动画效果 按顺序展示

@property(nullable, nonatomic, copy) NSArray *items;

//选中的item

@property(nullable, nonatomic, weak) UITabBarItem *selectedItem;

//设置Items

- (void)setItems:(nullable NSArray *)items animated:(BOOL)animated;

- (void)beginCustomizingItems:(NSArray *)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

@optional

/**

用户选中某个UITabBarItem

*/

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item;

//此四个代理方法是当Items>=6个时，当进入More页面时，开始或结束Item编辑状态的相关回调

- (void)tabBar:(UITabBar *)tabBar willBeginCustomizingItems:(NSArray *)items;

- (void)tabBar:(UITabBar *)tabBar didBeginCustomizingItems:(NSArray *)items;

- (void)tabBar:(UITabBar *)tabBar willEndCustomizingItems:(NSArray *)items changed:(BOOL)changed;

- (void)tabBar:(UITabBar *)tabBar didEndCustomizingItems:(NSArray *)items changed:(BOOL)changed;

@end

3.UITabBarController

NS_CLASS_AVAILABLE_IOS(2_0) @interface UITabBarController : UIViewController

//视图控制器数组，这个属性被赋值时，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 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 )tabBarController:(UITabBarController *)tabBarController

interactionControllerForAnimationController: (id )animationController;

- (nullable id )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一样，需同时设置ShadowImage和BackgroundImage才能生效。

3.tabBarItem选中时的背景色

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

self.tabBar.selectionIndicatorImage = [self drawTabBarItemBackgroundImageWithSize:size];

此处可直接获取TabBarController的tabBar直接设置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

for (int y=0; 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;

}

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

for (UITabBarItem * item in self.tabBar.items) {

item.imageInsets = UIEdgeInsetsMake(8, 0, -8, 0);

}

[[UITabBarItem appearance]setTitlePositionAdjustment:UIOffsetMake(0, -8)];

6. 自定义UITabBarController

参考文章