@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;
selected
、unselected
时不同状态以及badgeValue
等属性,相当于放在TabBar
上的特殊“button
”1、UITabBarController
继承UIViewController
,是一个Container
;
2、UITabBarController
拥有一个readonly
的TabBar
,TabBar
拥有一到多个TabBarItem
;
3、每一个TabBarItem
需要关联一个UIViewController
;
这里可以参考IOS-UINavigationController详解关于UINavigationController
等相关控件之间的关系综述,UITabBarController
和UINavigationController
相似。
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
设置文字的偏移量一个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
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
// 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
,若保留半透明效果,设置的颜色会与正常的颜色有色差;
View
UIView * view = [UIView new]; view.backgroundColor = [UIColor orangeColor]; view.frame = self.tabBar.bounds; [[UITabBar appearance] insertSubview:view atIndex:0];
[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tabBarBackgroundImage"]];[UITabBar appearance].translucent = NO;
这里同样需要设置
translucen
t为NO
[[UITabBar appearance] setShadowImage:[UIImage new]];[[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];
同
UINavigationBar
一样,需同时设置ShadowImage
和BackgroundImage
才能生效。
// [UITabBar appearance].selectionIndicatorImage = [self drawTabBarItemBackgroundImageWithSize:size];self.tabBar.selectionIndicatorImage = [self drawTabBarItemBackgroundImageWithSize:size];
此处可直接获取
TabBarController
的tabBar
直接设置selectionIndicatorImage
。
获取某背景颜色的image
的方法可参考IOS-UINavigationController详解相关方法,注意图片size
要设置正确。
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可以达到我们需要的大部分效果。
在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)];
具体内容参考:仿闲鱼自定义Tabbar(纯代码)
参考文章
iOS UI Tab开发
UITabBarController的使用
UITabBarController、TabBar背景颜色设置、TabBarItem颜色处理
此文是我在学习过程中的探索与总结,不足之处还望大家见谅,并欢迎指正!
愿每一个人都能学有所成!
联系客服