一、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，增加了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<NSString *,id> *)textAttributes forState:(UIControlState)state;
- (nullable NSDictionary<NSString *,id> *)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<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一样，需同时设置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<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;
}
然后通过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
具体内容参考：仿闲鱼自定义Tabbar(纯代码)
参考文章
iOS UI Tab开发
UITabBarController的使用
UITabBarController、TabBar背景颜色设置、TabBarItem颜色处理
结束语：
此文是我在学习过程中的探索与总结，不足之处还望大家见谅，并欢迎指正！
愿每一个人都能学有所成！
|
