IOS custom tabBar

In our project often your own custom tabBar because of Apple’s own really ugly! Does not meet our project needs.

Get started!

First look at the picture we finally achieve the effect:

IOS custom tabBar

Inherit UItabBar customize one’s own tabBar

.h #import < UIKit/UIKit.h> @class HJTTabBar; @protocol ZTTabBarDelegate < UITabBarDelegate> @optional - (void) tabBarDidClickPlusButton: (HJTTabBar * tabBar); @end @interface HJTTabBar: UITabBar @property (nonatomic, weak) id< ZTTabBarDelegate> myDelegate; @end
.m #import "HJTTabBar.h" #import "UIBarButtonItem+Extension.h" #import "UIView+Extension.h" @interface (HJTTabBar) @property (nonatomic, weak) UIButton *plusBtn; @end @implementation HJTTabBar (instancetype) - initWithFrame: (CGRect frame) {self = [super initWithFrame:frame]; if (self) {UIButton *plusBtn = [[UIButton alloc] init]; [plusBtn setBackgroundImage:[UIImage imageNamed:@ forState:UIControlStateNormal] "tabbar_compose_button"] [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;} / * * * * click the plus button - (void) plusBtnClick if ([self.delegate {/ / notification agent respondsToSelector:@selector (tabBarDidClickPlusButton:)] {[self.myDelegate tabBarDidClickPlusButton:self]}}); / * * * want to rearrange the layout of the subview control system, recommended override layoutSubviews, re arrangement in calling the superclass layout. * / - (void) layoutSubviews {[super layoutSubviews]; / / the 1 set plus button position self.plusBtn.centerX = self.width*0.5; self.plusBtn.centerY = self.height*0.5; / / tabbarButton frame CGFloat other 2 set tabBarButtonW = self.width / CGFloat = 5; tabBarButtonIndex 0; for (UIView *child in self.subviews Class (NSClassFromString) {class = @ "UITabBarButton"); if ([child isKindOfClass:class]) {/ / child.x = tabBarButtonIndex set X * tabBarButtonW; / / set the width child.width = tabBarButtonW; / / add index tabBarButtonIndex++; if (tabBarButtonIndex = = 2) {tabBarButtonIndex++; }} @end

Here is 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 =; center.x = centerX; = center;} - (CGFloat) centerX {return;} - (void) setCenterY: (CGFloat centerY) {CGPoint center =; center.y = centerY; = center;} - {(CGFloat) centerY return self.cente R.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} (CGFloat - self.frame.size.height; 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) / * * * create a item * * @param target item Click to call which object method action * @param click item calls the target method which image * @param * @param highImage pictures highlighted pictures created the * * @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]; / / set the picture forState:UIControlStateNormal]; [btn setBackgroundImage:[UIImage imageNamed:high Image] forState:UIControlStateHighlighted]; / / set size btn.size = btn.currentBackgroundImage.size [btn; addTarget:target action:action forControlEvents:UIControlEventTouchUpInside]; return [[UIBarButtonItem alloc] initWithCustomView:btn];} @ end

Then we should use the custom tabBar where we need it

  • I am using custom UITabBarController in tabBar.
Import #import "HJTTabBar.h" and follow the HJTTabBarDelegate protocol.
In - (void) viewDidLoad code to achieve the following: - (void) viewDidLoad {[super viewDidLoad]; / / addChildVc:[[FirstPageViewController alloc] init] controller [self add title:@ "home page" image:@ "tabbar_home" selectedImage:@ "tabbar_home_selected" [self addChildVc:[[CommunityViewController alloc] init] title:@]; "community" image:@ "tabbar_message_center" selectedImage:@ "tabbar_message_center_selected"]; [self addChildVc:[[MessageViewController alloc] init] title: @ "message" image:@ "tabbar_discover" selectedImage:@ "tabbar_discover_selected" [self addChildVc:[[ConsultViewController alloc] init] title:@]; "consultation" image:@ "tabbar_profile" selectedImage:@ "tabbar_profile_selected"]; HJTTabBar * tabBar = [[HJTTabBar alloc] init Cancel tabBar]; / / transparent effect tabBar.translucent = NO; tabBar.myDelegate = self; / / KVC: if you want to repair some of the properties of the system, but is set to readOnly, is to use KVC, setValue:forKey:. [self setValue:tabBar forKey:@ "tabBar";}
To achieve the following methods: - (void) addChildVc: (UIViewController * childVc) title: (NSString * title) image: (NSString * image) selectedImage: (NSString * selectedImage) controller {/ / the text (you can set the tabBar and navigationBar text) childVc.title = title; / / set sub controller tabBarItem images childVc.tabBarItem.image = [UIImage imageNamed:image]; childVc.tabBarItem.selectedImage = [[UIImage / disable image rendering imageNamed:selectedImage] imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal]; / / set the text style [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor blackColor]} forState:UIControlStateNormal]; [childVc.tabBarItem setTitleTextAttributes:@{N SForegroundColorAttributeName: [UIColor redColor]} forState:UIControlStateSelected]; / / childVc.view.backgroundColor = RandomColor; / / this code will automatically load the page, news, I found, four controller view, but to view when we use the go ahead for the sub controller loading / navigation controller UINavigationController *navigationVc = [[UINavigationController package alloc] initWithRootViewController:childVc]; / / add sub controller [self addChildViewController:navigationVc];}
#pragma HJTTabBarDelegate / * * * * click the plus button - (void) tabBarDidClickPlusButton: (HJTTabBar * tabBar) {NSLog (@ "+ + +");}

All right!