一、UITabBarController以其相關(guān)控件之間的關(guān)系
@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之上的所有小控件類的抽象類,可以設(shè)置標(biāo)題,圖片等 - UITabBarItem
繼承UIBarItem岂丘,增加了selected
一也、unselected
時不同狀態(tài)以及badgeValue
等屬性,相當(dāng)于放在TabBar
上的特殊“button
” - UITabBar
NavigaitonBar就是底部的選擇欄 主要對UITabBarItem進行管理 并負(fù)責(zé)展示底部選擇欄的外觀背景 - UITabBarController
包含了viewcontrollers风纠、tabBar等
關(guān)系綜述
1蚯斯、UITabBarController
繼承UIViewController
薄风,是一個Container
饵较;
2、UITabBarController
擁有一個readonly
的TabBar
遭赂,TabBar
擁有一到多個TabBarItem
循诉;
3、每一個TabBarItem
需要關(guān)聯(lián)一個UIViewController
撇他;
這里可以參考IOS-UINavigationController詳解關(guān)于UINavigationController
等相關(guān)控件之間的關(guān)系綜述茄猫,UITabBarController
和UINavigationController
相似。
2困肩、UITabBarController及其相關(guān)控件的屬性和方法
1.UITabBarItem
UITabBarItem時一個抽象類划纽,主要負(fù)責(zé)設(shè)置底部每個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);
//角標(biāo)
@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新增的屬性和方法______________________________________________________
//角標(biāo)顏色
@property (nonatomic, readwrite, copy, nullable) UIColor *badgeColor;
//角標(biāo)設(shè)置富文本
- (void)setBadgeTextAttributes:(nullable NSDictionary<NSString *,id> *)textAttributes forState:(UIControlState)state;
- (nullable NSDictionary<NSString *,id> *)badgeTextAttributesForState:(UIControlState)state;
//___________________________________________________________________________________________________
@end
總結(jié)
- 通過初始化方法可以設(shè)置
title
锌畸,image
勇劣,selectedImage
等展示的元素。 -
badgeValue
屬性可以在Item
的右上角顯示一個數(shù)字角標(biāo)潭枣。 -
titlePositionAdjustment
設(shè)置文字的偏移量 - iOS10之后比默,可以通過badgeColor,setBadgeTextAttributes等設(shè)置角標(biāo)的背景色盆犁,富文本的角標(biāo)數(shù)值命咐。
- 當(dāng)UITabBar上的UITabBarItem>=6個時,底部的UITabBar左側(cè)會顯示一個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 默認(rèn)是nil 改變時沒有動畫效果 按順序展示
@property(nullable, nonatomic, copy) NSArray<UITabBarItem *> *items;
//選中的item
@property(nullable, nonatomic, weak) UITabBarItem *selectedItem;
//設(shè)置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時的回調(diào)伊佃,主要是對UITabBarItem的操作
@protocol UITabBarDelegate<NSObject>
@optional
/**
用戶選中某個UITabBarItem
*/
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item;
//此四個代理方法是當(dāng)Items>=6個時钝域,當(dāng)進入More頁面時,開始或結(jié)束Item編輯狀態(tài)的相關(guān)回調(diào)
- (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>
//視圖控制器數(shù)組锭魔,這個屬性被賦值時,customizableViewControllers屬性的值與之一樣路呜。
@property(nullable, nonatomic,copy) NSArray<__kindof UIViewController *> *viewControllers;
- (void)setViewControllers:(NSArray<__kindof UIViewController *> * __nullable)viewControllers animated:(BOOL)animated;
//當(dāng)前選中的視圖控制器
@property(nullable, nonatomic, assign) __kindof UIViewController *selectedViewController;
//與selectedViewController對應(yīng)
@property(nonatomic) NSUInteger selectedIndex;
//當(dāng)ViewController的數(shù)量>=6迷捧,TabBar會出現(xiàn)一個moreNavigationController管理多余的viewcontroller。readonly屬性
@property(nonatomic, readonly) UINavigationController *moreNavigationController;
//當(dāng)viewcontroller>=6時,moreNavigationController右上方會有個edit按鈕胀葱,支持通過拖拽修改ViewController的順序漠秋,如若要屏蔽該功能,customizableViewControllers設(shè)置為nil即可抵屿。
@property(nullable, nonatomic, copy) NSArray<__kindof UIViewController *> *customizableViewControllers;
//只讀屬性庆锦,為了配置UITabBarItem,應(yīng)該去修改ViewControllers屬性轧葛。
@property(nonatomic,readonly) UITabBar *tabBar;
//協(xié)議
@property(nullable, nonatomic,weak) id<UITabBarControllerDelegate> delegate;
@end
//should選中viewController return YES 可以本選中搂抒, NO不可以被選中
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController;
// 選中viewController后執(zhí)行的Action
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController;
// 將要處于編輯狀態(tài)(即點擊MoreNavigationController的edit按鈕)
- (void)tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers;
// MoreNavigationController will結(jié)束編輯狀態(tài)
- (void)tabBarController:(UITabBarController *)tabBarController willEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed;
//MoreNavigationController did結(jié)束編輯狀態(tài)
- (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray<__kindof UIViewController *> *)viewControllers changed:(BOOL)changed;
//UITabBarController支持的界面方向
- (UIInterfaceOrientationMask)tabBarControllerSupportedInterfaceOrientations:(UITabBarController *)tabBarController;
//對于將要展示的tabBarController 優(yōu)先選擇屏幕方向
- (UIInterfaceOrientation)tabBarControllerPreferredInterfaceOrientationForPresentation:(UITabBarController *)tabBarController;
//自定義轉(zhuǎn)場動畫
- (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艇搀、實際開發(fā)中的相關(guān)問題
1. UITabBar的背景顏色
1.直接設(shè)置背景顏色
// self.tabBar.backgroundColor = [UIColor orangeColor];
// [[UITabBar appearance] setBackgroundColor:[UIColor orangeColor]];
[[UITabBar appearance]setBarTintColor:[UIColor orangeColor]];
[UITabBar appearance].translucent = NO
注意:
1.前兩種設(shè)置背景顏色的方法是無效的。
2.tabBar
是一個readonly
屬性求晶,這里不能使用TabBarController.tabBar.barTintColor
設(shè)置背景色焰雕。
前兩種方法是無效的。
3.這里設(shè)置tabBar的半透明屬性translucent
設(shè)置為NO
芳杏,默認(rèn)為YES
,若保留半透明效果矩屁,設(shè)置的顏色會與正常的顏色有色差;
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;
這里同樣需要設(shè)置
translucen
t為NO
2. UITabBar的頂部的shadowImage
[[UITabBar appearance] setShadowImage:[UIImage new]];
[[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];
同
UINavigationBar
一樣,需同時設(shè)置ShadowImage
和BackgroundImage
才能生效爵赵。
3.tabBarItem選中時的背景色
// [UITabBar appearance].selectionIndicatorImage = [self drawTabBarItemBackgroundImageWithSize:size];
self.tabBar.selectionIndicatorImage = [self drawTabBarItemBackgroundImageWithSize:size];
此處可直接獲取
TabBarController
的tabBar
直接設(shè)置selectionIndicatorImage
吝秕。
獲取某背景顏色的image
的方法可參考IOS-UINavigationController詳解相關(guān)方法,注意圖片size
要設(shè)置正確空幻。
4.修改tabBarItem的文字烁峭、圖片顏色
tabBarItem
,默認(rèn)狀態(tài)下氛悬,選中狀態(tài)是藍色则剃,未選中狀態(tài)下是灰色。選中狀態(tài)的Item
的文字和圖片顏色可直接通過tintColor
屬性修改
self.tabBar.tintColor = [UIColor yellowColor];
現(xiàn)實中如捅,往往都是現(xiàn)實圖片實際的顏色棍现。我們可以通過自定義一個tabBarItem繼承UITabBarItem,在initWithCoder方法添加以下代碼完成現(xiàn)實圖片實際顏色的效果镜遣。
-(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
//第一步 先把圖片縮小 加快計算速度. 但越小結(jié)果誤差可能越大
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);
//第三步 找到出現(xiàn)次數(shù)最多的那個顏色
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
設(shè)置未選中狀態(tài)下的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
屬性調(diào)整圖片和文字的位置
for (UITabBarItem * item in self.tabBar.items) {
item.imageInsets = UIEdgeInsetsMake(8, 0, -8, 0);
}
[[UITabBarItem appearance]setTitlePositionAdjustment:UIOffsetMake(0, -8)];
6. 自定義UITabBarController
具體內(nèi)容參考:仿閑魚自定義Tabbar(純代碼)
參考文章
iOS UI Tab開發(fā)
UITabBarController的使用
UITabBarController悲关、TabBar背景顏色設(shè)置谎僻、TabBarItem顏色處理
結(jié)束語:
此文是我在學(xué)習(xí)過程中的探索與總結(jié),不足之處還望大家見諒寓辱,并歡迎指正艘绍!
愿每一個人都能學(xué)有所成!