IOS開發-關於自定義TabBar條

今天在作項目的時候,忽然有一個模塊須要自定義TabBar條.

在日常不少作項目的時候,都沒有去自定義過,大部分都是使用系統自帶的.今天整理一個自定義TabBar條的步驟.

 

 

首先看下咱們最終實現的效果：

 

首先須要繼承UItabBar自定義一個本身的tabBar

.h
#import <UIKit/UIKit.h> @class THTabBar; @protocol THTabBarDelegate <UITabBarDelegate> @optional - (void)tabBarDidClickPlusButton:(THTabBar *)tabBar; @end @interface THTabBar : UITabBar @property (nonatomic, weak) id<THTabBarDelegate> myDelegate; @endTHTabBarTHTabBarTHTabBarDelegate

.m
#import "THTabBar.h" #import "UIBarButtonItem+Extension.h" #import "UIView+Extension.h" @interface THTabBar () @property (nonatomic, weak) UIButton *plusBtn; @end @implementation THTabBar - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { UIButton *plusBtn = [[UIButton alloc] init]; [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal]; [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted]; [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal]; [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted]; plusBtn.size = plusBtn.currentBackgroundImage.size; [plusBtn addTarget:self action:@selector(plusBtnClick) forControlEvents:UIControlEventTouchUpInside]; [self addSubview:plusBtn]; self.plusBtn = plusBtn; } return self; } /** * 加號按鈕點擊 */ - (void)plusBtnClick { // 通知代理 if ([self.delegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) { [self.myDelegate tabBarDidClickPlusButton:self]; } } /** * 想要從新排布系統控件subview的佈局，推薦重寫layoutSubviews，在調用父類佈局後從新排布。 */ - (void)layoutSubviews { [super layoutSubviews]; // 1.設置加號按鈕的位置 self.plusBtn.centerX = self.width*0.5; self.plusBtn.centerY = self.height*0.5; // 2.設置其餘tabbarButton的frame CGFloat tabBarButtonW = self.width / 5; CGFloat tabBarButtonIndex = 0; for (UIView *child in self.subviews) { Class class = NSClassFromString(@"UITabBarButton"); if ([child isKindOfClass:class]) { // 設置x child.x = tabBarButtonIndex * tabBarButtonW; // 設置寬度 child.width = tabBarButtonW; // 增長索引 tabBarButtonIndex++; if (tabBarButtonIndex == 2) { tabBarButtonIndex++; } } } } @endTHTabBarTHTabBarTHTabBar

下面是Category：

UIView+Extension.h中： #import <UIKit/UIKit.h> @interface UIView (Extension) @property (nonatomic, assign) CGFloat x; @property (nonatomic, assign) CGFloat y; @property (nonatomic, assign) CGFloat centerX; @property (nonatomic, assign) CGFloat centerY; @property (nonatomic, assign) CGFloat width; @property (nonatomic, assign) CGFloat height; @property (nonatomic, assign) CGSize size; @property (nonatomic, assign) CGPoint origin; @end

UIView+Extension.m中： #import "UIView+Extension.h" @implementation UIView (Extension) - (void)setX:(CGFloat)x { CGRect frame = self.frame; frame.origin.x = x; self.frame = frame; } - (void)setY:(CGFloat)y { CGRect frame = self.frame; frame.origin.y = y; self.frame = frame; } - (CGFloat)x { return self.frame.origin.x; } - (CGFloat)y { return self.frame.origin.y; } - (void)setCenterX:(CGFloat)centerX { CGPoint center = self.center; center.x = centerX; self.center = center; } - (CGFloat)centerX { return self.center.x; } - (void)setCenterY:(CGFloat)centerY { CGPoint center = self.center; center.y = centerY; self.center = center; } - (CGFloat)centerY { return self.center.y; } - (void)setWidth:(CGFloat)width { CGRect frame = self.frame; frame.size.width = width; self.frame = frame; } - (void)setHeight:(CGFloat)height { CGRect frame = self.frame; frame.size.height = height; self.frame = frame; } - (CGFloat)height { return self.frame.size.height; } - (CGFloat)width { return self.frame.size.width; } - (void)setSize:(CGSize)size { CGRect frame = self.frame; frame.size = size; self.frame = frame; } - (CGSize)size { return self.frame.size; } - (void)setOrigin:(CGPoint)origin { CGRect frame = self.frame; frame.origin = origin; self.frame = frame; } - (CGPoint)origin { return self.frame.origin; } @end

UIBarButtonItem+Extension.h中： #import <UIKit/UIKit.h> @interface UIBarButtonItem (Extension) + (UIBarButtonItem *)itemWithTargat:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage; @end

UIBarButtonItem+Extension.m中： #import "UIBarButtonItem+Extension.h" #import "UIView+Extension.h" @implementation UIBarButtonItem (Extension) /** * 建立一個item * * @param target 點擊item後調用哪一個對象的方法 * @param action 點擊item後調用target的哪一個方法 * @param image 圖片 * @param highImage 高亮的圖片 * * @return 建立完的item */ + (UIBarButtonItem *)itemWithTargat:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage { UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; // 設置圖片 [btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal]; [btn setBackgroundImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted]; // 設置尺寸 btn.size = btn.currentBackgroundImage.size; [btn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside]; return [[UIBarButtonItem alloc] initWithCustomView:btn]; } @end

接下來就該在須要的地方使用自定義的tabBar了

　我是在UITabBarController中使用自定義的tabBar。

導入#import "THTabBar.h"並遵循 THTabBarDelegate協議。THTabBarTHTabBarDelegate

在- (void)viewDidLoad 中實現下面代碼： - (void)viewDidLoad { [super viewDidLoad]; // 添加子控制器 [self addChildVc:[[FirstPageViewController alloc] init] title:@"首頁" image:@"tabbar_home" selectedImage:@"tabbar_home_selected"]; [self addChildVc:[[ConsultViewController alloc] init] title:@"個人" image:@"tabbar_profile" selectedImage:@"tabbar_profile_selected"]; THTabBar *tabBar = [[THTabBar alloc] init]; //取消tabBar的透明效果 tabBar.translucent = NO; tabBar.myDelegate = self; // KVC：若是要修系統的某些屬性，但被設爲readOnly，就是用KVC，即setValue：forKey：。 [self setValue:tabBar forKey:@"tabBar"]; }THTabBarTHTabBar

實現下面方法：

- (void)addChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage { // 設置子控制器的文字(能夠設置tabBar和navigationBar的文字) childVc.title = title; // 設置子控制器的tabBarItem圖片 childVc.tabBarItem.image = [UIImage imageNamed:image]; // 禁用圖片渲染 childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; // 設置文字的樣式 [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blackColor]} forState:UIControlStateNormal]; [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]} forState:UIControlStateSelected]; // childVc.view.backgroundColor = RandomColor; 
　　// 上面這句代碼會自動加載主頁，消息，發現，我四個控制器的view，可是view要在咱們用的時候去提早加載 // 爲子控制器包裝導航控制器 UINavigationController *navigationVc = [[UINavigationController alloc] initWithRootViewController:childVc]; // 添加子控制器 [self addChildViewController:navigationVc]; }

#pragma THTabBarDelegate /** * 加號按鈕點擊 */ - (void)tabBarDidClickPlusButton:(THTabBar *)tabBar { NSLog(@"+++"); }以上這些代碼就是我所整理的關於自定義TabBar條的大體過程.THTabBarDelegateTHTabBar