Imitation Sina Weibo IOS client (v5.2.8) -- replace the default UITabBar (add the "+" button) and v5.2.8uitabbar

Source: Internet
Author: User

Imitation Sina Weibo IOS client (v5.2.8) -- replace the default UITabBar (add the "+" button) and v5.2.8uitabbar

Reprinted please indicate the source: http://blog.csdn.net/android_ls/article/details/45896395

Statement: similar to the Sina Weibo project, all image resources are sourced from the official website.Sina WeiboFor IOS clients, the purpose of writing this application is to learn and communicate. If infringement is involved, please inform us that I will promptly Replace the images used.


The custom UITabBar replaces the system's default value to add a "+" button in the middle of the UITabBar. Let's talk about the specific implementation.

1. Customize WBTabBar to inherit from UITabBar. The Code is as follows:

//// WBTabBar. h // SinaWeibo o // Created by android_ls on 15/5/21. // Copyright (c) 2015 android_ls. all rights reserved. // # import <UIKit/UIKit. h> @ interface WBTabBar: UITabBar @ end

2. tabBar is a read-only member variable (attribute) of UITabBarController and cannot be modified. The declaration in UITabBarController. h file is as follows:

@property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0);
In this case, we can use KVC to replace the UITabBar that comes with the system. The implementation code is as follows:

    WBTabBar *tabBar = [[WBTabBar alloc] init];    [self setValue:tabBar forKeyPath:@"tabBar"];

3. Add a UIButton to WBTabBar. The implementation code is as follows:

-(Id) initWithFrame :( CGRect) frame {self = [super initWithFrame: frame]; if (self) {// Add a button to the tabbar UIButton * plusBtn = [[UIButton alloc] init]; [plusBtn setBackgroundImage: [UIImage imageNamed: @ "success"] forState: UIControlStateNormal]; [plusBtn Duration: [UIImage imageNamed: @ "duration"] forState: Required]; [plusBtn setImage: [UIImage imageNamed: @ "duration"] forState: UIControlStateNormal]; [plusBtn setImage: [UIImage imageNamed: @ "tabbar_compose_icon_add_highlighted"] forState: UIControlStateHighlighted]; plusBtn. size = plusBtn. currentBackgroundImage. size; [plusBtn addTarget: self action: @ selector (plusClick) forControlEvents: UIControlEventTouchUpInside]; [self addSubview: plusBtn]; self. plusBtn = plusBtn;} return self ;}

4. Set the position of the plus button and adjust the position and width of each UITabBarButton in WBTabBar. The specific implementation code is as follows:
-(Void) layoutSubviews {[super layoutSubviews]; // 1. set the position of the plus button self. plusBtn. centerX = self. width * 0.5; self. plusBtn. centerY = self. height * 0.5; // 2. set the position and size of other uitabbarbuttons CGFloat tabbarButtonW = self. width/5; CGFloat tabbarButtonIndex = 0; for (UIView * child in self. subviews) {Class class = NSClassFromString (@ "UITabBarButton"); if ([child isKindOfClass: class]) {// set the width of child. width = tabbarButtonW; // set x child. x = tabbarButtonIndex * tabbarButtonW; // Add the index tabbarButtonIndex ++; if (tabbarButtonIndex = 2) {tabbarButtonIndex ++ ;}}}}

5. Define the WBTabBarDelegate protocol and declare the WBTabBar proxy. The Code is as follows:
//// WBTabBar. h // SinaWeibo o // Created by android_ls on 15/5/21. // Copyright (c) 2015 android_ls. all rights reserved. // # import <UIKit/UIKit. h> # pragma mark has already declared a UITabBarDelegate protocol in UITabBar. # If we want to add an external proxy function for pragma mark, we can inherit the custom protocol from UITabBarDelegate, add an extension function. @ Class WBTabBar; @ protocol WBTabBarDelegate <UITabBarDelegate> @ optional-(void) Partition :( WBTabBar *) tabBar; @ end @ interface WBTabBar: UITabBar @ property (nonatomic, weak) id <WBTabBarDelegate> tabBarDelegate; @ end

6. In the event processor click the plus button, notify the proxy
# Pragma mark plus button click event processor-(void) plusClick {// notification proxy if ([self. tabBarDelegate respondsToSelector: @ selector (tabBarDidClickPlusButton :)]) {[self. tabBarDelegate tabBarDidClickPlusButton: self] ;}}

7. Set the WBTabBar proxy in WBTabBarController. The specific implementation is as follows:

// 2. Use KVC to replace the UITabBar WBTabBar * tabBar = [[WBTabBar alloc] init]; tabBar. tabBarDelegate = self; [self setValue: tabBar forKeyPath: @ "tabBar"];

# Pragma mark-HWTabBarDelegate proxy method-(void) tabBarDidClickPlusButton :( WBTabBar *) tabBar {ComposeViewController * composeViewController = [[ComposeViewController alloc] init]; UINavigationController * navigationController = [[UINavigationController alloc] initWithRootViewController: composeViewController]; [self presentViewController: navigationController animated: YES completion: nil];}

8. The figure shows the truth, and the implementation is as follows:



Click the plus sign to bring up the writing interface, as shown below:


The complete source code of the WBTabBarController. m file is as follows:

//// WBTabBarController. m // SinaWeibo o // Created by android_ls on 15/5/17. // Copyright (c) 2015 android_ls. all rights reserved. // # import "WBTabBarController. h "# import" HomeViewController. h "# import" MessageViewController. h "# import" DiscoverViewController. h "# import" ProfileViewController. h "# import" WBNavigationController. h "# import" WBTabBar. h "# import" ComposeViewController. h "@ interface WBTabBarController () <WBTabBarDelegate> {HomeViewController * _ homeViewController; MessageViewController * _ messageViewController; DiscoverViewController * _ discoverViewController; ProfileViewController * _ profileViewController ;} @ end @ implementation WBTabBarController-(void) viewDidLoad {[super viewDidLoad]; // initialize the sub-controller and add it to UITabBarController _ homeViewController = [[HomeViewController alloc] init]; [self addChildController: _ homeViewController title: @ "Homepage" image: @ "tabbar_home"]; _ messageViewController = [[MessageViewController alloc] init]; [self addChildController: _ messageViewController title: @ "message" image: @ "tabbar_message_center"]; _ discoverViewController = [[DiscoverViewController alloc] init]; [self addChildController: _ discoverViewController title: @ "" image: @ "tabbar_discover"]; _ profileViewController = [[ProfileViewController alloc] init]; [self addChildController: _ profileViewController title: @ "" image: @ "tabbar_profile"]; // @ property (nonatomic, readonly) UITabBar * tabBar NS_AVAILABLE_IOS (3_0); // tabBar is the read-only member variable (attribute) of UITabBarController ), is not modified // 2. Use KVC to replace the UITabBar WBTabBar * tabBar = [[WBTabBar alloc] init]; tabBar. tabBarDelegate = self; [self setValue: tabBar forKeyPath: @ "tabBar"];} # pragma mark-HWTabBarDelegate proxy method-(void) tabBarDidClickPlusButton :( WBTabBar *) tabBar {ComposeViewController * composeViewController = [[ComposeViewController alloc] init]; using * navigationController = [[using alloc] Using: composeViewController]; [self presentViewController: navigationController animated: YES completion: nil];}/*** Add the sub-controller to UITabBarController */-(void) addChildController :( UIViewController *) childViewController title :( NSString *) title image :( NSString *) image {// set the sub-controller, title childViewController on tabbar and navigationBar. title = title; // you can specify the default image and the selected image childViewController in tabBarItem. tabBarItem. image = [UIImage imageNamed: image]; childViewController. tabBarItem. selectedImage = [[UIImage imageNamed: [NSString stringWithFormat: @ "% @", image, @ "_ selected"] imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal]; // set the style of text on tabBarItem (here is the color value of text in different States) [childViewController. tabBarItem setTitleTextAttributes: @ {NSForegroundColorAttributeName: kColor (117,117,117)} forState: UIControlStateNormal]; [childViewController. tabBarItem identifier :@{ identifier: kColor (253,109, 10)} forState: UIControlStateSelected]; // use the system's default UINavigationController // [self addChildViewController: [[UINavigationController alloc] initWithRootViewController: childViewController]; // use our custom navigation bar (WBNavigationController inherited from UINavigationController) WBNavigationController * navigationController = [[WBNavigationController alloc] handler: childViewController]; [self addChildViewController: navigationController];} @ end

The complete source code of WBTabBar. H is as follows:

//// WBTabBar. h // SinaWeibo o // Created by android_ls on 15/5/21. // Copyright (c) 2015 android_ls. all rights reserved. // # import <UIKit/UIKit. h> # pragma mark has already declared a UITabBarDelegate protocol in UITabBar. # If we want to add an external proxy function for pragma mark, we can inherit the custom protocol from UITabBarDelegate, add an extension function. @ Class WBTabBar; @ protocol WBTabBarDelegate <UITabBarDelegate> @ optional-(void) Partition :( WBTabBar *) tabBar; @ end @ interface WBTabBar: UITabBar @ property (nonatomic, weak) id <WBTabBarDelegate> tabBarDelegate; @ end

The complete source code of the WBTabBar. m file is as follows:

//// WBTabBar. m // SinaWeibo o // Created by android_ls on 15/5/21. // Copyright (c) 2015 android_ls. all rights reserved. // # import "WBTabBar. h "@ interface WBTabBar () @ property (nonatomic, weak) UIButton * plusBtn; @ end @ implementation WBTabBar-(id) initWithFrame :( CGRect) frame {self = [super initWithFrame: frame]; if (self) {// Add a button to the tabbar UIButton * plusBtn = [[UIButton alloc] init]; [plusBtn setBackgroundImage: [UIImage imageNamed: @ "success"] forState: UIControlStateNormal]; [plusBtn setBackgroundImage: [UIImage imageNamed: @ "success"] forState: UIControlStateHighlighted]; [plusBtn setImage: [UIImage imageNamed: @ "tabbar_compose_background_icon_add"] forState: UIControlStateNormal]; [plusBtn setImage: [UIImage imageNamed: @ "blank"] forState: UIControlStateHighlighted]; plusBtn. size = plusBtn. currentBackgroundImage. size; [plusBtn addTarget: self action: @ selector (plusClick) forControlEvents: UIControlEventTouchUpInside]; [self addSubview: plusBtn]; self. plusBtn = plusBtn;} return self;} # pragma mark plus button click event processor-(void) plusClick {// notify the proxy if ([self. tabBarDelegate respondsToSelector: @ selector (tabBarDidClickPlusButton :)]) {[self. tabBarDelegate tabBarDidClickPlusButton: self] ;}}-(void) layoutSubviews {[super layoutSubviews]; // 1. set the position of the plus button self. plusBtn. centerX = self. width * 0.5; self. plusBtn. centerY = self. height * 0.5; // 2. set the position and size of other uitabbarbuttons CGFloat tabbarButtonW = self. width/5; CGFloat tabbarButtonIndex = 0; for (UIView * child in self. subviews) {Class class = NSClassFromString (@ "UITabBarButton"); if ([child isKindOfClass: class]) {// set the width of child. width = tabbarButtonW; // set x child. x = tabbarButtonIndex * tabbarButtonW; // Add the index tabbarButtonIndex ++; if (tabbarButtonIndex = 2) {tabbarButtonIndex ++ ;}}}@ end

ComposeViewController inherits from UIViewController and is mainly implemented in m files. The complete code is as follows:

//// ComposeViewController. m // SinaWeibo o // Created by android_ls on 15/5/21. // Copyright (c) 2015 android_ls. all rights reserved. // # import "ComposeViewController. h "# import" UIBarButtonItem + Category. h "@ interface ComposeViewController () @ end @ implementation ComposeViewController-(void) viewDidLoad {[super viewDidLoad]; self. title = @ "Writing interface"; self. view. backgroundColor = [UIColor whiteColor]; self. navigationItem. leftBarButtonItem = [UIBarButtonItem itemWithTarget: self action: @ selector (back) image: @ "navigationbar_back_withtext" highImage: @ "navigation" title: @ "return"];}-(void) back {[self. navigationController dismissViewControllerAnimated: YES completion: ^ {}] ;}@ end


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.