[IOS] custom TabBarController

Source: Internet
Author: User

I. Custom ideas

TabBarController in iOS is indeed very powerful, and most mainstream iOS applications will adopt it. However, it often cannot meet all the requirements. Therefore, you need to customize the TabBar. You need to have a good understanding of the system's TabBar working methods and have the courage to customize the TabBar.

Custom TabBar principle: Use the built-in TabBar in the system as much as possible, and only change the location to be changed.

 

 

II. General process of customizing TabBar1. Cancel the built-in TabBar first. 2. Create a view by yourself. Put the buttons above, set the button clicking event, and set selectIndex. 3. associate each sub-viewController to overwrite related events.

 

Iii. Details are important

 

1. Associate the button you created with viewController :? Use the selectedIndex attribute of tabbar. Set this attribute. 2. Cancel the system highlight :? You can customize a button. Override the sethighhighhighted method in it and do nothing. (If super is called, it is equivalent to not writing.) 3. Select only one method for several buttons :? Set an attribute to record the last selected button .? When you click the current button, set the previous button to unselected, set the current button to selected, and assign the current button to the previous button.
Iv. initial customizationDirectly add the Code. For more information, see annotations. XNTabBarController. h

 

 

#import 
 
  @interface XNTabBarController : UITabBarController@end
 

 

XNTabBarController. m

 

//// XNTabBarController. m ///// Created by neng on 14-6-19. // Copyright (c) 2014 neng. all rights reserved. // # import "XNTabBarController. h "# import" Common. h "# import" XNTabBarButton. h "@ interface XNTabBarController ()/*** set the previously selected button */@ property (nonatomic, weak) UIButton * selectedBtn; @ end @ implementation XNTabBarController-(void) viewDidLoad {[super viewDidLoad]; // The following two methods are frequently used in development. // NSLog (@ "% s" ,__ func __); // NSLog (@ "% @", self. view. subviews); // you can print all subviews and their frameLogFun; LogSubviews (self. view); // delete an existing tabBarCGRect rect = self. tabBar. frame; [self. tabBar removeFromSuperview]; // remove the lower part of the TabBarController; // test and add your own view UIView * myView = [[UIView alloc] init]; myView. frame = rect; myView. backgroundColor = [UIColor redColor]; [self. view addSubview: myView]; for (int I = 0; I <5; I ++) {// UIButton * btn = [[UIButton alloc] init]; XNTabBarButton * btn = [[XNTabBarButton alloc] init]; NSString * imageName = [NSString stringWithFormat: @ "TabBar % d", I + 1]; NSString * imageNameSel = [NSString stringWithFormat: @ "TabBar % dSel", I + 1]; [btn setImage: [UIImage imageNamed: imageName] forState: UIControlStateNormal]; [btn setImage: [UIImage imageNamed: imageNameSel] forState: UIControlStateSelected]; CGFloat x = I * myView. frame. size. width/5; btn. frame = CGRectMake (x, 0, myView. frame. size. width/5, myView. frame. size. height); [myView addSubview: btn]; btn. tag = I; // set the button tag to easily index the current button and jump to the corresponding view // Add "colon" [btn addTarget: self action: @ selector (clickBtn :) forControlEvents: UIControlEventTouchUpInside]; // when the configuration is just started, the first button is selected if (0 = I) {btn. selected = YES; self. selectedBtn = btn; // set this button to the selected button }}/ *** click the event button in the Custom TabBar */-(void) clickBtn :( UIButton *) button {// 1. set the previously selected button to unselected self. selectedBtn. selected = NO; // 2. set the current button to the selected button. selected = YES; // 3. finally, assign the current button to the previously selected button self. selectedBtn = button; // 4. jump to the corresponding View Controller. (set the Controller selected through the selectIndex parameter) self. selectedIndex = button. tag;} @ end

 

XNTabBarButton. h

 

#import 
 
  @interface XNTabBarButton : UIButton@end
 

 

 

XNTabBarButton. m

 

# Import "XNTabBarButton. h "@ implementation XNTabBarButton/** you can cancel the highlighted state of the system button without doing anything */-(void) setHighlighted :( BOOL) highlighted {// [super setHighlighted: highlighted];} @ end

V. Code Reconstruction

 

 

The purpose of refactoring is to put the code in the most appropriate place and improve the readability and scalability.
Rebuild controls to ensure reusability. When encapsulating other applications, you can use them directly.
Tips:1. About init and initWithFrame :? The initWithFrame method is called during object initialization .? Both Init and initWithFrame are called .? We recommend that you do not override the init Method for custom controls. You need to override the initWithFrame method during initialization .? Benefit: other people call either init or initWithFrame to call the initWithFrame method.

 

2. The layout code of the control :? We recommend that you write it in the layoutSubviews method .? Do not forget to write the super method? Write the settings such as x, y, and frame. 3. Add the custom Tabbar as the sub-view of the system TabBar, so that the automatic hide/slide function of the TabBar switch does not need to be implemented by yourself. (hidebottombaronpush)
The restructured code is as follows:: Create a custom TabBar and move the code. Sets the proxy method. The toolbar button is selected, where the record jumps.
XNTabBar. h

 

 

# Import
 
  
@ Class XNTabBar; @ protocol XNTabBarDelegate
  
   
/*** The toolbar button is selected to record where to jump. (to facilitate future special effects) */-(void) tabBar :( XNTabBar *) tabBar selectedFrom :( NSInteger) from :( NSInteger) to; @ end @ interface XNTabBar: UIView @ property (nonatomic, weak) id
   
    
Delegate;/*** use a specific image to create a button. The advantage of this operation is scalability. you can change images in other projects by using ** @ param image images in normal state * @ param selectedImage to select images */-(void) addButtonWithImage :( UIImage *) image selectedImage :( UIImage *) selectedImage; @ end
   
  
 

 

 

XNTabBar. m

 

//// XNTabBar. m /// Created by neng on 14-6-19. // Copyright (c) 2014 neng. all rights reserved. // # import "XNTabBar. h "# import" XNTabBarButton. h "@ interface XNTabBar ()/*** set the previously selected button */@ property (nonatomic, weak) UIButton * selectedBtn; @ end @ implementation XNTabBar/*** write the control initialization in this method. When the init method is called, * //-(id) initWithFrame :( CGRect) is called) frame {// if (self = [super initWithFrame: frame]) {// Add button // for (int I = 0; I <5; I ++) {// cancel a specific number /// UIButton * btn = [[UIButton alloc] init]; // XNTabBarButton * btn = [[XNTabBarButton alloc] init]; /// NSString * imageName = [NSString stringWithFormat: @ "TabBar % d", I + 1]; // NSString * imageNameSel = [NSString stringWithFormat: @ "TabBar % dSel", I + 1]; // [btn setImage: [UIImage imageNamed: imageName] forState: UIControlStateNormal]; // [btn setImage: [UIImage imageNamed: imageNameSel] forState: UIControlStateSelected]; // [self addSubview: btn]; // btn. tag = I; // set the button tag to easily index the current button, and jump to the corresponding view // Add "colon" // [btn addTarget: self action: @ selector (clickBtn :) forControlEvents: UIControlEventTouchUpInside] to the listener method with parameters. /// if (0 = I) {// [self clickBtn: btn]; //} // return self; //}-(void) addButtonWithImage :( UIImage *) image selectedImage :( UIImage *) selectedImage {UIButton * btn = [[UIButton alloc] init]; [btn setImage: image forState: UIControlStateNormal]; [btn setImage: selectedImage forState: UIControlStateSelected]; [self addSubview: btn]; // Add "colon" [btn addTarget: self action: @ selector (clickBtn :) forControlEvents: UIControlEventTouchUpInside]; // if it is the first button, select (add one by one) if (self. subviews. count = 1) {[self clickBtn: btn] ;}/ ** used to layout subviews. Do not forget to call the super Method */-(void) layoutSubviews {[super layoutSubviews]; int count = self. subviews. count; for (int I = 0; I <count; I ++) {// obtain the button UIButton * btn = self. subviews [I]; btn. tag = I; // set the button tag to easily index the current button and jump to the corresponding view CGFloat x = I * self. bounds. size. width/count; CGFloat y = 0; CGFloat width = self. bounds. size. width/count; CGFloat height = self. bounds. size. height; btn. frame = CGRectMake (x, y, width, height) ;}/ *** click the event in the Custom TabBar button */-(void) clickBtn :( UIButton *) button {// 1. set the previously selected button to unselected self. selectedBtn. selected = NO; // 2. set the current button to the selected button. selected = YES; // 3. finally, assign the current button to the previously selected button self. selectedBtn = button; // if you change the view controller, you should give it to the controller. // it is best to write it like this. First, determine whether the proxy method implements if ([self. delegate respondsToSelector: @ selector (tabBar: selectedFrom: to :)]) {[self. delegate tabBar: self selectedFrom: self. selectedBtn. tag to: button. tag];} // 4. jump to the corresponding View Controller. (set the selected controller using the selectIndex parameter) // self. selectedIndex = button. tag;} @ end

Original XNTabBarController. mAfter modification, the original code is commented out.

 

 

//// XNTabBarController. m /// Created by neng on 14-6-19. // Copyright (c) 2014 neng. all rights reserved. // # import "XNTabBarController. h "# import" XNTabBarButton. h "# import" XNTabBar. h "@ interface XNTabBarController ()
 
  
/*** Set the previously selected button */@ property (nonatomic, weak) UIButton * selectedBtn; @ end @ implementation XNTabBarController-(void) viewDidLoad {[super viewDidLoad]; // The following two methods are frequently used in development. // NSLog (@ "% s" ,__ func _); // NSLog (@ "% @", self. view. subviews); // you can print all subviews and their frame // LogFun; // LogSubviews (self. view); // Hell // delete an existing tabBarCGRect rect = self. tabBar. bounds; // bounds must be used here; otherwise, it will be added below. logFrame (self. tabBar); // [self. tabBar removeFromSuperview]; // remove the lower part of the TabBarController; // test and add your own view. XNTabBar * myView = [[XNTabBar alloc] init]; // you must change the previous type when setting the proxy. You cannot use UIViewmyView. delegate = self; // sets the proxy myView. frame = rect; [self. tabBar addSubview: myView]; // Add it to the built-in tabBar, which can be used as an event method. without having to write the // Add the button for the Controller (int I = 0; I
  
   
After customization:
   

 

 

 

Download example source code: Http://download.csdn.net/detail/xn4545945/7572263

Reprinted please indicate the source: http://blog.csdn.net/xn4545945

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.